Make Random Banners for Blogspot

Thank you for visiting Design24h.com. Do you have comments or questions comment about this article comments.You can also read the article on the blog via the tools to read news Feed Link with this or to subscribe to new posts via email. In addition, you can address this blog to Favorites (Internet Explorer) or Bookmarks (Mozilla Firefox) for easy tracking. If you're working at Google Blogger blog you can also save this blog in the track records, which are the sources that bring visitors your blog. I hope you find interesting tips from this page.

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

 

<script type="text/javascript">
var banner= new Array()
banner[0]="bannerURL0"
banner[1]="bannerURL1"
banner[2]="bannerURL2"
banner[3]="bannerURL3"
banner[4]="bannerURL4"
banner[5]="bannerURL5"
banner[6]="bannerURL6"
banner[7]="bannerURL7"
banner[8]="bannerURL8"
banner[9]="bannerURL9"
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>


 

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:

<script type="text/javascript">
var banner= new Array()
banner[0]="http://i162.photobucket.com/albums/t253/rohman24/banner_1.gif"
banner[1]="http://i162.photobucket.com/albums/t253/rohman24/banner_2.gif"
banner[2]="http://i162.photobucket.com/albums/t253/rohman24/banner_3.gif"
banner[3]="http://i162.photobucket.com/albums/t253/rohman24/banner_4.gif"
banner[4]="http://i162.photobucket.com/albums/t253/rohman24/banner_5.gif"
banner[5]="http://i162.photobucket.com/albums/t253/rohman24/banner_6.gif"
banner[6]="http://i162.photobucket.com/albums/t253/rohman24/banner_7.gif"
banner[7]="http://i162.photobucket.com/albums/t253/rohman24/banner_8.gif"
banner[8]="http://i162.photobucket.com/albums/t253/rohman24/banner_9.gif"
banner[9]="http://i162.photobucket.com/albums/t253/rohman24/banner_10.gif"
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>

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 <div id='header'>


<script type="text/javascript">
var banner= new Array()
banner[0]="http://i162.photobucket.com/albums/t253/rohman24/banner_1.gif"
banner[1]="http://i162.photobucket.com/albums/t253/rohman24/banner_2.gif"
banner[2]="http://i162.photobucket.com/albums/t253/rohman24/banner_3.gif"
banner[3]="http://i162.photobucket.com/albums/t253/rohman24/banner_4.gif"
banner[4]="http://i162.photobucket.com/albums/t253/rohman24/banner_5.gif"
banner[5]="http://i162.photobucket.com/albums/t253/rohman24/banner_6.gif"
banner[6]="http://i162.photobucket.com/albums/t253/rohman24/banner_7.gif"
banner[7]="http://i162.photobucket.com/albums/t253/rohman24/banner_8.gif"
banner[8]="http://i162.photobucket.com/albums/t253/rohman24/banner_9.gif"
banner[9]="http://i162.photobucket.com/albums/t253/rohman24/banner_10.gif"
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>

   
   
   
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.
   
   
   <script type="text/javascript">
var banner= new Array()
banner[0]="http://i162.photobucket.com/albums/t253/rohman24/banner_1.gif"
banner[1]="http://i162.photobucket.com/albums/t253/rohman24/banner_2.gif"
banner[2]="http://i162.photobucket.com/albums/t253/rohman24/banner_3.gif"
banner[3]="http://i162.photobucket.com/albums/t253/rohman24/banner_4.gif"
banner[4]="http://i162.photobucket.com/albums/t253/rohman24/banner_5.gif"
banner[5]="http://i162.photobucket.com/albums/t253/rohman24/banner_6.gif"
banner[6]="http://i162.photobucket.com/albums/t253/rohman24/banner_7.gif"
banner[7]="http://i162.photobucket.com/albums/t253/rohman24/banner_8.gif"
banner[8]="http://i162.photobucket.com/albums/t253/rohman24/banner_9.gif"
banner[9]="http://i162.photobucket.com/albums/t253/rohman24/banner_10.gif"
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>

   
   
   
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!!!

You may be interested in the following freebies as well:

Search In Blog:

Thank you for reading the article. Do you have suggestions or how better to go back a few words to share with everyone. Please note you, these comments have no comment of building or helping each other progress will be deleted without notice. In addition, you will not necessarily be a member of the Google Blogger or other networks listed below are new comment, use Anonymous (anonymous) if you do not want to leave personal information of themselves.Wishing to house your have been many visitors. The contents of typing in Chinese are clearly marked will easily account for more than all of sympathy. (Design24h.com).