Pages

Saturday, May 11, 2013

How to Embed Wow Slider into a Blogger Post

I spent a good bit of last night trying to embed a Wow Slider series of images into this blog, by Blogger. So I am documenting how I finally got it to work -- to help anyone who might be looking for help like me. Wow Slider's FAQs were confusing and not much help for Blogger users. WordPress has a plugin but for Blogger users, things are less rosy.  I couldn't solve the problem despite pasting and repasting the codes and tweaking with it. Googling didn't produce many results. This afternoon, I thought through the steps again, and voila, I finally figured it out.

Here're the steps I took after uploading the folder of Wow Slider images I had published to my personal website. I'm going to use a bit of jargon to explain.

1. I used Filezilla and uploaded (FTP-ed) the slider of images I created onto my personal web space first. I could not find any other way that worked for me using the free Wow Slider software. Check that your gallery of images/project published correctly and you have a folder with Engine, Data and index.html files.

2. Log in to your Blogger dashboard.

3. On the left menu, click on Template, and on the screen, look for Edit HTML. Got it?

4. Now, go to your own webpage (or some webhost where you have transferred your Wow slider of images) where you had published your Wow Slider of images. It should read something like "http://yourname.com/wowfoldernameofimages/index.html" or some URL where you had uploaded your images.

5. Right-click on this index.html page to View Page Source. Select and copy the contents between [HEAD] and [/HEAD].

6. Go back to the Template > Edit HTML page with all the code. Insert and paste the contents from Step 3 just BEFORE the [/HEAD] text on your Blogger page. Be sure to Preview and backup your  template page somewhere first before you SAVE TEMPLATE.

7.  Now, look at the code carefully,

<link rel="stylesheet" type="text/css" href="engine1/style.css" /> <script type="text/javascript" src="engine1/jquery.js"></script>

BEFORE "engine1," insert your own webpage's direct link to the series of images, that is, as in what you did in Step 4, ""http://yourname.com/wowfoldernameofimages/"

8. When done, PREVIEW and then SAVE TEMPLATE.

9. Now create a NEW POST in your Blogger blog.

10. Click on the HTML button to complete this next step. You are going to paste more code from your own webpage.


11. Look at the View Page Source code again, select and copy the contents between [BODY] and [/BODY].

12. Go to your Blogger new post and paste the contents on the page (HTML view).

13. This step is important. Look at the code carefully. In every line where you find these words, img src="data1 ..."

img src="data1/images/093216.jpg" alt="I wonder ..."
 title="I wonder ..." id="wows1_0"/></li>

YOU NEED TO INSERT the link to your webhosted page, e.g. as in Step 2: ""http://yourname.com/wowfoldernameofimages/".

Then, the code would look like this:
img src="http://yourname.com/wowfoldernameofimages/data1/images/093216.jpg"
 alt="I wonder ..." title="I wonder ..." id="wows1_0"/></li>
 
If I'm making sense to you, your Wow Slider should embed correctly in a Blogger post.

All the best! Here's how mine looks: Wow Slider gallery 1

Preparing to Teach Online 2013 Wrap-Up