In this short tutorial I am going to show you how to add random rotating images to your Blogger blog’s header background. After adding this neat feature to your blogger blog, the header image of your blog will rotate/change with each page refresh. Before implementing this tweak, you need to create (or find) header images that suit the topic of your blog. In this tutorial I am going to show how to rotate 5 header images.
How to add random rotating images to the header of your Blogger blog
1. Log in to Blogger, then go to Dashboard --> Design --> Edit HTML.
2. Find (Ctrl + F) the tag.
3. Copy the following code and paste it immediately below the tag.
Important note: Replace "URL-OF-HEADER-IMAGE-X" with the URLs of your images.
If the above code doesn't work for your blog, then replace "#header-wrapper" with "#header". (ID or Class of your header section).
You can add any number of images, it doesn’t have to be 5. But remember to change "4*Math.random()" according to the number of images you want to add. For example, if you want to add 8 different images to your blog header background, the code should be changed to "7*Math.random()". Look at the following example:
4. Save your template. Refresh your site few times to see the result. Your header image will be rotate.
How to add random rotating images to the header of your Blogger blog
1. Log in to Blogger, then go to Dashboard --> Design --> Edit HTML.
2. Find (Ctrl + F) the tag.
3. Copy the following code and paste it immediately below the tag.
Important note: Replace "URL-OF-HEADER-IMAGE-X" with the URLs of your images.
If the above code doesn't work for your blog, then replace "#header-wrapper" with "#header". (ID or Class of your header section).
You can add any number of images, it doesn’t have to be 5. But remember to change "4*Math.random()" according to the number of images you want to add. For example, if you want to add 8 different images to your blog header background, the code should be changed to "7*Math.random()". Look at the following example:
4. Save your template. Refresh your site few times to see the result. Your header image will be rotate.
Thanks for sharing Interesting post. Thanks for taking this opportunity to discuss this, I appreciate with this and I like learning about this subject.
ReplyDeleteThis will guaranteed increase your twitter follower. More twitter follower means more traffic to your blog and good ranking in search engine also.So, give it chance dude and all beautiful.
ReplyDeleteyou need to create (or find) header images that suit the topic of your blog. In this tutorial I am going to show how to rotate 5 header images.
ReplyDeleteThis will guaranteed increase your twitter follower. More twitter follower means more traffic to your blog and good ranking in search engine also.So, give it chance dude and all beautiful.
ReplyDeleteyour blog will rotate/change with each page refresh. Before implementing this tweak, you need to create (or find) header images that suit the topic of your blog. In this tutorial I am going to show how to rotate 5 header images.
ReplyDeleteI have met some really neat people through the comments, I certainly want to encourage more me to comment. Thanks for the tips!
ReplyDeleteSuper-Duper site! I am loving it!! Will come back again - taking you feeds also, Appreciation.
ReplyDeletegreat advice and discussing,I will get this amazing for me .thank you!...
ReplyDelete