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 :

  • Candlelight - Be Careful

    Candlelight Careful

    I have nothing against candlelight. I find it very pleasant, especially in a restaurant, with a hearty Italian meal, a red checked table cloth, a brilliant... Read more

    The 20 July 2017 by   Ashleylister
    BOOKS, CREATIVITY, CULTURE, SELF EXPRESSION
  • The Met Al Fresco: Summer Live in HD Festival

    Fresco: Summer Live Festival

    A look ahead at next month's Peter Gelb film festival in Lincoln Center Plaza. by Paul J. Pelkonen Eric Owens in L'Amour de Loin.Photo by Ken Howard © 2016 the... Read more

    The 20 July 2017 by   Superconductor
    CULTURE, THEATRE & OPERA
  • R&A Goes Global for the British Open

    R&amp;A Goes Global British Open

    In a press release issued prior to The British Open, it was stated that the prize money was to be awarded in U.S. dollars. “We are operating in an increasingly... Read more

    The 20 July 2017 by   Golfforbeginners
    GOLF, SPORTS
  • Some Thoughts About the Game.

    Some Thoughts About Game.

    “I believe in the Church of Baseball. I’ve tried all the major religions and most of the minor ones. I’ve worshipped Buddha, Allah, Brahma, Vishnu, Siva,... Read more

    The 20 July 2017 by   Gary
    BASEBALL, SPORTS
  • Eclectic Sophisticated Bathroom

    Eclectic Sophisticated Bathroom

    Not your average bathroom, with the freestanding stone bathtub, the minimalistic cylindrical sinks on the sleek wooden shelf and the unrefined wide wooden plank... Read more

    The 20 July 2017 by   Myparadissi
    HOME, INTERIOR DESIGN
  • Hello, Dolly! (Broadway) Review

    Hello, Dolly! (Broadway) Review

    CastBette Midler – Dolly Gallagher Levi David Hyde Pierce – Horace Vandergelder Will Burton – Ambrose Kemper Melanie Moore – Ermengarde Gavin Creel – Cornelius... Read more

    The 20 July 2017 by   Caz
    ENTERTAINMENT, MOVIES
  • The Proud Mary Movie Trailer is Here Starring Taraji p. Henson

    Proud Mary Movie Trailer Here Starring Taraji Henson

    ChristianNews Sony Pictures has released the official trailer for the Proud Mary movie starring Taraji P. Henson. With Tina Turner’s “Proud Mary” playing in... Read more

    The 20 July 2017 by   Firstladyb
    SPIRITUALITY
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