Sponsored Link:

LeaderBoard

adsense

Thursday, September 1, 2011

How to Split Header Blogger Into 2 Section

Do you ever wanted to have a page element beside your blogger header? You can add, an ad banner, a search bar, social media share button, Adsense ad or just about any widget you can get your hands on.


In this post I will help you how to do just that, by following this steps, you will have the result you want.

Step 1: Login to your Blogger account.
Step 2: Go to Dashboard > Template > Edit HTML.
Step 3: Back up your template for incase.
Step 4: Click the Expand Widget Templates checkbox.
Step 5: Find this code (press CTRL F and paste the code)

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'> 
<b:widget id='Header1' locked='true' title='My Test  Blog (Header)' type='Header'/> 
</b:section>

Step 6: Insert this code right after the code above.

<b:section id='header-right' showaddelement='yes'/>
<div style='clear: both;'/>

After adding the code, it should look like this:

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

Step 7: Find this code.

]]></b:skin>

Step 8: Add this code right before the code on step 7.

#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;}

Step 9: Save your template, and your done. Check out your layout you have 2 columns on your header.

You can adjust the width in your header by changing the numbers in the above code step 8.

I hope this steps help you, and hoping for your feedback.

2 comments:

  1. I was able to find it. but nothing changed on my layout. there's no new add gadget beside the title

    ReplyDelete
  2. Thank you very much for the great insight and we really appreciate the time you took to write this post.
    website design

    ReplyDelete

Related Posts Plugin for WordPress, Blogger...