Many Headers In One Blog. ~ The Blog Doctor.

Many Headers In One Blog.

New Visitor? Like what you read? Then please subscribe to my Blog Feed or sign up for Free Email Updates. Thanks for Visiting!

Would you like your blog to show more 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 mouse 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.


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 and created four Logos. Then I loaded them into Irfanview ( a free image editor) and resized each of the graphics to 600 x 150 pixels.


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.


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="" type="text/javascript">

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 {
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 the screenshot of the blog with the default header below :


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'/>

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>

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 :

Have Fun!


Anonymous said...

I had no idea that this was possible in blogger, I'll have to try it out. I really love the blogging 10 commandments, I have been guilty of coveting my neighbor's template

Anonymous said...

I can't find an example of this header problem here goes:

I have a header that is as big as my screen (1000x600 aprx). It is an image map. It works fine and I like it.

When you click on some of the images, they anchor link to the blogposts below the giant header. It's cool and works great for my purposes.

HERE'S MY PROBLEM: Archives and the "newer/older posts" links that appear at the very bottom of the blog.

If you click on an archived article or the newer/older you, of course, get the article or page WITH THE GIANT HEADER...thus the reader thinks there's no post because he can see it unless he scrolls down.

MY QUESTION: Can I somehow hack the widget or something in order for all of my individually selected posts to appear WITHOUT any header (or perhaps an alternative header)?

letters at yanquimike dot com dot AR

vin said...

If you are using the new layout you can wrap your header in conditional tags so that it does not appear on post pages. See use of conditionals here :

Post A Book In New Blogger

அப்துல் கையூம் said...

A gifted site for amateur bloggers. Manythings to learn.

Ginger said...

I'd love to figure out how to have different headers for each page or label in Blogger. This is the closest I've seen, but I'll have to keep researching.


Skip to top of post.

Search Blog Before Commenting


Post a Comment

Please use the above search box to search this blog before posting your valuable comments.

Comments posted on Dummies Guide to Google Blogger (Beta) are moderated and will be approved only if they are on-topic and not abusive. Try not to include website URLs/links in your comments. You can email me : drbhatns at gmail dot com for any blogging question. Thanks,


The Blog Doctor The Blog Doctor2 Blog Doctor Home


Tips On Blogger and Latest News.

Skip to top of post.