Add Related Posts with Thumbnail and Summary

The related posts widget appears if one of your post has the same label with others. You need to label your posts first.


This tutorial will teach you on how to add related posts widget below your every posts. Don't worry this is simple, just copy and paste. All you need to do is follow the steps and learn to customize it by CSS. It has three parts.
related posts

The Script


<script type='text/javascript'>
//<![CDATA[
/*
Related Post with Thumbnail & Summary 1.0 (May 02, 2011)
*/
var relnojudul = 0;
var numpost = 4;
var numchars = 105;
var reljudul=new Array();var relurls=new Array();var relcuplikan=new Array();var relgambar=new Array();function saringtags(g,h){var e=g.split("<");for(var f=0;f<e.length;f++){if(e[f].indexOf(">")!=-1){e[f]=e[f].substring(e[f].indexOf(">")+1,e[f].length)}}e=e.join("");e=e.substring(0,h-1);return e}function relpostimgcuplik(h){for(var e=0;e<h.feed.entry.length;e++){var g=h.feed.entry[e];reljudul[relnojudul]=g.title.$t;postcontent="";if("content" in g){postcontent=g.content.$t}else{if("summary" in g){postcontent=g.summary.$t}}relcuplikan[relnojudul]=saringtags(postcontent,numchars);if("media$thumbnail" in g){postimg=g.media$thumbnail.url}else{postimg="http://1.bp.blogspot.com/-htG7vy9vIAA/Tp0KrMUdoWI/AAAAAAAABAU/e7XkFtErqsU/s1600/grey.GIF"}relgambar[relnojudul]=postimg;for(var f=0;f<g.link.length;f++){if(g.link[f].rel=="alternate"){relurls[relnojudul]=g.link[f].href;break}}relnojudul++}}function contains(a,e){for(var f=0;f<a.length;f++){if(a[f]==e){return true}}return false}function artikelterkait(){var v=new Array(0);var w=new Array(0);var x=new Array(0);var A=new Array(0);for(var u=0;u<relurls.length;u++){if(!contains(v,relurls[u])){v.length+=1;v[v.length-1]=relurls[u];w.length+=1;w[w.length-1]=reljudul[u];x.length+=1;x[x.length-1]=relcuplikan[u];A.length+=1;A[A.length-1]=relgambar[u]}}reljudul=w;relurls=v;relcuplikan=x;relgambar=A;for(var u=0;u<reljudul.length;u++){var B=Math.floor((reljudul.length-1)*Math.random());var i=reljudul[u];var s=relurls[u];var y=relcuplikan[u];var C=relgambar[u];reljudul[u]=reljudul[B];relurls[u]=relurls[B];relcuplikan[u]=relcuplikan[B];relgambar[u]=relgambar[B];reljudul[B]=i;relurls[B]=s;relcuplikan[B]=y;relgambar[B]=C}var r=0;var D=Math.floor((reljudul.length-1)*Math.random());var z=D;var q;var t=document.URL;while(r<numpost){if(relurls[D]!=t){q="<li class='news-title clearfix'>";q+="<a href='"+relurls[D]+"' rel='nofollow' target='_top' title='"+reljudul[D]+"'><div class='overlayb'></div><img src='"+relgambar[D]+"' /></a>";q+="<a class='relinkjdulx' href='"+relurls[D]+"' target='_top'>"+reljudul[D]+"</a>";q+="<span class='news-text'>"+relcuplikan[D]+"</span>";q+="</li>";document.write(q);r++;if(r==numpost){break}}if(D<reljudul.length-1){D++}else{D=0}if(D==z){break}}};
//]]>
</script>

var numpost = 4 : refers to the number of related posts you want to appear
var numchars = 105 : refers to the number of characters you want as a summary

You need to paste the code, go to Template > Edit HTML then paste it before  </head>. You're not yet done.

The placement



<b:if cond='data:blog.pageType == "item"'>

<div style='width:500px;height:190px'>
<div id='related_posts'>
          <h4>Related Posts</h4>
          <b:loop values='data:post.labels' var='label'>
               <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=relpostimgcuplik&amp;max-results=50&quot;' type='text/javascript'/>
          </b:loop>
          <ul id='relpost_img_sum'>
               <script type='text/javascript'>artikelterkait();</script>
          </ul>
</div>
</div>

</b:if>
Change those value depends on you blog content size.
Paste the code after <div class='post-footer'>.


The CSS


  Paste it above ]]></b:skin>. That's it! Then Save it.

Note: Consider the width of your blog's content area/post area. Let's say the blog post area is 500px, change the width  of  ul#relpost_img_sum li to 240px or less/more, this is to make a two column.

Play with CSS to customize it!

Final Words

If you have problem with CSS, just comment below! 

Popular posts from this blog

Add/Subtract Single Digit Number in Assembly Language

Set table width to 100% on PDF export in Datatables