Clickable Random Banner Rotator Script For Blogger

In this tutorial, I will demonstrate how you can add a clickable random banner rotator script for blogger? It is a simple update of your blog. You are thinking, what kind of update is this? What will be the benefit with this update? Ok, let me tell you, my friend, that this banner rotator could be very useful for your blog and your visitors. The question is how?

It is very important to have new things to your blog. Whenever a visitor returns, he or she should see your blog is frequently updating. There are a lot of ways to update your blog regularly. You can update your blog content. You can update your blog images or services you have offered. You can also refresh the look of your blog and attract more visitors in this way. The primary goal is to show your visitors that your blog is updating continuously.

Random Banner Rotator Script:

When a visitor comes to your blog, this random banner rotator will be activated. You can add as many banners as you want with this random banner rotator script in your blogger blog. This banner rotator will change a banner with every page load done by your readers.

You can also put every banner source URL. So if you place this banner rotator in your blog sidebar and put 5 banners which will load randomly then think that, you are promoting 5 banners in the same place of your blog. You can promote your five Affiliate links or ads through this banner rotator. If you need to promote your own services or your own blog’s pages or articles, you can easily do this.

This will give you a chance to have more clicks from your readers. In this way, this process could decrease your website bounce rate too. According to me, this is very helpful and important update for your blog. Now I am going to show you the procedure how you will be able to add this lovely Random Banner Rotator Script in your Blogger blog.

Step 1: First of all you have to create your banners. You must create at least two different banners for rotating. You can choose images with any dimension because you can change your banners height and width in the source code.

I will show it later. If you have done selecting your banner images, now it is time to host them on the web to get banner image source URL. I use PICASA WEB ALBUM for hosting my images. I will recommend this for you too.

After hosting images, collect the image source URLs. In my case, I have hosted my banner images in PICASA. I have collected the image source URLs like this:

Step 2: Now login to your blogger account and go to the Blogger “Dashboard”. From the left side, Click on “Layout” section.

Click on “Add A Gadget” where you want to show your banners (I am showing it in my blog’s sidebar). Select “HTML/JavaScript”. Now copy the script from below and Put it in the HTML/JavaScript popup. Click on the save button.

Code :

<!-- Banner Rotator Powered By http://www.blogornate.com/  -->
<script type='text/javascript'> var quotes=new Array()
quotes[0]='<a href="Banner Source URL"><img alt="Banner Image Alter Tag" height="auto" width="100%" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgT3zvH1fdRdZbKQbFPaqiiJ395MucgzNJrBBW0c8M13MtUCV7h0-PG8R-5r_9o0h41yNGS5pcgEjeHHJm9jTZged5GYNGeS5NYoOKcBX8c__-15rffc3TH2qfhrPJTUZDOD1PUxHuU86Lt/s1600/b-rotator-1.jpg"/></a>'
quotes[1]='<a href="Banner Source URL"><img alt="Banner Image Alter Tag" height="auto" width="100%" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4ItQWaEqeEd8wlf0qjpEUJsuYoR94qmD0QDlNfygTKpVstbrabAbNyJ54FcQC6G6UTpH5hTG_u7jwANSH-3Wf-6SFiwsMB9GSYoZALG1DMMeUsfjyq9Kv4FcOlQaHh-TP6kx-b7Sq6Ckq/s1600/b-rotator-2.jpg"/></a>'
quotes[2]='<a href="Banner Source URL"><img alt="Banner Image Alter Tag" height="auto" width="100%" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEgjwQroITiXhQDp4-Tga80ucZ2Q5UaKw0bvel8vX8IPxf3hpU8F8N-eAC3pr_Dhv1RCeUViS6v2JeKd6LJr26eDNac5KVQqMsM6pE5E5wB8ASl5SWh049WAv6krhEyyvaE3fMyusrUZto/s1600/b-rotator-3.jpg"/></a>'
var whichquote=Math.floor(Math.random()*(quotes.length));  document.write(quotes[whichquote]); </script>

From the above code, replace all the “Yellow” highlighted parts with your own. You can set your banner’s height and width by replacing the “Red” highlighted values. I have given here three banners. If you need to increase the number of banners, you can do it easily by adding more “quotes[number]” inside into the script like this:

Code :

quotes[3]='<a href="#"><img alt="Alter Text" height="auto" width="100%" src="Banner Image Source"/></a>'
quotes[4]='<a href="#"><img alt="Alter Text" height="auto" width="100%" src="Banner Image Source"/></a>'

This script supports unlimited rotating banner so you can add as much as banner you want. Also, you can adjust height and width of your banners from the script. This is a beautiful and simple script for adding rotating banner in your blogger blog. Hope you have already added the script to your blog, and it is working fine. If not, then please let me know through the comment. I will get back to you very soon.