Advertisements

How To Add Random,Rotating Images for Blogger Header

Posted by Lasantha Bandara on July 9th, 2010 File Under : background, header, image, java script25 Comments
Advertisements

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]=&quot;URL-OF-HEADER-IMAGE-1&quot;
HeaderImage[1]=&quot;URL-OF-HEADER-IMAGE-2&quot;
HeaderImage[2]=&quot;URL-OF-HEADER-IMAGE-3&quot;
HeaderImage[3]=&quot;URL-OF-HEADER-IMAGE-4&quot;
HeaderImage[4]=&quot;URL-OF-HEADER-IMAGE-5&quot;
var random=Math.round(4*Math.random());

document.write(&quot;<style>&quot;);
document.write(&quot;#header-wrapper {&quot;);
document.write(&#39; background:url(&quot;&#39; + HeaderImage[random] + &#39;&quot;) no-repeat left TOP;&#39;);
document.write(&quot; }&quot;);
document.write(&quot;</style>&quot;);

</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]=&quot;URL-OF-HEADER-IMAGE-1&quot;
HeaderImage[1]=&quot;URL-OF-HEADER-IMAGE-2&quot;
HeaderImage[2]=&quot;URL-OF-HEADER-IMAGE-3&quot;
HeaderImage[3]=&quot;URL-OF-HEADER-IMAGE-4&quot;
HeaderImage[4]=&quot;URL-OF-HEADER-IMAGE-5&quot;
HeaderImage[4]=&quot;URL-OF-HEADER-IMAGE-6&quot;
HeaderImage[4]=&quot;URL-OF-HEADER-IMAGE-7&quot;
HeaderImage[4]=&quot;URL-OF-HEADER-IMAGE-8&quot;
var random=Math.round(7*Math.random());

document.write(&quot;<style>&quot;);
document.write(&quot;#header-wrapper {&quot;);
document.write(&#39; background:url(&quot;&#39; + HeaderImage[random] + &#39;&quot;) no-repeat left TOP;&#39;);
document.write(&quot; }&quot;);
document.write(&quot;</style>&quot;);

</script>

4.Now save your template and your done.Refresh your site few times to see the result.Your header image will be rotate.

File Under : background, header, image, java script

25 Responses to “How To Add Random,Rotating Images for Blogger Header”

  1. mm says:

    How do you showing only titles in this blogger blog. Do you have any post about this trick?

    Thanks

  2. Blogger Tips And Tricks|Latest Tips For Bloggers says:

    @mm

    Read this:

    http://www.bloggertipandtrick.net/2009/12/show-post-title-only-homepage-blogger.html

  3. New Free Blogger Template Everyday says:

    How to make automatic rotating?

  4. Cskuan (www.1my.my@gmail.com) says:

    Love your site so much,thank you!

    I have a small request sir.
    May i know how to create "Tag Button" as in
    http://newbloggertemplates.com (What's the technique use please?)

    Best Regard,
    Cskuan

  5. AriDeonne says:

    I have a new template design and my code does not have a body tag take or #header-wrapper section, where would I input the code?

  6. cara-blog.co.cc says:

    gan, bagus banget blognya, kunjungi jg blog saya ya :)

  7. Blogger Tips And Tricks|Latest Tips For Bloggers says:

    @AriDeonne

    What is your site URL ?

  8. Anonymous says:

    Thanks man.Great tutorial.

  9. Beben says:

    for emphasis only, if the #header-wrapper code could be different, adjust with the existing code section of each template header.
    sometimes for header code can different
    thanks...

  10. snowwhite99 says:

    I have added that html.. but it doesnt work, only the main header appears there when i refresh it..

    my url is http://cecile821.blogspot.com/

  11. snowwhite99 says:

    ah.. it has worked.. sorry for inconvenience :D
    awesome tips! love your tips and tricks!! Great!! love it!!

  12. Ivy says:

    hi i tried pasting the code and following the instructions but it didn't work.Can you assist me with this? Thanks! My blog URL is http://ivycreations.blogspot.com
    email:ivy_ryc@hotmail.com

  13. revin says:

    hi, nice blog, visit and follow my blog ok

  14. Anonymous says:

    @revinyes its good

  15. Admin says:

    nice post

    Follow me at http://youtrickz.blogspot.com

  16. Gaia Eos says:

    Hi it doesnt work can you help me please

  17. Soupie says:

    Love this tip, thanks!

  18. MrPatrickMr says:

    is it possible to do the self with the background image?

  19. WENDY ZETA says:

    i♥your work is too hard to me ;-)
    thanx

  20. WENDY ZETA says:

    I♥your work.. is too hard to me....
    thanx!

  21. Adam says:

    Hey,
    I got this to work but i'm wondering how I can make the images clickable to link to the homepage?
    Thanks

  22. Saturday Update says:

    is there no horizontally align featured post that I can use?

  23. mathapocha says:

    It is really helpful for those want to arrange their blogspot attractive.

  24. Phantom says:

    Very nice, but how is the code with all the images linked to 1 single link?

    Thanks

Leave a Reply