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.
File Under : background, header, image, java script
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