Blogger Tips
Today's tutorial will teach you how to add a very simple image slider to the sidebar or content area of your Blogger Blogspot blog. 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.
This slider is so simple you will be able to have it up and running in about 5 minutes. No change to the template is required making it a breeze to install. Even if you are very new to Blogger and a beginner I will show you just how easy it is to add an image slider to your Blogger blog.
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
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:
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
In today's tutorial I have shown you how to add a very simple image slider to your Blogger Blogspot blog to show off the images on your blog. There are a number of other image and content sliders and image slide carousels that can be added to Blogger and I will be writing about some of these in my upcoming posts.
Related Articles
List of Blog Know How Tutorials for Blogger Blogs
- Orbit - Jquery Image Slider Plugin For Blogger
In this tutorial, you will see how to add another beautiful image slider for Blogger / BlogSpot made with jQuery and, of course, with HTML and CSS. This slider, called Orbit, is a lightweight jQuery plugin that will display multiple images in a limited...
- Create A Css Image Slider With Thumbnails For Blogger
Image galleries/sliders are particularly useful for photoblogs, but they could also serve those who occasionally need a gadget like this. As we have seen in a previous tutorial, on the top of the main thumbnail, we have had some smaller thumbnails which...
- Possibly The Most Simple Jquery Slider
Do you have jQuery in your site or blog and space to insert 10 lines of code? If the answer is yes, and you want to have an automatic slideshow, this is the simplest code I've seen so far. So, having a succession of images added inside a box with...
- Free Blogger Template Lk Magazine
LK Magazine is a free Blogger template (Blogspot template) with a host of premium features you are sure to enjoy. The Blogger template comes in magazine style and is suitable for a variety of business blogs or even a personal blog. The LK Magazine Blogger...
- Free Blogger Template Blogger Tube
Blogger Tube is a free Blogger template (Blogspot template) ideally suited for a video blog. Stylish in red, grey and black the Blogger Tube template comes with 2 columns and a right sidebar. One of the nicest features of the Blogger Tube template is...
Blogger Tips
Add Simple Image Slider to Blogger
Today's tutorial will teach you how to add a very simple image slider to the sidebar or content area of your Blogger Blogspot blog. 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.
This slider is so simple you will be able to have it up and running in about 5 minutes. No change to the template is required making it a breeze to install. Even if you are very new to Blogger and a beginner I will show you just how easy it is to add an image slider to your Blogger blog.
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
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:
This code results in:
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> - 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.
In today's tutorial I have shown you how to add a very simple image slider to your Blogger Blogspot blog to show off the images on your blog. There are a number of other image and content sliders and image slide carousels that can be added to Blogger and I will be writing about some of these in my upcoming posts.
Related Articles
List of Blog Know How Tutorials for Blogger Blogs
- Orbit - Jquery Image Slider Plugin For Blogger
In this tutorial, you will see how to add another beautiful image slider for Blogger / BlogSpot made with jQuery and, of course, with HTML and CSS. This slider, called Orbit, is a lightweight jQuery plugin that will display multiple images in a limited...
- Create A Css Image Slider With Thumbnails For Blogger
Image galleries/sliders are particularly useful for photoblogs, but they could also serve those who occasionally need a gadget like this. As we have seen in a previous tutorial, on the top of the main thumbnail, we have had some smaller thumbnails which...
- Possibly The Most Simple Jquery Slider
Do you have jQuery in your site or blog and space to insert 10 lines of code? If the answer is yes, and you want to have an automatic slideshow, this is the simplest code I've seen so far. So, having a succession of images added inside a box with...
- Free Blogger Template Lk Magazine
LK Magazine is a free Blogger template (Blogspot template) with a host of premium features you are sure to enjoy. The Blogger template comes in magazine style and is suitable for a variety of business blogs or even a personal blog. The LK Magazine Blogger...
- Free Blogger Template Blogger Tube
Blogger Tube is a free Blogger template (Blogspot template) ideally suited for a video blog. Stylish in red, grey and black the Blogger Tube template comes with 2 columns and a right sidebar. One of the nicest features of the Blogger Tube template is...