How to Add Rotating Banner to Blogger Header

Banner advertisement is the best option to attract users. And if your blog is well-promoted, good rank and healthy page rank

then definately people will contact you for the banner advertisement. They pay you for their banners on your blog or website.

Here I am explaining you the way to add rotating banner in your blog header.

This is not so easy work. But my this post will save your time. Follow the instructions step by step :


Step 1:

We need code to force the header section to allowing adding page element. So go to Layout > Edit HTML and search the following codes mentioned below :

<div id='header-wrapper';>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no';>
<b:widget id='Header1' locked='true' title='Widget-based (Header)' type='Header'/;>
</b:section;>
</div;>

Replace the above code with the following code mentioned below :

<div id='header-wrapper';>
<b:section class='header' id='header' maxwidgets='2' showaddelement='yes';>
<b:widget id='Header1' locked='true' title='Widget-based (Header)' type='Header'/;>
</b:section;>
</div;>

Now click on Save button and save the template.

Step 2 :

Now goto page element, In the header section where you want to insert the rotating banner, click add a page element. Choose "HTML/JavaScript" and insert the following code inside :

<script type="text/javascript";>
var banner = new Array();

banner[banner.length] = "http://www.abctestsampleblogurl.com/testimage1.jpg";
banner[banner.length] = "http://www.abctestsampleblogurl.com/testimage2.jpg";
banner[banner.length] = "http://www.abctestsampleblogurl.com/testimage3.jpg";
banner[banner.length] = "http://www.abctestsampleblogurl.com/testimage4.jpg";

var random = Math.round(banner.length*Math.random());
document.write(';>img src="' + banner[random] + '" style="border: 0;";>');
</script;>

I have inserted the dummy url. Replace all the 4 urls with your url in the code. Now refresh your blog and check it. You will see the rotating banner in the header of your blog.