Blogspot Vision: 4/1/10

Friday, April 30, 2010

How to add image rotation with JavaScript

From this tutorial, you will be able to filter images through a single script. This is a handy script for not only web-development but also online marketing. By filtering affiliate ad’s through the script, you will be able to gain valuable insights on your readers interest and which ads are actually generating clicks and leads for you or vice versa.

Click here to see the demo

To add the image rotation:

1. From your Blogger dashboard, navigate to Layouts and then Edit HTML.

2. From Page Elements, select Add HTML/JavaScript and then add the following JavaScript below after modifying it with your images:

<script language='javascript'>
// Courtesy of SimplytheBest.net - http://simplythebest.net/scripts/
<!--
i=0;
var ads = new Object();
var header='<CENTER><TABLE CELLPADDING=0 CELLSPACING=1 BORDER=0><TR><TD '
+ 'ALIGN=CENTER><FONT SIZE=2 FACE=Arial>';
ads[i++] = header

+'<A HREF="THE HEADER LINK" TARGET="_top">HEADER TITLE</A>'
+'</TD><TR></TR><TD><A HREF="THE IMAGE LINK" TARGET'
+'="_top"><CENTER><IMG SRC="THE LINK TO YOUR DESIRED IMAGE TO BE DISPLAYED"></CENTER>'
+'</A></TD></TR></TABLE></CENTER>';

ads.length = i;
dat = new Date();
dat = (dat.getTime()+"").charAt(8);
if (dat.length == 1)
ad_num = dat%ads.length;
else
ad_num = 0;
document.write(ads[ad_num]);
// –>
</script>

You can add more images by simply adding the section code below right after the middle section code above.

ads[i++] = header +'<a href="THE HEADER LINK" target="_top">HEADER TITLE</a>' +'</td><tr></tr><td><a href="THE IMAGE LINK" +?="_top" TARGET?="TARGET?"></a><center><img src="THE LINK TO YOUR DESIRED IMAGE TO BE DISPLAYED" /></center>' +'</p> </td></tr></table><center></center>';

4. You should preview your blog first to see if all codes have been implemented correctly. If so, save your template and you’re finished.

Source: http://simplythebest.net/scripts/