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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixscDDtVmsL0N9-jT-ytQMpbpgeTLUUdXr8cx48PgirPqr8hhu6HG8hdk9ZEypK_xDnG-5Z3RfuW-aJACnoqGF46s4QJWo4TtuBzulBJSy0UM-Fd48WLumfQR4BEmUIKSVPu55TR0218Nl/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(' background:url("' banner[random] '") no-repeat TOP;');
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...!!
No comments:
Post a Comment