How To add Sidebar Blogger Widget With Automatic Changing Ads Banners

Hey there, I was lately asked by one of my readers on how to add automatic changing banners to either blogger sidebar or footer bar. Well! have you ever wondered how you could put several ads banner in one widget?. Yes indeed it's very simple and by the way this widget could help you keep you blog clean and somehow awesome. 

The widget is a java script coded which works in amazing way. It allows you to tidy your sidebars, footer bars as well as the header bar widgets not forgetting you can also set the ratio value to you needs and according to your blog theme style too.

I have come across most blog and frankly I got frustrated on how their theme style appears. First the blog page would load much slower and then finally you get this picture with clumsy look-no offense though. That indeed can scare away your visitors as it doesn't give that willing of the visitors coming back again to read your blog. Also it will be troublesome viewing your blog through other devices. such as smartphone and tablet also mobile phones.

For a advice before using this widget, I would suggest you to please try and choose responsive themes that would easily load faster through different browsers and devices too.

Okay, with that well noted let's see how you can use this widget:

Step one: Copy and paste the below code in your notepad for editing

-----start blogakona.blogspot.com---

<script language="JavaScript"> 

images = new Array(2);

images[0] = "<a href = 'ENTER URL FOR SITE 0' rel='nofollow' target='_blank'><img src='ENTER URL FOR BANNER 0' border='0' height='200px' width='600px' alt='Banner Title'></a>";

images[1] = "<a href = 'ENTER URL FOR SITE 2' rel='nofollow' target='_blank'><img src='ENTER URL FOR BANNER 1' border='0' height='200px' width='600px' alt='Banner Title'></a>";

index = Math.floor(Math.random() * images.length); 

document.write(images[index]); 

</script

----end blogakona.blogspot.com----

Step #2: Find the coloured section for customization, Keep in mind after pasting this code in your notepad the colours will disappear therefore use this post are reference when editing.

Step #3: Change the coloured section to your desire needs:- 

• images = new Array(2); This section defines the number of banners to be displayed, therefore if displaying for than two banners then there is need to change the value.
• images[0] = This helps you to name which banner corresponds to the specific given banner code. Therefore it's important to label each banner to avoid editing confusion. What you need to do is to change the [0] value- you can also use alphabet(a,b,c...) or roman numerical(i.ii,iii..).
• ENTER URL FOR SITE 0 Change this section with your site URL(e.g yourdomain.com)
• ENTER URL FOR BANNER 0 Change this section with you banner image URL.
• To configure height and width (height='200px' width='600px') change the value of px to you desire set.
• Banner title are importance to set too, so go a head and change Banner Title with your own words.

The above code only shows two section of banners as displayed below:

images[0] = "<a href = 'ENTER URL FOR SITE 0' rel='nofollow' target='_blank'><img src='ENTER URL FOR BANNER 0' border='0' height='200px' width='600px' alt='Banner Title'></a>"; 

images[1] = "<a href = 'ENTER URL FOR SITE 2' rel='nofollow' target='_blank'><img src='ENTER URL FOR BANNER 1' border='0' height='200px' width='600px' alt='Banner Title'></a>";

Therefore to add more than two banner codes copy either one of the code above and paste below the second code as shown in the diagram below. Repeat this procedure to whatever number of codes you want.

Uploading to blogger widget:

First go to you blogger account and sign in as usual, then proceed to you blogger dashboard and no further from that.

• Open HTML/JAVASCRIPT widget, This can be from whatever position you want the banner to appear.
• Copy the code from notepad and paste it in the widget.
• Save the widget
• Reload you blog to see the effect

The effect can be noticed each time a page is loaded a different banner image appears.

And there you are. Well done. any help just comment below and i will reach out to you as soon as I can. 

Share: