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.
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.
http://bit.ly/4w36zA