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