Tech Magazine

Dividing Your Blogger Blog Header into Two Parts

Posted on the 31 January 2013 by Babanature @proudlyonenaija

sharing-blogger-blog-header

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


You Might Also Like :

Back to Featured Articles on Logo Paperblog

These articles might interest you :

  • How To Style Your Shorts in 10 Unique Ways

    Style Your Shorts Unique Ways

    Summers are here and they are in full swing, all we want to do is chill by the beach side. While all of us can’t hit the beach, yet we can definitely bring beac... Read more

    10 hours, 57 minutes ago by   Dreamtechie
    LIFESTYLE
  • Monday Miscellany: Shoes, Shows And Friends

    Monday Miscellany: Shoes, Shows Friends

    The last several weeks have been such a whirlwind of activity, so this weekend I’ve been giving myself the gift of some “down time.” Playing a bit of catch-up... Read more

    11 hours, 1 minute ago by   Unefemme
    LIFESTYLE
  • Nine Steps to Using a Paddling Pool

    Nine Steps Using Paddling Pool

    Sometimes, you just gotta cool down. These last few days it's been really quite warm, so we've had the paddling pool out for my son to play in. Read more

    11 hours, 11 minutes ago by   Ravenswingthog
    DIARIES, SELF EXPRESSION
  • Catrice Long-lasting Waterproof Eye Pencil Review

    Catrice Long-lasting Waterproof Pencil Review

    Hey everyone, what’s up? An eye-pencil is a must have in your vanity. That’s why I love trying out new brands every now and then. Today, I’m going to review... Read more

    11 hours, 38 minutes ago by   Jhilmil D Saha
    HAIR & BEAUTY
  • The Edge

    Edge

    While vacationing at an Alaskan lodge during a photo shoot, a pragmatic, solitary billionaire (Anthony Hopkins)--with a steel trap mind when it comes to... Read more

    11 hours, 39 minutes ago by   Kaiser31083
    ENTERTAINMENT, MOVIES
  • Mike Philbin - Art - Twin Towers 1, 2 and 7

    Mike Philbin Twin Towers

    This most-recent tryptich has a title of "Twin Towers 1, 2 and 7", an obvious and unsubtle allusion to a) the twin towers or pillars of freemasonic egyptologica... Read more

    11 hours, 43 minutes ago by   Freeplanet
    DEBATE, SOCIETY
  • Find a Travel Buddy with Ease and Make Solo Traveling Even Better

    Find Travel Buddy with Ease Make Solo Traveling Even Better

    Traveling solo as a woman has so many advantages. You can go where you wish, keep to your own schedule and spend some times really getting to know yourself. Read more

    12 hours, 15 minutes ago by   Poundtravel
    TRAVEL
By Oneil Salmon
posted on 24 October at 01:08

This is a very helpful tip for blogger. Thanks for sharing it. http://www.shoutitall.com/2013/10/how-to-divide-or-split-blogger-header.html

Magazine