Dividing Your Blogger Blog Header into Two Parts

If you are using blogger blog and have been following my tutorial, you are going to love this. This tutorial I am about to show you is just too awesome. If you are using a template that has no space for more than one gadget in the header then this is for you.

Some blogger templates the logo takes up all the space on the header but in this tutorial we are going to divide it in two ways; one for your header and the other for your adsense or search box. To get the best performance on your ad code, it is best placing it in your header.

HOW TO DIVIDE YOUR BLOGS HEADER TO TWO PARTS

Must Read: ADDING A STYLISH REPLY BUTTON FOR BLOGGER BLOG

Making tutorial simple, that’s what I do and today we are going to see how to customize our blogger blog header to have two (2) space(s) for gadgets. So are you ready? If you are ready, let’s proceed with the tutorial…

Ok first, it is best to backup your template incase you make a mistake, so you can always revert to your previous one.

Let’s assume that you have already done a backup of your templates. Now here is how you’re going to do the splitting of the header

Go to your blogger blog dashboard >>> Click Template >>> Click Edit HTML. Now you’re in your template code area.

Locate the below code

#header-wrapper { 

Have you seen it? This is the full code…

#header-wrapper {

width:660px;

margin:0 auto 10px

border:1px solid $bordercolor;

} 

Have you seen the similar code? If yes! Now replace the above with the below code

#header  {

float:left;

width:300px;

margin: 5px;

border: 1px solid $bordercolor;

text-align: center;

color:$pagetitlecolor;

}

#header2 {

float:right;

width:300px;

} 

We have successfully completed the first half of the show; now let’s move to the second half of the show, shall we!

Now let’s add our last code and we a done with this tutorial. Locate the below code

<div id=’header-wrapper’>

Have you seen the above code? Now paste the below code right below the above code

<div id=’header-wrapper’>

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

<b:widget id=’Header1’ locked=’true’ title=’my blog title (Header)’ type=’Header’/></b:section>

<b:section class=’header’ id=’header2’ maxwidgets=’1’ showaddelement=’yes’/>

<br style=’clear:both;’/>

</div> <!-- end header-wrapper -->

Yes! We have successfully completed our process. To check if it visible, go to Layout and you’ll see it there…

If your blog already has a two column header before, this will not work but if you’re trying to put adsense code or whatever code you want above your header then follow the below tutorial…

HOW TO ADD EXTRA WIDGET TO YOUR HEADER

Go to Template >>> Click Edit HTML. Now locate the below code.

<b:section class=’header’1

Have you seen it?

In the header class section, Change

1showaddelement=’no’> to showaddelement=’yes’>

Have you successfully done that, now save your template and you have successfully completed the whole process. Save and go check your layout to see it.

Now tell me how simple is the whole process? Please do drop your comments and thoughts using the comment box below. Remember that your comments and thoughts are very precious and important to us.

Do you like the post? Then do click the like button, share us and recommend us with friends because you’ll never know who amongst your friends might truly be in need of it too.

Don't Miss Any Post Again. Subscribe To Our Feed And Be Updated

Enter your email address below:

Powered by OnenaijaBlog