In this tutorial I am going to explain how to add random,rotating images for your blogger header background.When after you adding this feature to your blogger blog,header image of your blog will rotate/change in each page refresh.Before doing this trick you must create header images for your blog.In this tutorial I am going to show how to rotate 5 header images.
1.Log in to your dashboard--> Design- -> Edit HTML
2.Scroll down to where you see <body> tag.
3.Now copy below code and paste it just after the <body> tag.
<script type='text/javascript'> var HeaderImage= new Array() HeaderImage[0]="URL-OF-HEADER-IMAGE-1" HeaderImage[1]="URL-OF-HEADER-IMAGE-2" HeaderImage[2]="URL-OF-HEADER-IMAGE-3" HeaderImage[3]="URL-OF-HEADER-IMAGE-4" HeaderImage[4]="URL-OF-HEADER-IMAGE-5" var random=Math.round(4*Math.random()); document.write("<style>"); document.write("#header-wrapper {"); document.write(' background:url("' + HeaderImage[random] + '") no-repeat left TOP;'); document.write(" }"); document.write("</style>"); </script>
NOTE :
Replace "URL-OF-HEADER-IMAGE-X" with your image URLs.
If above code doesn't work for your blog,then replace "#header-wrapper" with "#header".(ID or Class of your header section).
You can add different number of images than 5.But remember to change "4*Math.random()" according to the number of images you add.For example,when you want to add 8 different images for your blog header background, then code should be change as "7*Math.random()".Look at the example below:
<script type='text/javascript'>
var HeaderImage= new Array()
HeaderImage[0]="URL-OF-HEADER-IMAGE-1"
HeaderImage[1]="URL-OF-HEADER-IMAGE-2"
HeaderImage[2]="URL-OF-HEADER-IMAGE-3"
HeaderImage[3]="URL-OF-HEADER-IMAGE-4"
HeaderImage[4]="URL-OF-HEADER-IMAGE-5"
HeaderImage[4]="URL-OF-HEADER-IMAGE-6"
HeaderImage[4]="URL-OF-HEADER-IMAGE-7"
HeaderImage[4]="URL-OF-HEADER-IMAGE-8"
var random=Math.round(7*Math.random());
document.write("<style>");
document.write("#header-wrapper {");
document.write(' background:url("' + HeaderImage[random] + '") no-repeat left TOP;');
document.write(" }");
document.write("</style>");
</script>
4.Now save your template and your done.Refresh your site few times to see the result.Your header image will be rotate.
The post How To Add Random,Rotating Images for Blogger Header appeared first on Blogger Tips And Tricks|Latest Tips For Bloggers.