How To Split Your Blog’s Header into Two Columns
Most of the default Blogger template are highly customizable to users’ taste. However, currently (as the time of publishing this post) one cannot the header of the blogger blog into two. Now, this post is going to show you a very simple way on how to split your blogger head or any section you would like to split into two.
(adsbygoogle = window.adsbygoogle || []).push({});
Splitting your blog head into two section allows you to add extra gadgets aside your blog logo (or Title). It makes your blog look more professional, after making your logo to appear on the left side of your website, while you have some space to add any other gadget or ad banner to the right of the logo.
See an example of what I am saying below – blog logo on and left while ad is on the left;
Related Posts
How To Split Your Blog’s Header into Two Columns
WARNING: Kindly back up you template before embarking on this process.
Step 1. First log in to your Blogger dashboard via www.blogger.com
Step 2. Go to Template
Step 3. Click Edit HTML tab
Step 4. Now, use CTRL F to find the code below:
<b:section class=’header’ id=’header’ maxwidgets=’1′ showaddelement=’no’><b:widget id=’Header1′ locked=’true’ title=’My Blog (Header)’ type=’Header’/></b:section>
Step 5. Then copy and paste the code below, just below (after) it
(adsbygoogle = window.adsbygoogle || []).push({});
<b:section id=’header-right’ showaddelement=’yes’/><div style=’clear: both;’/>
Step 6. Therefore, your code should now appear like this:
<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;’/>
Step 7. Now use CTR F to find ]]></b:skin>
Step 8. Then copy and add the code below just before (above) the ]]></b:skin> line
#header, body#layout #header {width:35%;display:inline-block;float:left;padding:15px;}#header-right, body#layout #header-right {width:50%;display:inline-block;float:right;padding:15px;}#header-right .widget {margin:0;}
Step 9. Save your template.
Step 10. After the following the above instructions, go to “Layout” and you are supposed to see a “Add a gadget” link right beside the header. Click on it to add any widget right beside your blog logo – Social media icons, ad banner, or even Google Search box.
Then you are done
Kindly drop your comment if you have contributions or questions to ask via the comment box.
Thanks!
