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]="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>
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]="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>
4.Now save your template and your done.Refresh your site few times to see the result.Your header image will be rotate.
How do you showing only titles in this blogger blog. Do you have any post about this trick?
Thanks
@mm
Read this:
https://www.bloggertipandtrick.net/2009/12/show-post-title-only-homepage-blogger.html
How to make automatic rotating?
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
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?
gan, bagus banget blognya, kunjungi jg blog saya ya 🙂
@AriDeonne
What is your site URL ?
Thanks man.Great tutorial.
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...
@Blogger Tips And Tricks|Latest Tips For Bloggers http://www.blacknaps.org
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/
ah.. it has worked.. sorry for inconvenience 😀
awesome tips! love your tips and tricks!! Great!! love it!!
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
hi, nice blog, visit and follow my blog ok
@revinyes its good
nice post
Follow me at http://youtrickz.blogspot.com
Hi it doesnt work can you help me please
Love this tip, thanks!
is it possible to do the self with the background image?
i♥your work is too hard to me 😉
thanx
I♥your work.. is too hard to me....
thanx!
Hey,
I got this to work but i'm wondering how I can make the images clickable to link to the homepage?
Thanks
is there no horizontally align featured post that I can use?
It is really helpful for those want to arrange their blogspot attractive.
Very nice, but how is the code with all the images linked to 1 single link?
Thanks