Simple Blogger 'related posts' widget

In today's post I will be explaining 'How to use Related posts widget in your blogger blog ?'.This widget will be helpful in displaying links to related posts beneath each post.

This widget chooses related posts based on their 'Label'.


Type 1. Related posts with thumbnail

Code for this widget,

<!-- Related posts starts-->
    
<script src='https://sites.google.com/site/curiohub/home/related/Related_posts2.js' type='text/javascript'/>

<link href='https://sites.google.com/site/curiohub/home/related/related_css2.css' rel='stylesheet' type='text/css'/>

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

      <b:loop values='data:post.labels' var='label'><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&amp;max-results=5&quot;' type='text/javascript'/></b:if></b:loop>

<script type='text/javascript'> var href = &quot;<data:post.url/>&quot;;
                                var currentposturl = href.substr(href.lastIndexOf(&#39;/&#39;) + 1);
                                removeRelatedDuplicates(); printRelatedLabels(currentposturl);
</script>
</b:if>


<!-- Related posts ends -->

Type 2. Related posts without thumbnail 

Code for it,

<!-- Related posts widget starts-->
<script src='https://sites.google.com/site/curiohub/home/related/Related_posts.js' type='text/javascript'/>

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

   <b:loop values='data:post.labels' var='label'><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&amp;max-results=5&quot;' type='text/javascript'/></b:if></b:loop>

<script type='text/javascript'> var href = &quot;<data:post.url/>&quot;;
        var currentposturl = href.substr(href.lastIndexOf(&#39;/&#39;) + 1);
        removeRelatedDuplicates(); printRelatedLabels(currentposturl);
</script>
</b:if>

<!-- Related posts widget ends-->

How to use Above code in blogger

Follow below given steps to integrate above code in your blog,
1. Copy Any of above code.
2. Go to Template -> Edit HTML in your Blogger Dashboard.
3. Search for end of post, i.e. search for <data:post.body/> [Last one] 
4. Paste the copied copy just beneath the code you just searched for.
5. Now save your Template and You are done.

Customization:
For changing maximum number of related links change the number '5' to any desired number,in code highlighted with red color, max-results=5


If you are getting any problem in implementing this widget, please leave a comment I will be happy to help.

Did you find this post useful? Let Us know in the comments section below.

Posted in: script