Moving Images Widget

You must have noticed the Featured Posts section on my Home page. This section consists of a group of link images scrolling from right to left. In this posts I will show  how you can also add this feature.

1st step:
Create a division like this :

<div>
--- code ---
</div>

at the position you want to place the widget.

If you are having a <table> format in the template, then you can create a new table like this :

<table>
<tr><td>
--- code ---
</td></tr>
</table>



2nd Step:
After you have created a division(div) at your desired place, you need to paste the following code :

<MARQUEE behavior='alternate' id='marquee2'>
<LI>
<a href='your image url'><img height='90' src='your image source' width='120'/></a>
</LI>
</MARQUEE>

behavior values can be : alternate(as on my blog) , slide , scroll
href : it is the blog link to which you want the image to refer.
src: it is the source of the image (picasa,flickr or your own web space)



3rd Step:
Now to add multiple images just add more of the following :

<a href='your image url'><img height='90' src='your image source' width='120'/></a>

between the <LI> tags. Like this:

<MARQUEE behavior='alternate' id='marquee2'>
<LI>
<a href='your image url'><img height='90' src='your image source' width='120'/></a>
<a href='your image url'><img height='90' src='your image source' width='120'/></a>
<a href='your image url'><img height='90' src='your image source' width='120'/></a>
<a href='your image url'><img height='90' src='your image source' width='120'/></a>
<a href='your image url'><img height='90' src='your image source' width='120'/></a>
</LI>
</MARQUEE>

Change the height and width according to your need.

Done : After adding all the images between the <LI> tag, you are DONE. Save the template and view your blog to see the changes.