SEO Blogger Template Sophia

Sophia Blogger Template

Sophia Blogger template is design for blogs writer who are interested about fashion and life style and online magazine blogging.

How To Divide Blogger Header Into Two Section

The blogger templates are almost free and some are paid templates. You like the blogger template and want to customize your blog template. Here is the tutorial to split the header of your blogger blog into two parts. Today, I am discussing with you, how to divide your blog's header into two parts.
Blogger default template comes with a single header by default. Splitting blogger template header into two sections helps you to look more professional.
You can make your logo appear on the left side of blog header and advertisement banner to the right of the logo on the header of a blog.

Here is the blog looks like after splitting it into two columns:

Steps to Divide Blog's Header into Two Columns

• Login to your Blogger dashboard 
• Click Template
• Click Edit HTML Tab (Better to backup your template before editing the blog template) 
• Find the below code ( Use CTRL+F )

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

• Copy the below code and paste it below, right under (after) it

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

• Final code after you paste the above code your final code will look like below code

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

• Use CTR+F to find ]]></b:skin>
• Copy and add the code below right above the ]]></b:skin> line

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

• Finally, Save your template

• Then Go to "Layout". You will see "Add a gadget" widget link on right of the header. 
• Add any widget right beside your blog logo. 

Happy Blogging

I hope this tutorial is helpful to you.