Can Everton Jones find out how his father stole Emperor Bokassa’s diamonds and, more importantly, where he hid them; before the world and his brother get there first?
Click on the picture link in the sidebar to read an extract of my first novel, which was published by Paradise Press in August 2012.

Thursday, 10 April 2014

DISPLAYING a WOWslider slideshow in a Blogger / Blogspot blog

This is my last post on this topic. But given the number of hits I’ve had on the others, I think I should post my last word. Here is a Wowslider slideshow of some of the bookjackets I have designed:


It should NOT be possible to do this in Blogger. In fact it isn’t, strictly speaking in blogger at all. I have signed up for a free website and uploaded the slideshow there. You see ALL the components of the Wowslider slideshow HAVE to be in the same folder. Blogger would have required you to put the <head> section bits and pieces in your blogger template and you would have had to store the other parts of the slideshow somewhere else, which breaks the scripts in WOWslider.

This is how to get around the problem: The slideshow above is uploaded to a free website which I just signed up for. Then in the blogger post I have used an iframe which DISPLAYS the slideshow. Having tried other methods, this is the only way I can find to show a WOW Slider slideshow in a blogger blog. It cost me NOTHING (provided I was prepared to accept the watermark on the slideshow), and took just a few minutes.

Step-by-step, this is how it was done:



First, I visited www.000webhost.com. This company offers free webhosting. I assume they make something by selling upgrades to their free website clients when they outgrow the limited free account but, for the purposes of finding somewhere on the web to save your wowslider slideshow their free service is just perfect. (Other free website providers are available!) On their homepage, click on ‘Free Domain Hosting’ from the menu on the right hand side of the screen:


And then on the next page click on the ‘Order Now’ tab:

This takes you to a sign-up page, which is a model of simplicity. About the only thing of conseqence on this page is the field to enter the website address. You CAN use a domain name which you have purchased. That involves a complicated process of updating ‘nameservers’ and paying an annual fee (not much to be sure, but still not entirely FREE!!!!). The alternative is to use a FREE sub-domain of their site, much like your blogger blog is a subdomain of blogspot.com. I went for the sub-domain option and entered something which I hoped wouldn’t already be taken:

Luckily it wasn’t. The actual address of the website you are using to store your wowslider slideshow doesn’t matter, as it will never be seen by the user of your blogger blog. A subdomain of another site is quite adequate. Call it anything at all: even a string of completely random nonsense will do!!!!

Next you need to specify an email address:

Then you need to enter a password. Maybe it is worth mentioning that they emailed the password back to me in the confirmation email, so my advice would be to use a unique password and change it to something else the moment you get access to your account. Then there was a facebook ‘like’ button, which was a bit of a surprise: It seems a bit like putting the cart before the horse, asking me to ‘like’ something I haven’t tried out yet! Finally there is a ‘capcha’. I hate these, but luckily for me this one was fairly easy to make out, once I had my reading glasses on!

Ant that was that!!! I clicked on their ‘create my account’ button and the screen displayed a message saying they were waiting for email confirmation:

So I went to my email and clicked the confirmation link. It returned me to their website. The staus message had changed:

This stymied me a bit, as I had already clicked the link in my email. However I clicked the ‘Refresh Status’ link and that did it. The screen now said my website was ready. I clicked on the control panel icon:

Now at this point I broke off and made a wowslider slideshow. I should I think point out that to do this sucessfully you will need images which are all exactly the same size. My chosen format was using the ‘Block’ template and ‘Basic linear’ slide transition. I turned off the navigation buttons but left ‘pause on mouseover’ turned on. I would recommend deciding the size you want your slideshow and then making the images the correct size. Probably best NOT to try resizing the slideshow once it has been made.

Now you will be aware that Wowslider creates a file called ‘index.html’ in the ‘WOW Slider’ folder. Also two sub-folders: ‘engine1’ and ‘data1’. ‘engine1’ contains various bits and pieces needed for Wowslider to work. ‘data1’ contains two further folders: ‘images’ and ‘tooltips’. I’ll talk about the other file: ‘iframe_index.html’ later.

Going back to the www.000webhost.com website, if you remember I had clicked on the control panel icon. This took me here:

None of which seemed particularly helpful. I scrolled down a bit and found a file manager button:

Now what I need to do is to transfer the files and folders in the ‘WOW Slider’ folder on my computer into the ‘public_html’ folder of my new website. An easy way would have been to use ftp (file transfer protocol) with a program like Filezilla, but I wanted to use the tools which are available from the control panel of the site, which turned out to be a little more tricky.

Loading the file manager listed the files in my website:

I double-clicked on ‘public_html’ to open it:

Now the first task is to create the folders ‘data1’ and ‘engine1’. To do this, click on the ‘New dir’ button. Then on the next screen, enter the names of the folders (directories) you want to create:

Click on the green ‘tick’ button to make the directories. You get a confirmation:

To go back, click on the blue ‘left arrow’ button at the top. You will now see your new directories in the list of files in ‘public_html’:

Now open ‘data1’ and in exactly the same way create two more directories: ‘images’ and ‘tooltips’:



When you have created the directories, open the ‘images’ folder in ‘data1’. Click the ‘Upload’ button. You can click on a ‘browse’ button to find files to add to the directory. Navigate to the equivalent folder in your WOW Slider folder: ~/Documents/WOW Slider/data1/images and add all the files in that folder, one by one:

And, in the same way as before, click on the green ‘tick’ button to add the files, then click the blue ‘left arrow’ button to go back to the file manager.

Now, in exactly the same way, you need to transfer the contents of ‘tooltips’ and also copy ‘index.html’ to the public_html folder.

And that, as they say, is that!!! If you type www.yoursubdomain.netau.net into a browser (in my case this was www.rodshelton.netau.net), you will be able to see your slideshow.

Well that’s all very well, but how do you view the slideshow in your blogger blog??? The answer lies in the other file in WOW Slider: ‘iframe_index.html’. In keeping with my intention to make this post accessible, I decided to use notepad to do the next step. You could use an html editor like Komodo Edit instead. To view this file in notepad, I changed the extension of iframe_index.html to .txt and then opened the file using notepad (right-click on the file and select ‘open with/notepad’ from the pop-up menu). In notepad, the file looked like this (I have inserted some line breaks to make it all visible in the screenshot):

What you need to do is to copy the entire contents of this file to the clipboard and then paste that into a blank new post in Blogger in html view. Then you only need to edit the path to your website into the post, like this:

The screenshot above is the html view of this post showing the modification of the iframe to point to the website where I stored the slideshow. Obviously you will need to use the address of YOUR website, substituting your subdomain name for ‘rodshelton’.In case the screenshot isn’t clear enough, you need to insert:

http://www.yoursubdomain.netau.net/

into:

<iframe src="http://www.yoursubdomain.netau.net/index.html" ></iframe>.

Perhaps it would be an idea to add that if you want to use your new website to store more than one wowslider slideshow, then copy the file ‘index.html’ saved by WOW Slider and save it as ‘something_else.html’. Then reference the iframe as src="http://www.yoursubdomain.netau.net/something_else.html". When saving another WOW Slider slideshow, remember to change the serial number of the slideshow, so it saves the folders as ‘data2’ and ‘engine2’, etc. etc.

Hope that’s helpful. More ‘ How to …’ posts coming soon.

TinyURL for this post: http://tinyurl.com/k2atx8n

6 comments:

  1. Hi
    i really like what you did
    but in the step after uploading everything
    my web site should show the wowslider but instead
    it showed the pics separately from one another
    like this :
    http://im59.gulfup.com/73q0jb.png
    one under another
    i wait for your solution
    thankyou so much

    ReplyDelete
  2. thanks man
    now it is working!!
    you just forget to say to upload the engine1 folder to the domain
    thank u again

    ReplyDelete
  3. Thanks, I made it thanks to you but adds are showing up :(

    ReplyDelete
  4. easy steps to upload your wow slider design in blogger.
    visit my site www.design2blogger.blogspot.com

    ReplyDelete
  5. Thank u so much bro,,,,I wasted my almost one sleepless week to solve it and u did this.

    do I need to upload my youtube videos on same hosting website if I m using wowslider with youtube videos or still I can link them without uploading them on 000webhost.com ?
    plz answer and thanks again.
    happy posting!!!!

    ReplyDelete

 
Twitter Bird Gadget