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
44 comments:
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
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.
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'?
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.
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
Hi Agram
Please put a semi colon after the color code -
background: #E9AB17;
Please try it and let me know how it goes. Thanks.
You're the best! Problem solved, thanks so much :-)
I have a great slideshow on rockyou.com. Do you know how to embed it to my blog in place of my header?
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.
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?
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".
YEA!!!! That did it! THANK YOU SO MUCH!!!!!
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?
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
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;
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
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!
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.
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.
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.
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
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.
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?
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.
YOU'RE AWESOME BIZWHIZ!!! Thanks to your clear explanation I came up with a simple workable solution.
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.
Hi Razor
To your hypothetical question, technically possible, but not with this code.
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...
Hi N
This code is not designed for that purpose.
hi im having trouble.. the html random header code did work. but my default header is still showing (page element header). whats wrong?
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.
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
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.
please check again, the problem is now noticeable.
werd2bigbird.blogspot.com
as u can see, the full image is not shown, only half of it is shown
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;
}
K, i put the code in. Seems for some reason half the image is still shown but with a blank spot
Hi Enai Q
Can you insert it here instead:-
#header {
height:339px;
}
It should fix the height of the header.
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.
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;
}
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.
Hi Ian Towey
Short answer is no. You may want to consider adding the picture into the post instead.
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.
Hi Kate
Not in this code. We have talked about having a clickable header image but not a random and clickable header image.
I have something to say ...