How to add random rotating images to the header of your Blogger blog
1. Log in to Blogger, then go to Dashboard --> Design --> Edit HTML.
2. Find (Ctrl + F) the <body> tag.
3. Copy the following code and paste it immediately below 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>
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>
If the above code doesn't work for your blog, then replace "#header-wrapper" with "#header". (ID or Class of your header section).
You can add any number of images, it doesn’t have to be 5. But remember to change "4*Math.random()" according to the number of images you want to add. For example, if you want to add 8 different images to your blog header background, the code should be changed to "7*Math.random()". Look at the following example:
<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>
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>
Facebook
2 comments:
you need to create (or find) header images that suit the topic of your blog. In this tutorial I am going to show how to rotate 5 header images.
garbage removal Brampton
This is a good posting, I was wondering if I could use this write-up on my website, I will link it back to your website though.
substance treatment
Post a Comment