Make Random Header Banner on Blogger Blog

Have you ever visited a website or a blog? And when you refresh or reload it, the banners of header change in turn or randomly. If you have never visited it so far, you can visit http://jaya-example.blogspot.com. Try to refresh the pages a few times or click the links available in that blog so that the pages can be reloaded. Look at the banners or images in the header; they can appear in turn randomly, right. This random header banners can give new situation in our blog or website. Would you like to know how it happens? Just read the rest of this posting, ok!

There are some steps you have to do to make random banner, they are;

1. First Step

The first step is that you must have some banners; three, four or five banners depend on your will. To make the banners, you can use some program, for example adobe Photoshop, CorelDraw and others. I am sorry because I am not the expert of making banner, so I won't explain here. Just find them in some banner provider or seller in the internet.

1. Second Step

In the second step, you have to upload the banners in hosting you usually save the images, for example www.photobucket.com.
After the uploading is finished, copy the URL Address of the banners and paste them in notepad or another text editor. These URL address will be inserted into the script that I will give

1. Third Step

In the third step, you have to insert into the template code you have. The script is


If you see the script above, I give 10 banners but 10 is not absolute, you can add as many banners as you want. But remember to you add the code in var random=Mat.
Because blogger template has two kinds of template, classic template and new template, placement of the code/script is different and I will divide the explanations into two parts. But before explaining the steps, I would like to give the sample code that contains I have uploaded and have the URL address. The URL addresses are:
http://i162.photobucket.com/albums/t253/rohman24/banner_1.gif
http://i162.photobucket.com/albums/t253/rohman24/banner_2.gif
http://i162.photobucket.com/albums/t253/rohman24/banner_3.gif
http://i162.photobucket.com/albums/t253/rohman24/banner_4.gif
http://i162.photobucket.com/albums/t253/rohman24/banner5.gif
http://i162.photobucket.com/albums/t253/rohman24/banner_6.gif
http://i162.photobucket.com/albums/t253/rohman24/banner_7.gif
http://i162.photobucket.com/albums/t253/rohman24/banner_8.gif
http://i162.photobucket.com/albums/t253/rohman24/banner_9.gif
http://i162.photobucket.com/albums/t253/rohman24/banner_10.gif

And the banner sample is as follows (the image has been minimized]
























The script sample of the banners is:





And below are the steps to make random banners;
For Classic Template

1. Log in into blogger with your id
2. Click Template
3. Click Edit HTML
4. Copy the whole HTML code and paste into notepad and save. It is aimed to anticipate if you make mistake in editing your template and you still have the back up.
5. Copy and pate the following code under
   
   
   
   
   
   
6. Save the full template
7. Finished

For New Template

1. Log in into blogger with your id
2. Click Layouts
3. Click Page Elements tab
4. Click Add a Gadget
5. Click HTML/JavaScript
6. Copy pastes the following code into it.
   
   
   
   
   
7. Click SAVE CHANGES
8. Finished

Remember, the codes above are only sample, please change the URL address of the banners with your own URL address of the banners.
There might be some templates and the header banners are not suitable with your interest or will. Actually, you can change the size of the header. For example, I use minima template;

@media all {
#header {
width:660px;
margin:0 auto 10px;
border:1px solid #ccc;
}
The code above show that the width of the banner header id 660 pixel,s we can change that value with our interest value. And the height of the banner header is not defined. Now, in order to make our banner match with our own, we must insert the additional code as a definition.
For example; the height you want is 150px, then the additional code is height:150px; so the code above will look like below;



@media all {
#header {
width:660px;
height:150px;
margin:0 auto 10px;
border:1px solid #ccc;
}



Each template is different but blogger template usually write #header in its HTML code in the template.
Good Luck!!!