Add Two Sidebar Columns Below Posts in Blogger

By Raju on Jul 29, 2010 

• Save to Delicious
• Stumble it
• Digg this
• Share

Today I will tell you how to add two extra widget sections / sidebar columns below Blogger post sections within main wrapper.

Step 1: Go to Design > Edit HTML tab and find for:

<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
</div>

Step 2: Add the following snippet before the closing DIV. It is </div> marked in bold in step 1.

<b:if cond='data:blog.url == data:blog.homepageUrl'>

<b:section class='sidebar' id='col-left' showaddelement='yes' />
<b:section class='sidebar' id='col-right' showaddelement='yes'/>
<div style='clear: both;'/>

</b:if>

I have used the conditional tags highlighted in red to show these sidebar sections only in homepage of your blog. If you want these widget sections to be shown also on post pages then delete the conditional tags.

Step 3: Find ]]></b:skin> and before this add:

#col-left {
width: 48%;
float: left;
}
#col-right {
width: 48%;
float: right;
}

Step 4: Save you template and go to Blogger “Page Elements” tab. You will find that there are two widget sections added just below the post body. Now add some widgets to these and view your blog.

One more thing you will notice that the sidebar columns will be visible after the blog pager and blog feed links. Blog-pager links are “Older Post”, “Home” and “Newer Post” links and blog-feed links are “Subscribe to: Posts (Atom)” and “Subscribe to: Post Comments (Atom)” links that are visible in Blogger homepage and in item pages below every posts.

If you think that it looks bad then you can hide or remove these links so that the two sidebar widget sections will appear only after the post body. So let’s do another step.

Step 5 (Optional): Go to Design > Edit HTML tab and find for “]]></b:skin>”. Immediately below it add the following styling properties:

<b:if cond='data:blog.url == data:blog.homepageUrl'>

<style type='text/css'>
#blog-pager {
display:none;
}
.feed-links {
display:none;
}
</style>

</b:if>

Again note that here also I have used the conditional tags for homepage only. At last save you template.

It’s done.