How to Split the Header into Two Parts in Blogger

Blogger Template Designer allows you to customize your blog template but as at  the time of publishing this tutorial. The previous content have shown you how to separate  the Blogger header into two parts but it still have some problems with some template so today i will show you new update for divide  the blog header into two parts.

Splitting your blog header into two sections can make your blog look more professional, making your logo to appear on the left side of your blog header, while you have some space to add any other gadget or advertisement banner to the right side header.

1. Log in to your Blogger dashboard
2. Click Template
3. Click EDIT HTML tab
4. Back up your blog template
5. Do Not tick the "Expand Widget Templates"
6. Press Ctrl+F in the HTML code box to find the code below:

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

7. Copy and past the code below, just after the code above.

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

8. Hence, your code should be like this.

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'> <b:widget id='Header1' locked='true' title='My Blog (Header)' type='Header'/> </b:section> <b:section id='header-right' showaddelement='yes'/> <div style='clear: both;'/>

9. Press Ctrl+F again to find ]]></b:skin>
10. Copy and paste the below code just above ]]></b:skin> line

#header, body#layout #header {width:35%;display:inline-block;float:left;padding:15px;} #header-right, body#layout #header-right  {width:50%;display:inline-block;float:right;padding:15px;} #header-right .widget {margin:0;}

11. Save your Template

Go "Layout" and you should now notice a "Add a gadget" link right beside the header. Click it to Add any widget right beside your blog logo.