How To Add Widget Inside Post Body

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.
how to add widget beside post body section

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;">
Your widget/ad code here....Your widget/ad code here....Your widget/ad code here....Your widget/ad code here....
</div>
Example:

<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&amp;width=234&amp;height=400&amp;colorscheme=light&amp;show_faces=true&amp;border_color&amp;stream=false&amp;header=true&amp;" 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 == &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<div class="widget-beside-post" style="clear: left; display: inline-block; float: leftheight: 400px; margin: 12px 20px -50px 0pxwidth: 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!
About the Author:
tilt  hover effect
Hello folks! This is GOLDEN WORKS TV, the admin of this blog. No words could described my grateful appreciations to all newbie and professional bloggers around the world and most especially to Almighty God who gave me the wisdom...Read More
Follow him @ Twitter |Facebook


Express yourself!
5 comments : Post Your's Buddies!

Post A Comment!
We love to hear your feedbacks and suggestions. We will try our best to reply to your queries as soon as time allows. Please Keep in mind that all comments are moderated manually by our editors team to minimize spamming, and all the links are nofollow.

Note:
1. To add HTML code in the box, please use our HTML editor generator.
2. Please do not spam. Those type of comments will be deleted upon our review.
3. We should appreciate an individual and suggestive discussion.

Best Regards,

GOLDEN WORKS TV
  1. nice post bro. keep the effort at highest level bro.

    ReplyDelete
  2. Thank you for the info.

    Maybe you can help me. I would like to embed or show my blog widget in a particular section of an html widget that will only appear on the home page. I've figured out how to show the html widget only on the homepage.

    Is there a way to show the blog widget inside the custom layout I've designed with a single html widget? Any idea how to do this?

    I've thought about using RSS and just removing the blog widget entirely.

    Thanks😁

    ReplyDelete
  3. very good. Thanks for sharing this wonderful posts, waiting to see more of it soon.

    ReplyDelete

Related Posts Plugin for WordPress, Blogger...