Add Simple Image Slider to Blogger

The image slider will enable you to show off your images to readers and makes a nice addition to a personal blog. Each scrolled image is linked to the related post so that readers can find the posts they are interested in very easily. When the reader hovers over the image the slider stops and resumes again when the mouse is removed. See a for a working demo of this image slider in the content area or for a working demo of this image slider in the sidebar area.

How To Add a Very Simple Image Slider to a Blogger Sidebar
(note this code will scroll the image from bottom to top)

1. Login to Blogger if not already logged in

2. Navigate to Layout > Page Elements

3. Click on Add a Gadget in Blogger sidebar

4. Select the HTML/Javascript widget from the list of available gadgets

5. Paste the following code into the content box of the gadget

<br /><!-- HTML codes by announmous.blogspot.com --><br /><marquee behavior="scroll" direction="up" scrollamount="5" onmouseover="this.stop();" onmouseout="this.start();"><a href="url of blog"><img alt="description of image" width="160" src="url of image" height="110" /></a><p>Image title</p><a href="url of blog"><img alt="description of image" width="160" src="url of image" height="110" /></a><p>Image title</p><a href="url of blog"><img alt="description of image" width="160" src="url of image" height="110" /></a><p>Image title</p><a href="url of blog"><img alt="description of image" width="160" src="url of image" height="110" /></a><p>Image title</p><br /></marquee><br />

6. Add a title to the widget if you wish

7. Substitute the url of your blog posts, the description of your image, the url of the image, and the title of the image for each image you wish to display. For example:

<br /><!-- HTML codes by blogknowhow.blogspot.com --><br/>
<marquee behavior="scroll" direction="up" scrollamount="5" onmouseover="this.stop();" onmouseout="this.start();">
<a href="http://best-free-blogger-blogspot.com"><img alt="Blue Magz - Best Free Blogger Blogspot Templates" width="160" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7Tse4Zc3EnjZ5azVwQ1U-adyqOeEUScHuWXyU_jq57ydj-C7PYypLWGcQ8fcURMIYvvQv4Q13KNShouFh5JEgYOAItDbZsZnxdHnR-qfj1WOsfRp0h0MQMHAiQC7fQvhgYa600nM_Imo/s320/blue-magz_blogger-template.jpg" height="110" /></a>
<p>Blue Magz</p>
</marquee>

Blue Magz

To find the URL of your blog post go to the individual post page and copy the url from the address bar in your browser.

To find the URL of the your image. Upload your image to a blogger post and copy the address enclosed in src=" " tags.

8. Save the gadget

9. Use the drag and drop feature to position the new widget in the sidebar

10. Click on save to save your changes

11. View your new widget in the sidebar of your blog.

Tips and Troubleshooting

To change direction of the slider
Please note that this code will scroll the image from bottom to top. If you would like it to scroll in the reverse direction all you need do is change the direction in the code from "up" to "down". Or alternatively you can scroll from left to right by setting "right" and right to left by setting "left"

To increase the size of the images
To increase or decrease the size of the image displayed simply adjust the width and height parameters to suit your needs

To add more images
To add more images to the slider add the following to the code before </marquee>

<br /><!-- HTML codes by blogknowhow.blogspot.com --><br /><a href="http://"><img height="110" alt="description of image" src="" width="160" /></a> <p>Image title</p>

To adjust scroll speed
Scroll speed is set to 5 by default but any number can be set between 1 and 20 with "1" being the slowest and "20" being very fast indeed.