How to split blogger header into two columns

Many bloggers are struggling to create a well-designed blog. So today’s post is about how to split the blogger header into two columns. You may have seen many blogs with a two column header. One column is for the header of the blog and the other may be for a search box, or advertisements or anything you’d like to put up there. As you know, blogger does not provide a template with a two-column header. But don’t worry, we’re just going to swap out two pieces of code.

Steps to split header into two columns:

• Log in to your blogger account
• Dashboard appears on successful login
• Go to Layout – Edit html

I suggest you use a test blog for this tutorial or back up the template if you want to use your main blog just in case you want to change it back

• Find the below code in the editor

/* Header----------------------------------------------- */

#header-wrapper {width:960px;margin:0 auto 0px;height:120px;}

#head-inner {width:230px;background-position: left;margin-left: auto;margin-right: auto;float:left;}

#header {margin: 0px;text-align: left;color:#ffcc66;}

• When you’ve found it, replace it with the code below

/* Header----------------------------------------------- */

#header-wrapper {width:960px;margin:0 auto 0px;height:120px;}

#head-inner {width:230px;background-position: left;margin-left: auto;margin-right: auto;float:left;}

#header {margin: 0px;text-align: left;color:#ffcc66;}

#r_head{width:730px;float:left;}

• Now, scroll down in your edit window in blogger and find this code:

<div id='header-wrapper'><b:section class='header' id='header' maxwidgets='1' showaddelement='no'><b:widget id='Header1' locked='true' title='Test Blog (Header)' type='Header'/></b:section></div>

• Replace that code with the below code

<div id='header-wrapper'><div id='head-inner'><b:section class='header' id='header' maxwidgets='1' showaddelement='no'><b:widget id='Header1' locked='true' title='Test Blog (Header)' type='Header'/></b:section></div><div id='r_head'><b:section class='header' id='header2' preferred='yes'/></div></div>

• That’s it You’re done.
• Now save the template
• Click on page elements tab
• You can see that your one column header is changed to two column header

If you need any help regarding this hack, feel free to contact me.

Related posts:

1. How to add Horizontal Navbar in blogger
2. Create a 3 column template with two sidebars
3. Add Third Column to Blog
4. How to add widget above header
5. How to add three columns to footer

Tagged as: Blogger, design, split blogger header, two column header

Like this post? Post Comment, Download and Subscribe RSS