How to Add Scrolling Images to Blog

In the previous post we have seen how to add scrolling text the blog using <marquee> tag. The same tag can also be used to add scrolling images to the blog.
In a library blog, the scrolling images will be useful to display the covers of the books newly added to the library.



How to Add Scrolling Image

We will use the HTML tag <img>  to add an image. The <img> tag takes the following attributes:

src :  the source of the image which is the complete URL to the image
height: to specify height of the image (optional)
width: to specify width of the image (optional)
alt: to provide an alternative text to the image (optional)
The format of the tag is as follows:
<img src="URL of Image"/>
You need to provide the URL of the image inside the quotes replacing the text in red given there.

In the Blogger dashboard Layout tab click on Add a Gadget on the area where you want to add a scrolling image(s). You can click under cross-column area in the simple theme to have a full width scrolling text below the header or you can add it to the sidebar and then drag and drop it to the cross-column2 area if you have added a menu bar to the first cross-column.

Now select HTML/Javascript gadget and add the code given below.

<marquee>

<img src="URL of Image 1"/>
<img src="URL of Image 2"/>
<img src="URL of image 3"/>

</marquee>

(Replace the text in red with the URLs of your images)
For example I have taken the URL of the images to some of the images on my blog and modified the above code like this:

You can see the resulting scrolling images below

You can see that the images are of different sizes and it does not look nice on the blog. You can add the attribute width or height to the images to make the image size uniform. As we have added a horizontal scrolling marquee, it will be better if the height of all the images are the same. So we will modify the above code adding the height attributes to each image.



See the resulting scrolling image below



You can change the direction of the marquee by adding the direction attribute to the starting marquee tag. The available options are:
<marquee direction="up">
<marquee direction="down">
<marquee direction="left">
<marquee direction="right">

The HTML tag <a> can be used to provide a hyperlink to your images. Remember the hyperlink tag is to be added to the <img>

To get the URLs to your images, you can first create a new post and then upload all the images to the post. Once the images are added to the post, click on individual images and select original size from the image toolbar. Then right click on the image and click Copy image address from the popup menu. This URL can be pasted inside the quotes.

See the video below on How to Create a Scrolling Marquee for your blog.

You can use the fee online marquee generator by clicking here