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(' 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...!!
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 :(
ReplyDeleteIs there a way to make the images fade out instead of switching block like?
ReplyDelete@Hannah Aspire
ReplyDeleteThere might be a way to do it with jquery....but i am not really good at query thing
Hi can you assist me please
ReplyDeletemy email add is as follows : gaiahelloworld@yahoo.com
Thanking you in advance