Monday, July 2, 2012

How To Add Two Columns Widget Directly Under Posts in Blogger

Leave a Comment
Is your blog sidebar already loaded with widgets, and you still wish to add more widget, but this time not on your sidebar? I will help show you a trick which you can use to add two columns widget directly under your posts in Blogger. This will not only help to reduce the load on your blog sidebar, but will also provide you with the opportunity of adding some other relevant widgets like ads which can help to yield more money and also bring out the professionalism of your blog. The tutorial is straight and concise, and so will not pose any problem to you as long as you follow the simple step by step guides I used in this post. Lets see the screen-shot what the two column will look like under your posts:


 
How to Add it to Blogger 

Step 1: Login To Blogger Go To > Design > Edit HTML.

Step 2: Tick the "Expand Widget Templates" box

Step 3: Using CTRL+F, find the code below:

]]></b:skin>

Step 4: Just before the above code, copy and paste the code below:

.underpost {
margin:15px 0px 10px 0px;
padding:5px 0;
clear:both;
}

.underleft{
float:left;
width:265px;
margin-right:15px;
}

.underright {
float:right;
width:265px;
}

Step 5: Also Using CTRL+F, find the code below in your template:

<data:post.body/>

Step 6: Copy and paste the code below, exactly under the code above:

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<div class='underpost'>

<div class='underleft'>
Paste the Left column ads code here

</div>

<div class='underright'>
 
Paste the Right column ads code here

</div>

</div>

</b:if>

Step 7: Save your template.The ads or codes which you will add will only appear on your post pages because of the conditional tags <b:if cond='data:blog.pageType == &quot;item&quot;'>

Cheers!

0 comments:

Post a Comment