Sunday, February 26, 2012

Add Moving Banner in your Web-site/Blog..!!

>>Here I'm posting a Javascript/HTML code for all my blogger friends through you can put your own Ad on your blog..
>>Just you have follow simple steps..I have tried to make it simple..!
>>If your Google Page Rank is good then any client may want to put his ad on your blog..So start editing your Header for Ad..!!

Step 1:

>>You need re-code  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://3.bp.blogspot.com/-IqrItI2HM6E/T0j0CY9CDWI/AAAAAAAAALE/hBC2_BH7z6U/s1600/bat.jpg";
banner[banner.length] = "http://3.bp.blogspot.com/-bsgxk0mtqvY/TxvJco-Ol9I/AAAAAAAAAH0/cRKqgYi9z6A/s1600/favi.jpg";
banner[banner.length] = "http://2.bp.blogspot.com/_d_SOV0UtCYM/TPGhMb0B4yI/AAAAAAAAAV0/4kayAKTwLmk/s1600/computer-engineer.gif";
banner[banner.length] = "http://2.bp.blogspot.com/-f-v4kL9owTA/TwL0PFMevpI/AAAAAAAAAGU/Qh71BxdLjM0/s1600/autorun.png";

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

>>Here,I have inserted the my blog-post images.You can replace all them with your URL in banner[banner.length]="http:\\www.myblog\image.pnj". Now refresh your blog and check it. You will see the rotating banner in the header of your blog.


No comments: