Recently I have a tutorial on how to add adsense code (or any widget) just above post body area in order to increase the click through rate of your adsense ad. Now in this post, I will teach you how to add any widget, it may an ad or any code(recent comment widget, facebook like box,popular posts widget and the like) that you want to put just beside your written article or post body section of your blog/site. Have a look at the image below.
In the above example, I used my facebook like box widget to appear beside my written article.
Step 3. Save/Publish/Update your work.
Step 3. Just above the code in step 2, paste the code below
Step 4. Save your Template and your done!
Easy and Simple! isn't it?
If you have problems encountered in following this tutorial, you can leave your comment below. Your thoughts are highly valued here in BTAT.
Always Say A Prayer!
1. Adding Widget Beside Post Body Individually
Step 1. Go to Blogger >>New Post or (select another post)
Step 2. Copy the code below and paste it above your written post/article (it should be in the top most corner) .
<div class="widget-beside-post" style="clear: left; display: inline-block; float: left; height: 400px; margin: 12px 20px -50px 0px; width: 234px;">
<iframe src="//www.facebook.com/plugins/likebox.php?href= https://www.facebook.com/pages/Bloggingtipsandtrix/533310753378603?ref=hl&width=234&height=400&colorscheme=light&show_faces=true&border_color&stream=false&header=true&" style="background: #fafafa; border: 0 solid #ddd; height: 337px; overflow: hidden; width: 234px;"></iframe>
</div>
<div class="widget-beside-post" style="clear: left; display: inline-block; float: left; height: 400px; margin: 12px 20px -50px 0px; width: 234px;">Example:
Your widget/ad code here....Your widget/ad code here....Your widget/ad code here....Your widget/ad code here....
</div>
<div class="widget-beside-post" style="clear: left; display: inline-block; float: left; height: 400px; margin: 12px 20px -50px 0px; width: 234px;">
<iframe src="//www.facebook.com/plugins/likebox.php?href= https://www.facebook.com/pages/Bloggingtipsandtrix/533310753378603?ref=hl&width=234&height=400&colorscheme=light&show_faces=true&border_color&stream=false&header=true&" style="background: #fafafa; border: 0 solid #ddd; height: 337px; overflow: hidden; width: 234px;"></iframe>
</div>
In the above example, I used my facebook like box widget to appear beside my written article.
Step 3. Save/Publish/Update your work.
2. Adding Widget/Ad To All Your Written Articles/Posts Automatically
Step 1. Go to Blogger Dashboard >> Template >> Edit HTML ( have a back-up of your template)
Step 2. Find the code below, choose the third occurrence of the code
<data:post.body/>
Step 3. Just above the code in step 2, paste the code below
<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<div class="widget-beside-post" style="clear: left; display: inline-block; float: left; height: 400px; margin: 12px 20px -50px 0px; width: 234px;">
Your widget/ad code here....Your widget/ad code here....Your widget/ad code here....Your widget/ad code here....
</div></b:if></b:if>
Step 4. Save your Template and your done!
Simple customization:
- Change left to right if you want to position the widget in the right side of your post.
- Adjust the width "234px" and the height" 400px" of your widget depending on your likeness.
- Change the numerical value of the margin by following the standard sequence which is top "12px", right 20px",bottom " -50px", and left " 0px".
Easy and Simple! isn't it?
If you have problems encountered in following this tutorial, you can leave your comment below. Your thoughts are highly valued here in BTAT.
Always Say A Prayer!