Skip to main content

Related Posts for Blogger

Related Posts for Blogger

One of the many ways to engage your reader to your blog is by providing similar recipes to what they are experiencing now. It is a way of offering similar experience from a different perspective. Related posts widget does that job with ease. This widget identifies the categories of current post and provides other available posts from same category; not just from recent stories, but also from from your blog archive. Advantage includes the reduction of bounce rate as well as growth in traffic. Besides, it helps to improve SEO. This widget, designed with minimal coding, offers scalability overs its appearance and responsiveness.

Before you proceed further to make changes in your blogger template, it is strongly recommended to backup your blog template to avoid unnecessary hazards.
  1. After you login to your Blogger dashboard, go to Theme and click Edit HTML.
  2. Search for (Ctrl+F) </head>, copy (Ctrl+C) the following code and paste (Ctrl+V) it just before </head>.
  3. <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <style type='text/css'>
    /*<![CDATA[*/  #blrRelWrapper {
        clear: both;
      }
      #blrRelWrapper::after {
        content: '';
        display: block;
        clear: both;
      }
      .blrRelPosts {
        float: left;
        margin: 0 0.5%;
        position: relative;
        overflow: hidden;
        border-radius: 4px;
      }
      #blrRelWrapper a {
        text-decoration: none;
        color: #fff;
      }
      #blrRelWrapper img {
        max-width: 100%;
        display: block;
        height: 100px;
      }
      #blrRelWrapper h2 {
        position: absolute;
        right: 0;
        left: 0;
        top: 50px;
        background: #22A86C;
        padding: 10px;
        font-size: 14px;
      }
      #blrRelWrapper p {
        text-align: justify;
        width: 100%;
        height: 110px;
        word-break: break-all;
        margin-top: -3px;
        padding: 10px;
        overflow: hidden;
        box-sizing: border-box;
        font-size: 12px;
        background: #2D2F31;
      }/*]]>*/
    <style>
    
    <script>
    //<![CDATA[  var relPosts = new Array();
    
      function relatedPosts(o) {
        for (var i = 0; i < o.feed.entry.length; i++) {
          var entry = o.feed.entry[i];
          relPosts[i] = new Object();
          for (var j = 0; j < entry.link.length; j++) {
            if (entry.link[j].rel == 'alternate') {
              relPosts[i].url = entry.link[j].href;
              break;
            }
          }
    
          relPosts[i].title = entry.title.$t;
    
          relPosts[i].img = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkEb0uMfPY7Ro1iaRJ8C6cD97LLAkx5ggws1eu5i34nkSBYmZdDZ9f1Ecc74kkEsbfBtNVLBDaFOZ8zRy_tingVO8jo-Ttb5bBk9sv6dB5jzNm0_LWWcT_Kb7hDZ21b_uL65LAiMDbgbA/s1600/no_image.jpg';
          if ("media$thumbnail" in entry)
            relPosts[i].img = entry.media$thumbnail.url.replace("s72-c", "s1600");
    
          relPosts[i].content = "";
          if ("content" in entry) {
            relPosts[i].content = entry.content.$t;
          } else if ("summary" in entry) {
            relPosts[i].content = entry.summary.$t;
          }
    
          var re = /<\S[^>]*>/gi;
          relPosts[i].content = relPosts[i].content.replace(re, "");
        }
      }
    
      function showRelatedPosts(maxChars, maxShown) {
        maxChars = maxChars || 200;
        maxShown = maxShown || 3;
        
        var p = 0;
        var r = Math.floor((relPosts.length - 1) * Math.random());
        var t = r;
    
        var dirURL = document.URL;
        dirURL = dirURL.substring(0, dirURL.indexOf('#.'));
    
        while (p < maxShown) {
          if (relPosts[r].url != dirURL) {
            var out = '<div class="blrRelPosts" style="width:'+ (100/maxShown -1) +'%">';
            out += '<a href="' + relPosts[r].url + '" rel="nofollow" title="' + relPosts[r].title + '">';
            out += '<h2>' + relPosts[r].title + '</h2>';
            out += '<img src="' + relPosts[r].img + '" />';
            out += '<p>' + relPosts[r].content.substring(0, maxChars) + '...</p>';
            out += '</a>';
            out += '</div>';
            document.write(out);
    
            p++;
            if (p == maxShown)
              break;
          }
          if (r < relPosts.length - 1) {
            r++;
          } else {
            r = 0;
          }
          if (r == t)
            break;
        }
      }//]]>
    </script>
    </b:if>
  4. Search for <b:loop values='data:post.labels' var='label'> (if it is found multiple times, select the one that is wrapped inside <b:includable id='post' var='post'> ... </b:includable>), and just above its closing tag, </b:loop>, paste (Ctrl+V) the following.
  5. <script expr:src='data:blog.homepageUrl + &quot;feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;max-results=20&amp;callback=relatedPosts&quot;'/>
  6. Scroll down and search (Ctrl+F) for <b:includable id='post' var='post'>. Expand the code block, if it is collapsed, and find its closing tag, </b:includable>. Just above </b:includable>, a closing </div> can be found, which should be the closing tag of <div class='post hentry ...'>. If so, copy (Ctrl+C) the following code and paste it (Ctrl+V) just above that </div>.
  7. <b:if cond='data:blog.pageType == &quot;item&quot;'>
      <div style='margin:10px 0; padding:10px 0;'>
        <h1>Related Stories</h1>
        <div id='blrRelWrapper'>
          <script type='text/javascript'>
            showRelatedPosts(200, 3);
          </script>
        </div>
      </div>
    </b:if>

    Customization

    The function for displaying related posts, as defined in line-6 of above snippet, consists of two optional arguments, as showRelatedPosts([chars],[posts]).

    chars (default: 200)
    Maximum number of characters to be shown as post snippet. However, number of characters in post snippets as obtained from the feed already have an upper limit. So, whichever is less, will be produced. Value should be an integer.
    posts (default: 3)
    Number of related posts to be shown. Value must be an interger.
  8. Save template.

I tried my best to keep things as uncomplicated as possible. However if you face any trouble regarding installation of this widget, feel free to contact. Any type of question related to this will be greeted.
Keep on blogging.

Comments