How to Divide Blog's Header in to Two Parts

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

</b:section>

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>

<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

    
              ]]></b:skin>

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?

• Facebook
• Twitter
• Google+
• Pinterest
• StumbleUpon
• Dig
• LinkedIn

Posted by Hamza Posted on 01:46 9 Opinions

Categories: Blog-Designing, How To - Blogging