How To Add Related Posts Widget in Blogger Prajjwal Rajput Wednesday, July 16, 2014 3 Comments

Before few days we had shared an amazing blogger template trick for your blogger blogs this trick are very popular and most important for blogger blog this trick working on that how look your blog in different device like tablets, smartphones landscape and portrait mode and etc. These types of tricks knows ad responsive which means that how make your blogger template responsive for all device. I you're missed our this post so don't worry read this post through clicking this link after this today's post Make Blogger Template Responsive. But today I'm back again for you and your blog today's we had going sharing a useful tutorial and widgets for blogger blogs.

Today's post very interesting and very easily installation in blogger blog in some other blogs and websites they are published same this related posts widgets but there was no easy steps to install and there was not easy methods to install this widgets in blogger blog. But here at Next Blogger Tricks today provide very easy methods to install this related posts widget in your blogger blog. Some blogger like Ram Prasad from My Blogging Yard he is newbie blogger but he is already experienced in blogging niches sites and blog he running is blog about two months he provide in his blog same as Next Blogger Tricks Contents. But he want to help that how to install related posts widget with thumbnails in his blog. But today I'm comes with same thing wants to Ram Prasad and other bloggers for their requests.

This is a wonderful and clean related posts widget for blogger blogs this related posts widgets show on your bottom of every blog post along with thumbnails. This relates posts article chosen from others posts in the same label and tags. So let's start to add this relates posts widget with thumbnails in your blogger blogs.

How To Install Relates Posts With Thumbnails In Blogger Blogs?
My Advise before editing your blogger blog template please firstly make its backup and save the blogger template backup in your hard disk. Because every newbies and pro blogger can do this. To add this related posts widget with thumbnails in your blogger blog just follow below steps.

• Go To Blogger Dashboard>>Template>>Backup Your Template
• Click On Edit HTML Button
• Find below tag Using (Ctrl+F)

</head>

•  Paste the following code above the </head>

<!--Related Posts with thumbnails By NBT-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#related-posts{float:left;width:auto;}
#related-posts a{border-right: 1px dotted #eaeaea;}
#related-posts a:hover{background: #EEEEEE;}
#related-posts h2{margin-top: 10px;background:none;font:18px Oswald;padding:3px;color:#999999; text-transform:uppercase;}
#related-posts .related_img {margin:5px;border:4px solid #f2f2f2;width:100px;height:100px;transition:all 300ms ease-in-out;-webkit-transition:all 300ms ease-in-out;-moz-transition:all 300ms ease-in-out;-o-transition:all 300ms ease-in-out;-ms-transition:all 300ms ease-in-out;-webkit-border-radius: 10px;  -moz-border-radius: 10px; border-radius: 10px; }
#related-title {color:#666;text-align:center;padding: 0px 5px 10px;font-size:12px;width:110px;}
#related-posts .related_img:hover{border:4px solid #E8E8E8;opacity:.7;filter:alpha(opacity=70);-moz-opacity:.7;-khtml-opacity:.7}</style>
<script type='text/javascript' src='http://yourjavascript.com/34191188761/relatedposts-nbt.js
' />
</b:if>
<!--Related Posts with thumbnails By NBT-->

Customization:-

1. If you want change the width of thumbnails then modify the 100px with yours.
2. If you want change the height of thumbnails then modify the 100px with yours.
3. If you want display this relates posts widget in your blogger blog homepage or main page then remove the line in Blue color.

• Now, Find this below code (you might find this below code it more than 3, then you will stop at the second one).

<div class='post-footer'>

•  Paste the following below code just above the <div class='post-footer'>

 <!-- Related Posts with Thumbnails Code Start-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=5&quot;' type='text/javascript'/></b:loop>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=6;
var relatedpoststitle=&quot;<b>Related Posts : </b>&quot;;
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div class='clear'/>
</b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
</b:if></b:if><!-- Related Posts with Thumbnails Code End-->

Customization:-

If you want to change the number of displaying posts in this widget then change the value in red bold color but recommended is 6 posts.

If you want to display this related posts widget in blogger blog's homepage or main page then remove the blue bold color line.

• Now, Finally Save Template
• Done
• That's all!
• CONGRATULATIONS! you're successfully add this widget in your blogger blog.

Last Words

So, friends this is our little widget and tutorial and I promised you that after few days I will back again with another useful and important with interesting tutorial and widgets for your blogger blog if you're facing problems or getting error during this process so leave comments for solutions and don't forget to like our Facebook page and also share this tutorial with your friends in social networking sites.

Happy Blogging!

Tweet

Tags: Blogger Widget / Tutorials