Disclaimer
This site does not host any files, nor do we upload them. We only index items from a few sites. We are not responsible for what other people upload to 3rd party sites. We urge all copyright owners, to recognize that the links contained within this site are located somewhere else on the web.

How To Add Random,Rotating Images for Blogger Header

Monday, November 29, 2010

Feed: Blogger Tips And Tricks|Latest Tips For Bloggers

How To Add Random,Rotating Images for Blogger Header



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]=&quot;URL-OF-HEADER-IMAGE-1&quot;
HeaderImage[1]=&quot;URL-OF-HEADER-IMAGE-2&quot;
HeaderImage[2]=&quot;URL-OF-HEADER-IMAGE-3&quot;
HeaderImage[3]=&quot;URL-OF-HEADER-IMAGE-4&quot;
HeaderImage[4]=&quot;URL-OF-HEADER-IMAGE-5&quot;
var random=Math.round(4*Math.random());

document.write(&quot;<style>&quot;);
document.write(&quot;#header-wrapper {&quot;);
document.write(&#39; background:url(&quot;&#39; + HeaderImage[random] + &#39;&quot;) no-repeat left TOP;&#39;);
document.write(&quot; }&quot;);
document.write(&quot;</style>&quot;);

</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 diff! erent 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]=&quot;URL-OF-HEADER-IMAGE-1&quot;
HeaderImage[1]=&quot;URL-OF-HEADER-IMAGE-2&quot;
HeaderImage[2]=&quot;URL-OF-HEADER-IMAGE-3&!  ;quot;
HeaderImage[3]=&quot;URL-OF-HEADER-IMAGE-4&quot;
HeaderImage[4]=&quot;URL-OF-HEADER-IMAGE-5&quot;
HeaderImage[4]=&quot;URL-OF-HEADER-IMAGE-6&quot;
HeaderImage[4]=&quot;URL-OF-HEADER-IMAGE-7&quot;
HeaderImage[4]=&quot;URL-OF-HEADER-IMAGE-8&quot;
var random=Math.round(7*Math.random());

document.write(&quot;<style>&quot;);
document.write(&quot;#header-wrapper {&quot;);
document.write(&#39; background:url(&quot;&#39; + HeaderImage[random!  ] + &#39;&quot;) no-repeat left TOP;&#39;);
document.write(&quot; }&quot;);
document.write(&quot;</style>&quot;);

</script>

4.Now save your template and your done.Refresh your site few times to see the result.Your header image will be rotate.


Feed Info:
Name: Blogger Tips And Tricks|Latest Tips For Bloggers
URL: http://feeds.feedburner.com/blogspot/wyna
Add, Modify, Remove feeds at Innerfeed

Free Template Blogger collection template Hot Deals BERITA_wongANteng SEO theproperty-developer

0 comments:

Post a Comment

Subscribe to: Post Comments (Atom)