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.
Hello Narayana,
ReplyDeleteAfter 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
This is a very great tutorial. Thanks for sharing it... split blogger header in two
ReplyDeletehow 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