If you have ever thought that how can you divide your blog's header into two parts.Then you are at the right place because today in this tutorial I will blog about you how you can divide your blog's header into two parts.

A blog template by default has only one header and therefore you can't add anything that could get more attention by being placed in the header which is basically the first thing a visitors see's in your blog.

But using the code I have given below you will be able to divide your blog's header in no time.

What's There in Dividing the Blog's Header ?? 

Well basically the header is used to show your blog's logo.But with the help of some codes,

you can place adsense ads, any kind of banners, follow us widgets or anything that you think should get the attention of your visitors.

The second header is placed at the right of your header.I have created a pic on the two header blog's layout. have a look at it.

And that is just what we'l be trying to achieve with this tutorial.

So without wasting any of your time let me take you to the turorial.

How to Divide Blogs's Header in Two Parts :

1.Go to Blogger Dashboard and choose your blog.

2.Navigate to the template section of your blog (I recommend to backup your template incase anything goes wrong ).

3.Click Edit Template and press CTRL + F to get the search bar and search for this code (make sure expand widget box is unchecked)

   <b:section class='header'

The code found in your template may be not match to the one exactly I have given below but don't worry.See the tag highlighted with pink ??? Yup, keep an eye on that tag in your template and I will tell you what to do in the next step.

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

<b:widget id='Header1' locked='true' title='Eliteblogpress (Header)' type='Header'/>


4.Now just after or below this tag paste the following code

<b:section id='header-right' showaddelement='yes'/>
<div style='clear: both;'/>

5.The final code will look something like the one given below.

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Blogger Sentral Widget Showcase (Header)' type='Header'/>
<b:section id='header-right' showaddelement='yes'/>
<div style='clear: both;'/>

You have successfully divided your blog's Header into two parts but wait that's not it.We still have to adjust the width and display of this header through Css.

So let's get moving....

Styling the the 2nd Header :

1.In your template search for this code

2.Just above that tag paste the following code

#header, body#layout #header {width:50%;display:inline-block;float:left;}
#header-right, body#layout #header-right {width:35%;display:inline-block;float:right;padding:15px;}
#header-right .widget {margin:0;}
                                                                                                                                                                                                                                                           Code Credits:- BloggerSentral

Just hit the Save Icon and you'r done.

Customizations :

If your blog's second header is appearing under your blog's logo then try changing the values of Header and Header-Right in pink to get things working.With a slight change of values the second header will place right where you want it to be.

The New Blog Layout :

After adding the codes go navigate to the layout section of your blog it will look quite similar to the image given below.

Add the widget or banner that you wanted to add in the second header.And that it you'r all done.

Hey, and don't forget to leave your experience down in the comment box.Enjoy :)
Was the content worth a share?


  1. I was hoping this would work for what I'm trying to do, but no such luck. What I really want is for my header to only span the width of my posting section and for my sidebar to move up, even with the header at the top. I couldn't find a tutorial anywhere, so I thought dividing my header might be the answer. The problem is, both headers have to be the same height. The image in my "header 2" is twice the height of my banner in "header 1" which creates a 2 inch blank space between my header and the posting section. Any ideas on how to work around that? Or how to decrease the width of the header and move the sidebar up?

  2. Hello Krstin,

    Ok, so Header2 occupies much height than header1, which results in unbalanced posting section and sidebar, Right?

    Now, there are two solutions I've got for you.
    1: As the header 2 occupies more height, try to figure out that is there any blank space on the top of header2? If yes, then you can use css position property to move the header2 up which will automatically cause the the sidebar to move up too. And will level the posting area and sidebar.
    Use this code on header2 "position:relative;bottom:50px;" (try changing the values for perfect results).

    2:If there is no space left on the top of the header2 then the only solution possible is, that you need to increase the height of the header1. Search for this code "#header" watch out for the width property increase it to get the posting section down (which will balance the sidebar and posting section).

    Try if any of these work! but if they don't make sure to leave a follow up comment with a link to your blog so that I can see what really is the matter.

  3. Thanks, it worked~! My only issue is that if I add an ad(advertisement) above, it pushes my original header down but not the second new header so then they overlap on each other.. but I just removed the top ad.banner. I didn't care too much for it anyway. Thanks again.

  4. Tank you very much.... Great tips!!!

  5. excellent admin.... after a lot of searching, i remained successful when I applied the same method mentioned in this post. Thanks .. have a look on my blog now. (oneaiou.blogspot.com)

  6. I am building a blog and this trick worked for me. Many thanks Hamza :)



Follow via: