CODEWITHSUNDEEP
headerblogger
Kareen Lagasca
Kareen Lagasca

Reputation: 939

How to Split Blogger header into 2 columns?

i would like to ask how can i split my blogger header into two columns? Can you help me please? I'm having a hard time figuring out...

btw, i just need to add my logo at the left then google adsense on the right.

Thanks!

Upvotes: 2

Views: 3609

Answers (2)

Nik
Nik

Reputation: 147

Login to Blogger.com Click on the "Template" section. Click on "Jump to Widget" Click on "Header1"

Under the code it jumps to, ie:

    <b:section class='header' id='header' maxwidgets='2' showaddelement='no'>
    <b:widget id='Header1' locked='true' title='Your Bog Tittle (Header)' type='Header'>
    </b:widget>
    </b:section>

Insert this code: 

    <b:section class='header' id='header2' maxwidgets='2' showaddelement='yes'>
    </b:section>
    <div style='clear:both;'/>

Now search for and find: "/b:skin"

ABOVE "/b:skin" insert this code: 

     #header {
     float:left;
     width:50%;
     }

     #header2 {
     float:right; 
     width:30%; 
     }

You can adjust the percentages based on what you desire.

On the layout page, after you save the template AND REFRESH, you should see an "Add a Gadget" area to the right of your logo, where you can insert your adsense widget.

If things don't look right on the Layout page, place these codes below the other ones:

    #layout #header, #layout #header2 {
    padding: 0px !important;
    margin: 0px !important;
    width: 50% !important;
    }

Remember to save your template and also remember to click REFRESH after you save your template.

Upvotes: 1

Ben Daggers
Ben Daggers

Reputation: 992

first you need to configure your blogger header max widgets. Check it if its more than 2. if not change it to (let's say) 4 and add the following css attributes under the #header & #header2:

float:left;
width:50%;

You'll be able to add new gadgets which is aligned horizontally. then add google adsense on the right and your logo at the left. Save your template and view!

Upvotes: 1

Related Questions