Related Posts widget for blogger (based on Labels)

On By // 20 comments
Advertisement
Here I am presenting a new type of Related Posts widget for blogger. It is based on Labels i.e. it shows the results of specific labels/categories you give to your posts. So let's add this quickly to your blog.

how to add this widget

  1. Go to Blogger Dashboard > Layout > Edit HTML > Download Full Template (for Backup) and click on Expand Widget Templates box.
  2. Press CTRL + F and search for ]]></b:skin> 
  3. Add following code BEFORE ]]></b:skin>
<!-- related post -->

.rbbox{border: 1px solid rgb(192, 192, 192);
padding: 5px;
background-color: #f0f0f0;
-moz-border-radius:5px;
margin:5px;
}
.rbbox:hover{background-color: rgb(255, 255, 255);
}
#relpostFs {
border: 1px solid rgb(204, 204, 204);
margin: 0;
padding: 3px 5px;
overflow: auto;
max-height: 200px;
-moz-border-radius:5px;}
<!-- /related post -->

    3. Now look for <data:post.body/>
    If you are using "Read More" feature then it will present TWO times. Add following code AFTER Second <data:post.body/>

    <!-- related post -->
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <H3>Related Post</H3>
    <DIV class='rbbox'>
    <DIV id='relpostFs'>
    <DIV id='albri'/>
    <SCRIPT type='text/javascript'>
    var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;;
    var maxNumberOfPostsPerLabel = 10;
    var maxNumberOfLabels = 10;
    maxNumberOfPostsPerLabel = 100;
    maxNumberOfLabels = 2;
    function listEntries10(json) {
    var ul = document.createElement(&#39;ul&#39;);
    var maxPosts = (json.feed.entry.length &lt;= maxNumberOfPostsPerLabel) ?
    json.feed.entry.length : maxNumberOfPostsPerLabel;
    for (var i = 0; i &lt; maxPosts; i++) {
    var entry = json.feed.entry[i];
    var alturl;
    for (var k = 0; k &lt; entry.link.length; k++) {
    if (entry.link[k].rel == &#39;alternate&#39;) {
    alturl = entry.link[k].href;
    break;
    }
    }
    var li = document.createElement(&#39;li&#39;);
    var a = document.createElement(&#39;a&#39;);
    a.href = alturl;
    if(a.href!=location.href) {
    var txt = document.createTextNode(entry.title.$t);
    a.appendChild(txt);
    li.appendChild(a);
    ul.appendChild(li);
    }
    }
    for (var l = 0; l &lt; json.feed.link.length; l++) {
    if (json.feed.link[l].rel == &#39;alternate&#39;) {
    var raw = json.feed.link[l].href;
    var label = raw.substr(homeUrl3.length+13);
    var k;
    for (k=0; k&lt;20; k++) label = label.replace(&quot;%20&quot;, &quot; &quot;);
    var txt = document.createTextNode(label);
    var h = document.createElement(&#39;b&#39;);
    h.appendChild(txt);
    var div1 = document.createElement(&#39;div&#39;);
    div1.appendChild(h);
    div1.appendChild(ul);
    document.getElementById(&#39;albri&#39;).appendChild(div1);
    }
    }
    }
    function search10(query, label) {
    var script = document.createElement(&#39;script&#39;);
    script.setAttribute(&#39;src&#39;, query + &#39;feeds/posts/default/-/&#39;
    + label +
    &#39;?alt=json-in-script&amp;callback=listEntries10&#39;);
    script.setAttribute(&#39;type&#39;, &#39;text/javascript&#39;);
    document.documentElement.firstChild.appendChild(script);
    }
    var labelArray = new Array();
    var numLabel = 0;
    <b:loop values='data:posts' var='post'>
    <b:loop values='data:post.labels' var='label'>
    textLabel = &quot;<data:label.name/>&quot;;
    var test = 0;
    for (var i = 0; i &lt; labelArray.length; i++)
    if (labelArray[i] == textLabel) test = 1;
    if (test == 0) {
    labelArray.push(textLabel);
    var maxLabels = (labelArray.length &lt;= maxNumberOfLabels) ?
    labelArray.length : maxNumberOfLabels;
    if (numLabel &lt; maxLabels) {
    search10(homeUrl3, textLabel);
    numLabel++;
    }
    }
    </b:loop>
    </b:loop>
    </SCRIPT>
    </DIV>
    <script type='text/javascript'>RelPost();</script>
    </DIV>
    <a href="http://chandeepsblogtips.blogspot.com/2011/07/related-posts-widget-for-blogger-based.html" title="Related Posts widget for blogger (based on Labels)"><span class="getfloat">widgets by blogtips</span></a>
    </b:if>
    <!-- /related post -->

    Save template and look the changes.

    CUSTOMIZATION
    ---------------------

    You can change following parameteres

    var maxNumberOfPostsPerLabel = 10;
    var maxNumberOfLabels = 10;
    maxNumberOfPostsPerLabel = 100;
    maxNumberOfLabels = 2;

    20 comments:

    1. Hi
      Is there a way to remove duplicate links being reported?
      If I put "maxNumberOfLabels = 3", then I see that same links are getting repeated for each label.
      Thanks

      ReplyDelete
      Replies
      1. When you add two labels in a post then the related post which has that two labels will be repeated. We cannot remove that. :)

        Delete
    2. hi..my templete got 3 ...so after which one should i paste the code

      tq

      ReplyDelete
    3. Hi Chan Deep, Just curious if you know how to remove the link of the current post which is on the related widget. I already implement a related widget on my blog, just have a problem on this.

      PS: I read from the above comments, that means 2 labels in a post is not advisable on related widget, as it double the entry? Is there any related widget that doesn't behave like that? let me know, thanks... Peace and Blessings, happy blogging.

      ReplyDelete
    4. Sorry Sis, Currently we can't make it with this widget. If I Updated this widget I'll design it as per your wish. ;)

      Thanks for commenting. :)

      ReplyDelete
    5. Hello Chan Deep, I wanna know it's possible to make related post from same label take from new and old link, so be the next post and prev post on same label. If that's possible how to make it? thank you

      ReplyDelete
      Replies
      1. Hi Cheri, Sorry It's not possible.

        Delete
    6. Is this working in my site dailymediafire.com?

      ReplyDelete
    7. It does not work with my blog: http://www.seoer.com.vn/

      ReplyDelete
    8. Thanks, it worked perfect, but how to show thumbnails alongwith the post ????

      ReplyDelete
    9. Hi, thanks for the script! How can I remove label title on the related posts list?

      ReplyDelete
    10. This comment has been removed by the author.

      ReplyDelete
    11. Thank you very much. Great article.

      ReplyDelete
    12. Thanks for sharing, But it not working fine with our blog : http://dungmasterblogs.blogspot.com/2014/02/how-to-add-google-sitemap-to-your.html

      ReplyDelete
      Replies
      1. Kindly retry the tutorial step by step :)

        Delete
    13. Your work is simply fantastic. But I got some proble with font. My labels are in Vietnamese and the texts rendered like that (Hu%E1%BA%A5n luy%E1%BB%87n)

      http://footballmanagervietnam.blogspot.com/2014/03/huan-luyen-vien-chuyen-mon-tot-nhat-football-manager-2014.html

      I tried to remove others family font except Arial. But it doesn't change.

      Plz show me what to do.

      ReplyDelete

    I Appreciate your valuable Feedback. So, Please DO NOT SPAM - Spam comments will be deleted immediately.

    Don't use brand name in name field and you're not allowed to use links in comments unless it's necessary

    Such Comments will be removed immediately.

    Thanks,
    Chandeep