How to Split the Header into Two Parts in Blogger (update)

The Blogger Template Designer allows you to customize your blog template but as at the time of publishing this tutorial, you cannot use it to split the header of your blogger blog into two. 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 the 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 of the logo.

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 paste 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 to "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.