[Dummies Guide to Google Blogger Beta] Many Headers In One Blog.

[vin]

[http://www.andyrutledge.com/cssslides.html]
Would you like your blog to show ore than one header? Perhaps you want to show off your creativity? Maybe you are bored with having only one header? Here is a solution tried and tested in Firefox browser which can show as many headers as you want simply by hovering the mouse over some buttons..............

I found this trick here and adapted it to suit the new layouts template but it can be applied on Classic Blogger templates also! The solution shows a default header picture which shows as the blog header until the viewer hovers the use cursor over the three buttons below the header when the other three header pictures are shown. Thus using this hack you can show four header pics without having the blog to be reloaded. You can also add as many headers as you like by extending the hack, which is left as an exercise to the reader.

CREATING THE GRAPHICS

The first step requires you to have four graphics ready. If not you can head over to any online logo creator to create some graphics. I went to Cooltext.com and created four Logos. Then I loaded the into Irfanview ( a free image editor) and resized all the graphics to 600 x 150 pixels.

UPLOAD GRAPHICS TO A FREE HOST

The next step is to upload all the graphics to a free host like Googlepages and copy down their URLs. For detailed information on this see How to Upload files.

MODIFYING THE CSS

The next step is to modify the CSS in your blog. For this login to your Dashboard and click on Layouts of the blog you wish to modify. Then click on Edit Html subtab of Template tab at the top. First backup your template by clicking on the Download Full Template link on this page. Scroll down and add this code just after the <title> and </title> tags :

<!-- compliance patch for microsoft browsers -->
<!--[if lt IE 7]>
<script src="http://www.andyrutledge.com/ie7/ie7-standard-p.js" type="text/javascript">
</script>
<![endif]-->

This is a compliance patch for microsoft browsers. Then scroll down and add the following code after the <b:skin><![CDATA[ and before the ]]></b:skin> tags :

/*-------------- Here starts the image switcher styles ------------------*/

#picture {
margin: 5px auto 0;
width: 600px;
height: 150px;
background: url("DEFAULT GRAPHIC HEADER URL") no-repeat top left;
clear: both;
}
#nav {

margin: 0 auto;
margin-left:-10px !important;
width: 660px;
height: 40px;
background: #fff;
clear: both;
}
#nav ul {
list-style: none;
line-height: 40px;
font-weight: bold;
font-size: 12px;
}
#nav li {
float: left;
background: transparent;
}
#nav li a {
width:200px;
line-height: 40px;
display: block;
color: #fff;
text-decoration: none;
text-align: center;
}
#nav ul li a:hover {
color: #fff;
background: #000;
}
#nav li ul {
position: absolute;
background: #fff;
left: -5000px;
top: 50px;
}
#nav li li {
width: 600px;
}

li#blue a {
background: #09f;
}
li#red a {
background: #c00;
}
li#green a {
background: #390;
}
li#blue:hover ul {
left: auto;
margin-left: -40px;
width: 350px;
height: 150px;
}
li#red:hover ul {
margin-left: -240px;
left: auto;

width: 600px;
height: 150px;
}
li#green:hover ul {
margin-left: -440px;
left: auto;
width: 600px;
height: 150px;
}

Choose one of your four graphics as the default graphic which will always show on the header. Copy and paste its URL instead of the "DEFAULT GRAPHIC HEADER URL" in above code. Save Template. See toe screenshot of the blog with the default header below :

MODIFYING THE BODY CODE

In this step we will modify the body code. To do this scroll further down the template till you come to :

<div id='header-wrapper'>
<b:section class='header' id='header'>
<b:widget id='HTML1' locked='true' title='' type='HTML'/>
</b:section>
</div>

Delete the above code. This will delete the original title and description. In that place copy and paste the code below :

<div id='picture'> </div>
<div class='clearfix' id='nav'>
<ul><li id='blue'><a href='#' title='blue'>Second Header</a><ul><li><img alt='Blue' src='SECOND GRAPHIC URL'/></li></ul></li>
<li id='red'><a href='#' title='red'>Third Header</a><ul><li><img alt='Red' src='THIRD GRAPHIC URL'/></li></ul></li>
<li id='green'><a href='#' title='green'>Fourth Header</a><ul><li><img alt='Green' src='FOURTH GRAPHIC URL'/></li></ul></li>
</ul></div>

Copy and paste each graphic URL obtained in step 2 above instead of the CAPS in the above code. Save Template. You can see it in action here. See the pics below :






--
Posted By vin to Dummies Guide to Google Blogger Beta at 4/15/2007 09:17:00 AM