11 October, 2009

Rotating Header Image[Images changes randomly with each refresh]

Rotating image Header for blogger?

IF you are here finding this question then this might be helpful.
We have a simple enough JavaScript that randomly calls for a new Header banner or Blog background image whenever the Blog is refreshed. This is useful if you have several background pictures which are suitable for your Blog and you want to showcase all of them.
I have used this effect to some extent on this blog.



Demo :Refresh The page(F5) and see a different image on my header.

 Mine CSS code before applying this hack-

body {
    background:#fff url(http://3.bp.blogspot.com/_6pbSFKC8YH4/SiCxXg--3jI/AAAAAAAAAwc/gA4fIXJ0QWk/s1600/backgroundbody.png) no-repeat top center;
    color: #4c4b4c;
    font-size: 12px;
    font-family:Arial, Sans-Serif,tahoma, Verdana;
    text-align: left;
    margin: 0 auto 0;
    padding-right: 5px;
}

Basically this script works by overwriting the 'background' definition at the <body> part of the template.

I wrote the following right after the <body> tag:

<script type='text/javascript'>

var banner= new Array()


banner[0]="http://4.bp.blogspot.com/_nqp-0VCwy0c/S9Qhc0IKY0I/AAAAAAAABE0/GTaOyK6gUWc/s1600/finalbg1-11.png"
banner[1]="http://4.bp.blogspot.com/_nqp-0VCwy0c/S9QhghJ3LPI/AAAAAAAABE8/FgvGA7yWXWk/s1600/finalbgtemplate.png"
banner[2]="http://3.bp.blogspot.com/_nqp-0VCwy0c/S9Qhpu1ua9I/AAAAAAAABFE/GB2akCKMHnI/s1600/finalbg1blogidol.png"
banner[3]="http://3.bp.blogspot.com/_nqp-0VCwy0c/S9QwYrzmyCI/AAAAAAAABFM/nrA_RQHzL7A/s1600/finalbgsocial.pngg"
banner[4]="http://3.bp.blogspot.com/_nqp-0VCwy0c/S9QwtPpELfI/AAAAAAAABFU/FVcNvSp-2ek/s1600/finalbg1post.png"
banner[5]="http://1.bp.blogspot.com/_nqp-0VCwy0c/S9QyG-8rn-I/AAAAAAAABFs/88F5R93jZgg/s1600/finalbg1seo.png"
banner[6]="http://1.bp.blogspot.com/_nqp-0VCwy0c/S9QxG0VHGzI/AAAAAAAABFk/3RrrKhHKf9g/s1600/finalbg1help.png"

var random=Math.round(6*Math.random());

document.write("<style>");
document.write("body {");
document.write(&#39; background:url("&#39;   banner[random]   &#39;") no-repeat TOP;&#39;);
document.write(" }");
document.write("</style>");

</script>

What we are doing is actually we are overwriting CSS for my body with this javascript.

Final Note : In my template my body covers  the header image which will not be the case in most of the template.SO you might have to replace .body with #header or #header-inner


Try this trick and tell me if it works for you...!!

4 comments:

  1. I don't think I did it right. No image shows up :( Can you tell me, do I need to remove the blogger header to make the random ones work? The only image showing up is the one in the header box. The ones in the body of the code are not working :(

    ReplyDelete
  2. Is there a way to make the images fade out instead of switching block like?

    ReplyDelete
  3. @Hannah Aspire
    There might be a way to do it with jquery....but i am not really good at query thing

    ReplyDelete
  4. Hi can you assist me please
    my email add is as follows : gaiahelloworld@yahoo.com

    Thanking you in advance

    ReplyDelete


Spam/advertising comments will NEVER BE TOLERATED and will be deleted immediately!

I advise you to also "subscribe to the comment feed" and get email updates when I respond to your question.
Thanks for reading,
Admin