However, some other bloggers may want to have more features which are not available in the Template Designer. And one of the things is to have 2 columns on header so they can display something beside their blog title. This is not included in the Template Designer because they only provide a single header column. Many bloggers do not like to have so much empty space after the blog header and they look around how to put one more column beside the blog title. Can we do that? Of course!
What can You Put Beside Blog Title?
If you have 2 headers columns, then one of them is for your blog title. Another column may be for one of the followings:
- An advertisement. With Google adsense, you can have a contextual or image adsense or the two alternating each other. The best Google adsense beside blog title is either 728 x 90 Leaderboard or 468 x 60 Banner. You can the same ad size from your affiliate programs as an alternative to Google adsense.
- Popular Post. You can this Popular Post widget through Add a Gadget. You can add up to 10 posts from your popular posts, but to place it on header, it is better not display more than 5 posts.
- Recent Post; posts you have just added.
- Static image to flourish your blog.
So How Can You Split The Template Designer into 2 Columns?
Follow steps below:
- Log in to your Blogger Dashboard
- Click Design and HTML
- Make sure NOT to select Expand Widget Templates box
- Find the Code1 shown on the right
- Just below Code1 in your template, add Code2
- Then find ]]></b:skin>
- Insert Code3 just before ]]></b:skin>
- Save your template
Code1
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='My Test Blog (Header)' type='Header'/>
</b:section>
Code2
<b:section id='header-right' showaddelement='yes'/>
<div style='clear: both;'/>
Code3
#header, body#layout #header {width:30%;display:inline-block;float:left;}
#header-right, body#layout #header-right {width:65%;display:inline-block;float:right;padding:15px;}
#header-right .widget {margin:0;}
To Adjust Width of the 2 Columns in Header
The width of the 2 columns in header you have just created is dictated by Code3. In example given here the column width for blog title (left column) is 30% of the total width, while the second column on the right next to the blog title columns is 65%. You can adjust this proportion according to your situation. You may need a little experiment to reach the right proportion.
Important for the Right Column
If you want to put a 728 x 90 Leaderboard adsense for the right header column, you would likely to have more than 1000px for your total template width. In Template Designer, you will only able to have 1000px maximum for the total width. To have more than that, look for the following code (Code4) in your template html and adjust them accordingly.
Code4
<b:template-skin>
<b:variable default='930px' name='content.width' type='length' value='1000px'/>
<b:variable default='0' name='main.column.left.width' type='length' value='0px'/>
