Make random header….

by Nandupatel on January 2, 2009

Go to this website to see demo. I have very small images so you can see only in half part. http://header-examples.blogspot.com/

For Classic Template

1. Log in into blogger with your id
2. Click Template
3. Click Edit HTML
4. Copy and pate the following code under
<div id=’header’>

<script type=”text/javascript”>
var banner= new Array()
banner[0]=”http://img68.imageshack.us/img68/6058/waterfall012lr7.jpg”
banner[1]=”http://img68.imageshack.us/img68/7332/waterfall008lt8.jpg”
banner[2]=”http://img114.imageshack.us/img114/3028/dsc04557ip8.jpg”
banner[3]=”http://img114.imageshack.us/img114/7585/americankl4.jpg”
banner[4]=”http://img381.imageshack.us/img381/1235/ballsontileek1.jpg”
var random=Math.floor(10*Math.random());
document.write(“<style>”);
document.write(“#header {“);
document.write(‘ background:url(“‘ + banner + ‘”) 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. Then, 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://img68.imageshack.us/img68/6058/waterfall012lr7.jpg”
banner[1]=”http://img68.imageshack.us/img68/7332/waterfall008lt8.jpg”
banner[2]=”http://img114.imageshack.us/img114/3028/dsc04557ip8.jpg”
banner[3]=”http://img114.imageshack.us/img114/7585/americankl4.jpg”
banner[4]=”http://img381.imageshack.us/img381/1235/ballsontileek1.jpg”
var random=Math.floor(10*Math.random());
document.write(“<style>”);
document.write(“#header {“);
document.write(‘ background:url(“‘ + banner + ‘”) no-repeat top left;’);
document.write(” }”);
document.write(“</style>”);
</script>

7. Click SAVE CHANGES
That’s it…

You can change width according to your choice.

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

Good Luck…..!

{ 2 comments… read them below or add one }

Keiichi Niwa October 2, 2009 at 5:53 am

Thanks!
I've been searching this for long!

Reply

admin October 2, 2009 at 11:10 am

You are welcome..

Reply

Leave a Comment

Previous post:

Next post: