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.