Responsive Related Posts Widget For Blogger

Related posts widget is used to display the posts with same label name or same tags. It's a good practice because you can lure your readers to visit other pages of your site thus increasing the page rank of your site. It also serves you as a automatic interlinking plugin to all your pages present in your sites.

Main reason behind posting this tutorial was to offer a plugin/widget which is responsive in real manner. These widget before wasn't responsive at all, after few trials and errors we have successfully changed the codes of this widget which make it responsive. It can mould itself to any site with any width and dimensions. This widget is one of it's own kind.

Now let us see how to imply it on you blogger site

1.Must Know SEO Tips
2.Learn To Resize Cloud Labels

Open Blogger Dashboard → Template → Html Editor
Find following code in your HTML Editor

Now go below to this piece of code searching for

Now add the below given code just after the above code.

Html & Javascript

<script id='related-posts' src='https://googledrive.com/host/0BxRWAQDD7jACanc2UmlhbDAtdDA/' type='text/javascript'/>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style='clear:both;'/>
<br/>  <br/>
<div class='related-posts'>
<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>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<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=6&quot;' type='text/javascript'/></b:if></b:loop>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=4;
var relatedpoststitle=&quot;More Tutorials For You&quot;;
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script></div>
<div style='clear:both'/>
</b:if>
</div>
</b:if>

After adding hit the save button and then view you sites pages.

Congratulations You have successfully implemented related post widget to your site.

Final Words

This pre-version of this widget was set with some absolute CSS codes which doesn't make it responsive at all. We have removed all the absolute CSS codes and coded the widget with auto-set codes. Because of which it is working fine in all the sites of any width and any dimensions.

Your thanks is our income, so if you liked our work then let us know your feelings for us via your comments or testimonials.