Header Ads

How To Add Related Post Without Thumbnail To A Blog.


Adding related post at the end of every blogger post is an essential way of improving every blog site performance, improving site traffic and also engaging  readers.

Obviously some persons come to visit your site, while some are  actually looking for information, related post plays the key role here, by facilitating and suggesting to a reader what next that might be helpful to look out for within your blog. 


So here am going to show you how to add related post without thumbnail and then in my next post I will show how to add related post with thumbnail.

To add related post to your site copy the code below

  <!--Related Posts Scripts and Styles Start-->
<style>
      #related-posts {
        float : left;
        width : 350px;
        margin-top:20px;
        margin-left : 5px;
        margin-bottom:20px;
        font : 11px Verdana;
        margin-bottom:10px;
      }
      #related-posts .widget {
        list-style-type : none;
        margin : 5px 0 5px 0;
        padding : 0;
      }
      #related-posts .widget h2, #related-posts h2 {
        font-size : 20px;
        font-weight : normal;
        margin : 5px 7px 0;
        padding : 0 0 5px;
      }
      #related-posts a {
        text-decoration : none;
      }
      #related-posts a:hover {
        text-decoration : none;
      }
      #related-posts ul {
        border : medium none;
        margin : 10px;
        padding : 0;
      }
      #related-posts ul li {
        display : block;
        background : url(https://2.bp.blogspot.com/_u4gySN2ZgqE/SnZhv_C6bTI/AAAAAAAAAl4/Rozt7UhvgOo/s200/greentickbullet.png) no-repeat 0 0;
        margin : 0;
        padding-top : 0;
        padding-right : 0;
        padding-bottom : 1px;
        padding-left : 21px;
        margin-bottom : 5px;
        line-height : 2em;
        border-bottom:1px dotted #cccccc;
      }
    </style>
<script type='text/javascript'>
      //<![CDATA[
      var relatedTitles = new Array();
      var relatedTitlesNum = 0;
      var relatedUrls = new Array();
      function related_results_labels(json) {
        for (var i = 0; i < json.feed.entry.length; i++) {
          var entry = json.feed.entry[i];
          relatedTitles[relatedTitlesNum] = entry.title.$t;
          for (var k = 0; k < entry.link.length; k++) {
            if (entry.link[k].rel == 'alternate') {
              relatedUrls[relatedTitlesNum] = entry.link[k].href;
              relatedTitlesNum++;
              break;
            }
          }
        }
      }
      function removeRelatedDuplicates() {
        var tmp = new Array(0);
        var tmp2 = new Array(0);
        for(var i = 0; i < relatedUrls.length; i++) {
          if(!contains(tmp, relatedUrls[i])) {
            tmp.length += 1;
            tmp[tmp.length - 1] = relatedUrls[i];
            tmp2.length += 1;
            tmp2[tmp2.length - 1] = relatedTitles[i];
          }
        }
        relatedTitles = tmp2;
        relatedUrls = tmp;
      }
      function contains(a, e) {
        for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
        return false;
      }
      function printRelatedLabels() {
        var r = Math.floor((relatedTitles.length - 1) * Math.random());
        var i = 0;
        document.write('<ul>');
        while (i < relatedTitles.length && i < 20) {
          document.write('<li><a href="' + relatedUrls[r] + '">' + relatedTitles[r] + '</a></li>');
          if (r < relatedTitles.length - 1) {
            r++;
          } else {
            r = 0;
          }
          i++;
        }
        document.write('</ul>');
      }
      //]]>
    </script>
<!--Related Posts Scripts and Styles End--></head>

Login into your blogger dash board click on Theme.
Click on Edith Html

Search for </head>  by pressing control F and then click inside the html after typing it, hit the enter key.

Place the code above the </head>.
Save the Html.

Now to make the related post show on your blog copy the code below.

Search for  </b:if>

Past the code in front of it.

 <!--Related Posts with thumbnail Starts-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<font face='Arial' size='3'><b>Related Posts:
</b></font><font color='#FFFFFF'><b:loop values='data:post.labels' var='label'><data:label.name/><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&amp;max-results=5&quot;' type='text/javascript'/></b:if></b:loop>
</font>
<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();
</script>
</div>
</b:if>
<!--Related Posts with thumbnail Ends-->

You can also change the variables by changing their numbers.
I hope this post is useful and I will like to hear from you on the  comment box below.
Thanks for staying with us at techsfair.com.

No comments:

Theme images by Jason Morrow. Powered by Blogger.