Knowledge is good only if it is shared. As a new blogger, I had learned to change the Web template, and found out the tips, tricks, hacks, and tweaks of altering the Blogger template, customizing CSS, widgets, layout, blog design, inserting JavaScripts, HTML codes, Google AdSense, and other settings the hard way, through many trials and errors. For the purposes of this guide, I had started with the old Blogger “Minima” template. As I made the changes or learned something new, I had documented them. Before changing any template, please remember to save a copy of the current template. After editing the template, preview it, and save it when you are satisfied with the change. Hope this guide will help those who are finding the way around, just like me.

Search Tips for New Bloggers

We have extended our month-long vacation by a couple of days. We shall be posting articles the moment we return. We noticed that Google had updated the Page Ranks. New bloggers who have been waiting anxiously for this can check their blogs' Page Ranks. We have the PR checker link in our SEO Tools - Search Engine Optimization article.

The blog we created recently in Aug 2007, Blogger FAQ and Help, has also got its first Page Rank, a PR4. All our blogs are now ranked:-

Tips for New Bloggers - PR6
Business Fables and Management Lessons - PR4
Famous Motivational and Inspirational Quotes - PR4
Blogger FAQ and Help - PR4

Thanks to everyone for the support!

May 6, 2007

Digg This Story

Random Header and Background Images

A reader CeElle asked how the Header banner and Blogger background picture can be rotated so that they show a different image every time the page is refreshed or reloaded. While we could use the format of a slide show, the timing of rotation would be fixed. We think 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.

Rotating Header Image

Just to be sure, this article is about randomly displaying different Header images upon every refresh of the page. If your intention is to have a fixed background image for your Header, the other articles Background Image for Blogger Header (New) and Background image for Blogger Header will be more relevant. In that article, you will also read about creating images and using free photo editing software like Google's Picasa to resize and crop your pictures.

After creating your images, you will have to upload them onto a server. You can read about using free hosts like Google Page Creator and Google Groups. We also have a rather comprehensive list of free Image Hosts and File Hosting Services in our article on Manage Blogger Image Storage Space. Check out those sites and choose one that is fast, reliable and enables hotlinking to the uploaded files. After uploading the pictures, take note of the Image URLs.

Login to your Dashboard. Go to Template ->Page Elements -> Add a Page Element and choose “HTML/JavaScript”. The javascript to insert is this:-

<script type="text/javascript">
var banner= new Array()
banner[0]="Image01URL"
banner[1]="Image02URL"
banner[2]="Image03URL"
banner[3]="Image04URL"
banner[4]="Image05URL"
banner[5]="Image06URL"
banner[6]="Image07URL"
banner[7]="Image08URL"
banner[8]="Image09URL"
banner[9]="Image10URL"
var random=Math.floor(10*Math.random());
document.write("<style>");
document.write("#header {");
document.write(' background:url("' + banner[random] + '") no-repeat top left;');
document.write(" }");
document.write("</style>");
</script>


Explanatory notes:-

1. The Image01URL to Image10URL are the links to the images that are hosted on the image server. Please insert the full URL beginning with http://

2. This uses a Math object javascript. The random() code will give a random number between 0 and 1. This number is multiplied by 10 and the floor code rounds the number downwards to the nearest integer, giving a value between 0 and 9. At every pageload, the script will display one of the banners from banner[0] to banner[9].

3. The above example assumes you have 10 different images to display. If you have fewer pictures, say 5 pictures, delete banner[5] to banner[9] and amend the number (in red) to 5. If you have more images, you may add banner[10] up to whatever number of images you have, and amend the number (in red) accordingly.

Rotating Background Image

Again, if you have only 1 image for your Blog background, you can insert the image into your template using the guide in this tutorial Background Image for Blogger Template.

If you have more than 1 background image that you want to use, the steps for having the random background images upon each page refresh are about the same as above. Create the images, host them on a free server, and take note of the Image URLs. Next, login to your Dashboard. Go to Template ->Page Elements -> Add a Page Element and choose “HTML/JavaScript”. The javascript to insert is this:-

<script type="text/javascript">
var banner= new Array()
banner[0]="Image01URL"
banner[1]="Image02URL"
banner[2]="Image03URL"
banner[3]="Image04URL"
banner[4]="Image05URL"
banner[5]="Image06URL"
banner[6]="Image07URL"
banner[7]="Image08URL"
banner[8]="Image09URL"
banner[9]="Image10URL"
var random=Math.floor(10*Math.random());
document.write("<style>");
document.write("body {");
document.write(' background:url("' + banner[random] + '") repeat center center;');
document.write(" }");
document.write("</style>");
</script>


Explanatory notes:-

In addition to what we discussed above relating to rotating Header images, the position of the background image is important. Please change the attributes (in purple) to suit your requirements. For instance, if you have a small tile or image that you want to use to form a patterned background, insert the “repeat” attribute given in the above sample. If you have a big picture that covers the entire blog and you want the picture to be fixed, you may change the “repeat” to “no-repeat fixed”. For a more detailed explanation on the attributes, please refer to Background Image for Blogger Template.

© Tips for New Bloggers

Found this article useful? Mention us in your post, subscribe to our feed, link to us, or bookmark this site. Thanks for your support!AddThis Social Bookmark Button

68 comments:

Agram said...

In an earlier post you explained how to add a second sidebar. As you can see www.balkaninbeeld.blogspot.com I managed to add it (thanks!). But, I'd like to give my sidebars a different background colour i.e. different from the middle column. The Blogger template allows me to change only the colour of the sidebar text font, not the background colour of the sidebar. Any advice? balkaninbeeld@gmail.com

bizwhiz said...

Hi Agram

You can go to #sidebar-wrapper or #newsidebar-wrapper and insert under that

background: #xxxxxx

The #xxxxxx is the color code. You may refer to the guide on this site "Hexadecimal HTML Color Codes and Names" for the colors and corresponding codes.

Shadows said...

good day!
i notice there's a limit for entries in one page, and the 'excess' ones are linked through 'older posts'. is there a way where i could remove this limit quota and have all the entries on one page without bein linked as an 'older post'?

bizwhiz said...

Hi shadows

You can set the main page to show whatever number of posts you specify in Settings -> Formatting.

However, if you click a label linked to many posts, Blogger displays the latest 20 posts and the remainder can be assessed through the Older Posts link. At the moment, we are not aware of any way in which we can increase this limit.

Agram said...

Thanks for your reply. However, it did not work for me. My sidebar-wrapper looks like this:
#sidebar-wrapper {
background: #E9AB17
width: 220px;
float: right;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

#newsidebar-wrapper {
background: #E9AB17
width: 180px;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float

But no different background colour at all. I suspect it has smt to do with the "body":
body {
background:$bgcolor;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center

bizwhiz said...

Hi Agram

Please put a semi colon after the color code -

background: #E9AB17;

Please try it and let me know how it goes. Thanks.

Agram said...

You're the best! Problem solved, thanks so much :-)

Stacey said...

I have a great slideshow on rockyou.com. Do you know how to embed it to my blog in place of my header?

bizwhiz said...

Hi Stacey

The site you mentioned has a FAQ/Help section which explains how you can embed their slideshow into Blogger blogs. You may want to refer to their instructions since we do not use their program.

Normally, these 3rd party providers will give you a HTML code to place into your Blog. If you want to put it specifically in your Header, see that you are able to add Page Elements into your Header. Next, choose HTML/JavaScript option and paste the code.

Stacey said...

Thank you so much for replying to my question, but I have done everything that you have said and it puts the slideshow up above my header, I would like it to be in place of my header. Is there anyway to do that?

bizwhiz said...

Hi Stacey

Yours is a No.565 template. The graphics that you see are weaved into the template. Removing the header would mean not seeing the images at the top.

If that is what you want, you may follow the guide on removing Header and change the id='Header1' locked='true' to 'false'. When you are at Template -> Page Elements, you can now remove the Header.

Next, add a HTML Page Element to the Header section and insert the slideshow code. If you do not like the new look, you can reinstate the Header by clicking the Add a Page Element and select the option at the bottom - "Page Header".

Stacey said...

YEA!!!! That did it! THANK YOU SO MUCH!!!!!

Stacey said...

One more question for you (I hope I'm not bugging you!). I've got the slideshow running as my header now, but how would I go about adding a fixed text title over the slideshow?

Chris Brown said...

Hi there!
Having a bit of trouble implementing this.
I'm using the Demim template.
When I use the Blogger functionality for uploading a background image to the header, the format is fine, however, when I use this code in the header the formatting goes wrong, mainly the positioning of the header image. I'll leave the header image as it is (wrong) so you can see. The images are popping up randomly, but they are positioned wrong.
www.chrisology.com
My header images are 850px by 232px.
An example of one is here:
http://s84.photobucket.com/albums/k25/browc13/Chrisology%20Header/?action=view¤t=Glasto1Header.jpg
Hope you can help.
Cheers, Chris

bizwhiz said...

Hi Chris Brown

Your header images are 799x218px. So if you change or add this in your header style, you should see the pics exactly in the center.

#header {
width: 799px;
height:218px;

Chris Brown said...

Thanks so much!!
So simple. I was also confused because I'd uploaded my images in the wrong resolution (didn't change the maximum res in Photobucket).
Thanks to your blog I now have the effect I was after.
Just need some content now!
Cheers, Chris

Wai said...

Hey,
i understand that your above script works for a standard blogger template. however, i am using a self created html code. and my "header" picture is just :

div style="left: 0; top: 0; position: absolute;"
img src="http://img412.imageshack.us/img412/2913/sample.jpg"
and therefore i couldn't get your script to work.

where can i implement this script to make it work?
thanks!

bizwhiz said...

Hi Wai

The way the script works is to insert a background picture in the #header segment of the CSS template. It is akin to putting this style but picking a random image:-

#header {
background-image: url(URL address of your image);

Try changing #header to .header and see if it works in your template.

Mark said...

I want an image in my sidebar to rotate at random. I see the line in the code that calls out the location for the image on the blog as "header" and then for the background image "body" but is there a way to tweak that so every time someone visits my blog, just an image in the sidebar has changed randomly?

Seems like Bizwhiz knows everything else so I thought I'd give it a try.

I'm using Minima Black by the way.

bizwhiz said...

Hi Mark

Yes, you can change the #header{ that appears in the JavaScript to #sidebar-wrapper{

This will give a rotating background image to the sidebar.

Mark said...

EXCELLENT! Worked great. My only follow up question would be (and I apologize since this very basic I'm sure) how can I make a spacers with the text. In other words, lets say my picture is 100 pixels tall, if I have nothing but what is in the code as is, the next element in the sidebar comes up and cuts into the picture. However I noticed, if I typed a bunch of text in, it would stretch the sidebar element longer than 100 pixels so you could see the picture (only now it has text all over it). So what can I put in the code to reserve that space for the picture?

ie: something like "



(bunch of empty space here)



" seems logical but it didn't seem to work

bizwhiz said...

Hi Mark

I lost you there. Can't figure out your question and your only blog is a test blog with no contents, so I am unable to see what you are referring to.

This is a script to call for a random picture. It is the same as inserting that picture in the template, except that it is now a random picture. This script does not alter the layout.

If you have layout probs, you may have to adjust the margin and padding settings within the CSS template. Try inserting one background image into the template (header or sidebar) and view it. Change the settings and save. You can then use this script to place a random image instead.

Mark said...

Bizwhiz,

Sorry about the ambiguity. Hopefully this will clear things up. Here is a link to my test blog:

http://roberstester.blogspot.com/

As you can see, your logo is partially visible. The main objective is to be able to see the whole thing and I've scrubbed over the html 10 times looking for some sort of vertical spacing number but I can't find anything. Any further suggestions?

bizwhiz said...

Hi Mark

I thought this is what it should be, a "background image" in the sidebar. All other elements should be on top of the image and it is correct that certain parts of the background image will be covered by these elements.

Should you want a fixed position for this background image, under our script there are attributes to position the image - eg. top left, center, no-repeat. Use these to move the background image to the required position.

If your intention is to display an image and not a "background image", use an Add Page Element function to upload the image. If you want rotating images, a quick solution would be to use third party Image Hosts where images can be uploaded and a slideshow script is given to you to insert into the blog. This script pulls the photos from their site and displays your images as a slideshow.

Mark said...

YOU'RE AWESOME BIZWHIZ!!! Thanks to your clear explanation I came up with a simple workable solution.

Razor said...

Thank you for this and all the other content here!

One question. Since the banners can be rotated, can the links associated with the banners be rotated as well?

Any incite would be much appreciated.

bizwhiz said...

Hi Razor

To your hypothetical question, technically possible, but not with this code.

N said...

Hi Bizwhiz,

I would like the blog header background image to appear on the main page only, but when individual posts are opened, I would like to have the option of not showing the main header, but putting in a different header, specific to the post itself.

Your random header script comes close to what I want to do, I was just wondering if there is a way to "switch off" the main header and specify another in its stead (all at the individual post level, of course)

Is this possible? I appreciate any advice you can share on this subject...

bizwhiz said...

Hi N

This code is not designed for that purpose.

Enai Q said...

hi im having trouble.. the html random header code did work. but my default header is still showing (page element header). whats wrong?

bizwhiz said...

Hi Enai Q

If you have the random header images, why do you still want a permanent header image? Perhaps remove that header image and allow the script to display a random header image upon every page refresh.

Enai Q said...

problem is that if i remove my header image..it requires me to add a text. so i put " ___" . i added the random header code. and this is how it came up

werd2bigbird.blogspot.com

bizwhiz said...

Hi Enai Q

We don't see the random header code at all. If you want us to look into this, add the javascript code and we can check it.

Enai Q said...

please check again, the problem is now noticeable.

werd2bigbird.blogspot.com

Enai Q said...

as u can see, the full image is not shown, only half of it is shown

bizwhiz said...

Hi Enai Q

You are now saying that the image shows but it only shows half. If this is the problem, go to your template and fix the height for your header image. If your image has a height of 339px, insert it as follows:-

#header-wrapper {
height:339px;
}

Enai Q said...

K, i put the code in. Seems for some reason half the image is still shown but with a blank spot

bizwhiz said...

Hi Enai Q

Can you insert it here instead:-

#header {
height:339px;
}

It should fix the height of the header.

Jimi said...

Hi Jim,

For the life of me I can't get the java script for a rotating header to work. All I get is the top 50px of the image. It does rotate through the selection though on each refresh. I followed all the suggestions in your post. Also I tried to make the rotating header clickable by wrapping an href around the javascript - no dice. Any suggestion? Thank you for your time.

bizwhiz said...

Hi Jimi

You are saying that you can only see the top part of the image? Look at the image size and fix the height of the header. For e.g., if your image has a height of 250px, add this into the template:-

#header{
height:250px;
}

Ian Towey said...

Hi I'm a complete beginner at this, but here goes...

http://iantowey.blogspot.com

I have set up the rotating images as per above, but was wondering if there's a way to have a certain header image for a certain post. I have each post as a section for my portfolio, accessable by a css menu. At the moment the headers are changing when I refresh, but they now seem irrelevant to the post content, depending on which page I'm looking at. What I'm trying to say is that I don't want the images to be random anymore, instead I want them assigned to certain pages. Is this possible?

Cheers.

bizwhiz said...

Hi Ian Towey

Short answer is no. You may want to consider adding the picture into the post instead.

Kate said...

Hi - Thanks so much for posting this, it works great! One question though, where in this code could you add a hyperlink to the header image? I would like the header to be clickable to return viewers to the first page.

bizwhiz said...

Hi Kate

Not in this code. We have talked about having a clickable header image but not a random and clickable header image.

www.moodydemetry.com said...

Great stuff man, very helpful, i used it and works very well. thank you. I also added a link to your site on my website because you are the best. :)
www.moodydemetry.com

Anonymous said...

hello! I would like to ask if it's possible to have a fixed text over the changing images. What I want to do is to have the title of the blog over the images.

THANK YOU

KAY

Seasons said...

hmm interesting :)
Is there a way though to put an image as a background for every post? I mean the same image for all posts?

-Seasons

metrophoto said...

Hi, everything worked but somehow the horizontal navbar that I created (from your tutorial also) is on the image already and not at the bottom :(

Anonymous said...

is it posible to insert photobucket or other slideshow into header?If it is,please wrtite me how,thank you.

Banana said...

mine just isn'r working:
curently i've got

..... color:$titleTextColor;
}


#header-inner { background:url("http://img174.imageshack.us/img174/6812/sydneysoundertitleanimrg8.gif") no-repeat 50% 0; margin-top: 1px; padding-top: 120px; }

#header h1 {
margin:0; ....... etc etc





and when i add the following script into a sidebar element nothing changes. (help pleease):
[i had to remove all the '<' so i could post it - so don't consider taht as the fault]

script type="text/javascript">
var banner= new Array()
banner[0]="http://img185.imageshack.us/img185/613/sydneysoundertitle3doodxs4.gif"
banner[1]="http://img262.imageshack.us/img262/2557/sydneysoundertitle1doodkl2.gif"
banner[2]="http://img254.imageshack.us/img254/5646/sydneysoundertitle2doodgs8.gif"
banner[3]="http://img258.imageshack.us/img258/4237/sydneysoundertitle1vy9.gif"
banner[4]="http://img261.imageshack.us/img261/815/sydneysoundertitle2bf6.gif"
banner[5]="http://img258.imageshack.us/img258/179/sydneysoundertitle3sk6.gif"
banner[6]="http://img258.imageshack.us/img258/4237/sydneysoundertitle1vy9.gif"
banner[7]="http://img261.imageshack.us/img261/815/sydneysoundertitle2bf6.gif"
banner[8]="http://img258.imageshack.us/img258/179/sydneysoundertitle3sk6.gif"
banner[9]="http://img258.imageshack.us/img258/4237/sydneysoundertitle1vy9.gif"
banner[10]="http://img261.imageshack.us/img261/815/sydneysoundertitle2bf6.gif"
banner[11]="http://img258.imageshack.us/img258/179/sydneysoundertitle3sk6.gif"
var random=Math.floor(12*Math.random());
document.write("style>");
document.write("#header-inner {");
document.write(" background:url("' + banner[random] + '") no-repeat 50% 0; margin-top: 1px; padding-top: 120px;")
document.write(" }");
document.write("/style>");
/script>

AspiringTheologian said...

Greetings! I have a question.

I want to somehow create a link under my header so that readers of my blog can switch to a different header image without refreshing or reloading the page. Is this possible? How can I do this?

The Coaster Critic said...

Thanks for this code. It took me forever to find some code that did the trick for my site, but yours did.

One question though. Is there anyway to make the pictures not repeat until all pictures are used?

Thanks Again!

QUEBEQUIN said...

Hi there... I have tried all but it doesn't work... I just read all the comments and I didn't found my problem so I wanted to ask you... I added the code and I delete the header image but I don't know why I can't see the random images :( please help!

(it's my son blog... in spanish)

Daniel

Boffill said...

i just wanna ask something.. i tried your rotating banner and it doesn't appear on my site... http://www.bellacaoyonan.tk

please have a look.. thanks!

Boffill said...

your header script is working fine on me now, but still the original header still appears, is there anyway i can remove that or disable that? so that the only visible is the images from your header script...

ALEX said...

man, seriously, YOU RULE...

The Bum said...

I think your blog is great and I expect I will be spending a lot of time here. I've been scratching my head for a couple of weeks trying to get this effect to no avail, so was thrilled to find this article. I thought I followed the instructions correctly but something is not right. Any ideas? http://thesouthbeachbum.blogspot.com/

orbital said...

Hi bizwhiz,

I tried to implement your "Rotating Header Image" code into my blog and in principle it worked fine.
Two problems occured anyway:

1) My transparent header "foreground image" did not show up.

2) The positioning of the header elements (incl. text etc.) "dissolved" a bit [with Firefox different than with IE...].

I would be (very) grateful if you could shed some light on these matters - for your convenience (resp. just in case) you can find my complete blog code here and your (already for my needs matched) header code here.

As you can see I changed the Tic Tac template here & there (more or less by trial & error) but concering the rotating header image I did not succeed so far.

If you prefer you can also contact me by the mail address given below in my blog - in any way I thank you very much for every information/support/help you can provide.

E.K. said...

Hello bizwhiz!

Thank you so much for all the advice you give out for us noobs, much appreciated!

I have a question if you don't mind.

I have a modified Blogger template with "unusual" code lines. I tried to put the random header code in the new element box, but it wouldn't work. I then thought that something was sort of blocking the newest code lines. I searched the whole script for what might be the cause, and I stumbled on this :

#header
{
float: left;
width: 768px;
padding-bottom: 8px;
background: #000000;
clear: right;
background-repeat: no-repeat;
padding-left: 0px;
height: 71px;
}

#navigation
{
clear: both;
float: left;
width: 100%;
background-image: url();
background-color: #000000;
height: 158px;
}

Plus, I don't knowing whether it's better to add the code in a new element box or in the real HTML script...

I hope it makes sense to you :/

Thank you in advance!

(My blog http://ekeyshideaway.blogspot.com/)

Panther said...

Hi this is a great post but I have this huge problem with my current template. I am using a custom template from Blogcrowds, a 3-column Minima Black, and the problem I have is this.

Whenever I tried to first of all put a permanent image in front of the text/title (ie. replace image with the new feature Blogger put up for the header), the image refuses to show. It works fine if shown in the background.

Then after I use this JS array, it works fine but the problem is the images always appear behind the title. There is no text description at my current blog, but I did get the same problem of having the image cut off by the title.

My current title is a little long, but before this it was just "The Deathseeker" and still would not work; whatever I did the image refuses to replace the text.

So I am asking if a) there is a solution using this JS array to still replace the images randomly rotating but in front of the text/title by also tweaking the height:??px thingie in the process, or
b) making the current header image widget, which is a HTML/java widget on top of the actual header, use a different JS array?

Sorry if I seem a little long-winded, but whichever way is easier I would take it, I really tried every thing out there and it just is not working. Thanks.

http://pantherrh.blogspot.com/

Heather said...

Hi, I was able to set up the rotating header images but now they only show up one size, a portion of the actual size. Help, how do I fix this problem?

Thanks in advance,
Heather

dHoNuT said...

HI..I was successful adding page element on my header but after inserting my 10 banner URLs and save it I can't see it in my blog when I click view blog.
Maybe I'm doing it wrong or what? All I want is some rotating banners with link under or above my header for readers to click. I have another blog in http://dhonut.oggix.org, can I use this method also? Because I can't find where to edit my template. Thanks in advance.

PHSChemGuy said...

Thanks so much for providing this service. The javascript works great, and I've got the rotating images as my header backgrounds.

I'm now trying to get rid of the blog title, blog description, and horizontal line that formerly occupied the header space.

I tried shrinking the descriptionfont and blogtitlefont both to 0%, and that cleared up most of the problem but there's still a horizontal line in front of my header images (which your javascript is calling correctly.)

My blog with the issue is idtmi.blogspot.com.

Thanks for any help you can offer.

(And I know I need to tidy up a couple of the images which are showing with a thin white line at the top of them, but that's an image editing issue, not a coding one. It's the thin, grey line that's in the top center of the image that's my problem.)

PHSChemGuy said...

Thanks for posting this code. I've gone ahead and added to my blogger and am thrilled with the way it works as well as the support that you've offered through the comments section.

I am struggling, however, with how to get entirely rid of the text that used to be my header. I've set the font size value for descriptionfont andpagetitlefont to 0%, and that almost worked. I still have an odd small grey line and some dots (remnants of the text, I think) that I haven't been able to make entirely disappear.

If you can offer any suggestions/advice, I would be much appreciative.

My blog is IDTMI.

Thanks...

Jennifer said...

This totally worked! thanks so much. just wondering though, how do I get the name of my blog to not show right in the middle of my new header banner?

JY / kosherjellyfish said...

Dear BizWhiz,

Thanks very much for your wonderful Randomize Header Images script.

The problem I have is: my header images all have the equal width, but they are of different height. Do you know how I can expand the height of the header according to the randomized images? Thanks!

Admin said...

need help :S

my sidebar is not being displayed correctly displayed in ie 6 but it is displayed in ff 3.0.4 and i dont know why

some time ago it was displayed correctly but know it doesn't can any one help me please....................:(

my blog is cs-pros.blogspot.com

Nitin Nayyar said...

Hey,

Its not working for me.