Saturday, November 22, 2014

Adding WOWSlider to Blogger

Sorry, as of August 31st 2016 Google Drive no longer hosts HTML files. You can still store an HTML file on Drive, but if you link to it, you will be prompted to download the file. It will not be rendered in your browser.

Read my post here about a quick alternative called WWW Drive. You can still store your files using the directions below in Google Drive, with the same folder structure. You will have to revert the link changes back to what WOWSlider originally generated. As long as your folder is public, WWW Drive will find it and give you an alternative link to your HTML file (or just to your folder - WWW Drive will find and host the index.html file automatically). Use the link generated by WWW Drive in your iframe tag.

Alternatively you can find a host (I am using Google Cloud), transfer your files there, and revert your link changes (if you made them) back to what WOWSlider generated.

Here are my new sliders on my Portfolio page: http://billcalhounteacher.blogspot.com/p/portfolio.html.

Click HERE if you would like to remove the strikethrough and read the original directions.


I've been wanting to add a WOWSlider slideshow to my blog. WOWSlider is a little application that creates many different kinds of very cool sliders. The application generates a collection of files:
  • an engine folder which holds the CSS, JavaScript, and small images and icons for the slider functions;
  • a data folder which holds the slide images, along with thumbnail and tooltip images;
  • and finally the HTML document called index.html.

The WOWSlider website has incorrect information about adding a slider to a Blogspot post. The main difficulty is that the two generated folders need to be located somewhere on the Web to be accessed by your browser through the HTML file. If you have a website hosted on a server somewhere, you can add the folders there, and that is what some people have done successfully.

Hosting the folders and files on Drive

I don't have a hosted website, but I do have Google Drive, which is capable of hosting files for websites, so here is what I did.
  • In my Drive account (which you automatically have if you have a Google account), I created a folder that I called Slider1.
  • I made sure that the folder was shared (public on the Web - anyone can find and view).
  • Then in it I re-created the folder structure generated by WOWSlider: in my case it was a folder called engine1 and a folder called data1.
  • Within data1 I created the three folders that WOWSlider had generated: images, thumbnails, and tooltips.
  • Then I uploaded all the WOWSlider files (but not index.html yet!) from my desktop to the appropriate folders on Drive.
This last step is easily done, depending on your browser. Some browser versions let you drag-and-drop a whole list of files at once. Some browsers can upload the whole folder structure with its files all at once!

I navigated back to the top folder, the one I called Slider1, and selected it. Then I clicked the Link icon and copied the link. I pasted it into a text editor on my computer (Notepad++ rocks!). Mine looked like this:
https://drive.google.com/open?id=0B49MqzTRp5q6NEF5NEhsX09NckE&authuser=0
Note the "id=" part. That's the id of the main folder (minus the "&authuser=0" part). I edited the link so it looked like this:
https://googledrive.com/host/0B49MqzTRp5q6NEF5NEhsX09NckE/
(You can click on this link to see my test slider.)
I used my editor to open the index.html file that WOWSlider generated. There are several links in there. All I needed to do was add the "https://googledrive.com/host/0B49MqzTRp5q6NEF5NEhsX09NckE/" to the front of each link URL. So a link that looked like this:
src="engine1/jquery.js"
now looked like this:
src="https://googledrive.com/host/0B49MqzTRp5q6NEF5NEhsX09NckE/engine1/jquery.js"
My slider had 7 images, so there were 7 links to images, 7 more links to tooltip images, 2 links in the head section (to CSS and JS files), and 2 final links toward the end of the file. (This was very quick work - use the replace function of your editor.) Your file will be different, so check carefully.

Then I uploaded this adjusted file to Drive, within the Slider1 folder.

Adapting Blogger to display the slider

There is a way to paste lines of code from index.html into your blog template and into your blog post or page. I tried it, and the results weren't very good. The best approach for me was to put the slider into an Iframe in my post or page. An Iframe is a window into which your slider will be placed inside the body of your post.

I created a new Page (you could create a new Post as well) and typed the following (you might have to click the HTML button first):
<iframe src="https://googledrive.com/host/0B49MqzTRp5q6NEF5NEhsX09NckE/index.html" style="height:350px;width:585px;margin-left:-20px;overflow:hidden;border:none;" scrolling="no"></iframe>
Notice that the Iframe source (src=) is the URL for my index.html file in Google Drive. You'll have to put your own URL in. You can mess with the height and width and margin. It is redundant to have scrolling = "no" and "overflow:hidden;" but until all browsers finish the transition to HTML5, it's the most reliable way to eliminate the scroll bars.

Now you can build the rest of your post around the Iframe, using style options like "float:left;" or "border:5px solid red;" in the Iframe. You treat the Iframe very much like an image. WOWSlider also generated a file called iframe_index.html, and you could look in there for more options.

(Check out the sliders on my Portfolio page: http://billcalhounteacher.blogspot.com/p/portfolio.html)

4 comments:

  1. This comment has been removed by the author.

    ReplyDelete
  2. What i dont understand is : I want my slider to be on my main page. The one were you have the first post. If i clik New Post.I can go to html tab and copy the code. Easy. But how do i do it in the main page ?
    You can go to layout and add HTML widget...but thats not good.
    The solution is to go to template /html edit and add the iFrome there. I just dont know were...Above < /head I guess

    ReplyDelete
  3. How did you get the host/id link...cuz i don't know how.
    I just replaced the original link in my slider project,both in the index page and in Iframe ,and nothing happens.

    ReplyDelete
  4. Superb!! It worked ! Can you please tell me how to add it as a header image??

    ReplyDelete