Head Banner Image Changing/Scrolling on Reload for Blogger

Posted by Sujitha Reddy

    Head Banner Image Changing

Head Banner image is one of the best widget for blogger, which attracts the users idea's on the top of the blog. This widget has a simple code that makes the images to scroll. In this if we reload a page then the other related banner will appear. We can change multiple images with this code, even if we can upload images then we will get our blog posts on the head. In this first you need to upload the required images and take the urls of that images and copy it in the code. For the bloggers who have been searching for the head banner image widget, for them we are providing a simple trick for your blog.
head-banner-image-changing-reload-blogger

Step By Step Process to get Head Banner Image Changing

Here is a step by step process to get the image banners on the blog posts. First take the urls of your image and do the following process.
----->First step is to login to your Blogger account.
----->Go to Blogger dashboard and select Template there click on Edit HTML.
----->Now click Ctrl+F key and type ]]></b:skin> and paste the code. 

#header { 
background: url("your header image url in quotes") no-repeat left bottom;
margin:0;
padding:2px;

}
----->Find </head> tag and paste this code on the above head tag.
<script type="text/javascript">
var banner= new Array();

banner[0]="1st image url";
banner[1]="2nd image url";
banner[2]="3rd image url";
banner[3]="4th image url";
banner[4]="5th image url";
var random=Math.round(4*Math.random());

document.write("<style>");
document.write("#header {");
document.write(' background:url("' + banner[random] + '") no-repeat left TOP;');
document.write(" }");
document.write("</style>");

</script>
Hope that you have got the different design head banner images on your blog, if you have any queries regarding this post, let us know about it, feel free to comment!!!!!.....

0 comments:

Post a Comment