Split blogger header into two columns

How to split Blogger header into two columns :

We can add gadget next to header by splitting header section into two columns on Blogger. It is easy to split blogger header into 2 columns. By dividing Blogger header into 2 columns, We can add any Blogger gadget  next to Blogger header.

Follow below steps to split Blogger header into 2 columns/sections

Step 1 : Go to Blogger Dashboard

Step 2 : Click on Template

Step 3 : Click on Edit HTML

Step 4 : Do customization as below
 search below code
<b:section class='header' id='header' maxwidgets='1' showaddelement='yes'>
<b:widget id='Header1' locked='false' title='your title name (Header)' type='Header'>     
</b:section>

add below code just after above code

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

Again search ]]></b:skin>  , and add below code just above  ]]></b:skin>

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

And again add below code just above  ]]>   </b:template-skin>

#layout #header {width: 50%; float: left;}
#layout #header-right {width: 50%; float: right;}

Step 5 : Click on Save template.

Now go to your Blogger and click on Layout, now you can see two column header section on your Blogger layout.

3 comments:

  1. Hello Narayana,

    After reading your blog post i have tried to split up my blogger header into two parts. Please have a look. YOur blog has so many good tips and i am so excited to find your blog.

    Please keep updating regularly.


    Regards,
    Gautam
    Make money online

    ReplyDelete
  2. This is a very great tutorial. Thanks for sharing it... split blogger header in two

    ReplyDelete
  3. how do you expect one to do this with the help of your blog post if you copy-protect it? you don't mean i should type the code letter-by-letter.

    ReplyDelete