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.

0 comments:

Post a Comment

Contact Form

Name

Email *

Message *

Blog Archive

Translate Language

Popular Posts

click on