List style related posts widget with thumbnail and Summary for Blogger


Related post widget is useful to get more page view from your visitors. Generally we add this widget at the bottom of the every blog post's body. After reading an article visitors may feel interest to read about similar article. So related post work best in this situation.  I have already shared related posts widget with wide thumbnails but in this time I am going to share List style related posts widget  with thumbnail and Summary. This related post widget will display your blog related post in list view with 70px X 70px image thumbnail. As well as 2 line summary of the related posts. This related post widget is very fast in loading and you can change the Related pots header color. The coding has made with pure CSS. So I hope you will like it.

similar posts

To install this related posts widget please follow the below simple steps-

Step 1 Log in to your blogger account and Click on Template  ->

Step 2 Now click on Edit HTML-> Unfold code  

Step 3 Now find ]]></b:skin> by Pressing Ctrl+F   

Step 4 And Paste the below code above ]]></b:skin> and save your template

/* CSS Related posts by */
#BloggerSpiceRP { background-color:#FFF; margin:10px 0 0 0; padding:10px; -moz-box-shadow:inset 0 0 1px #000000; -webkit-box-shadow:inset 0 1px 1px #000000; box-shadow:inset 0 0 1px #000000 }
#BloggerSpiceRP h4 { color:#fff; font-size:15px; margin:-10px -10px 10px; padding:5px 3px; text-align:center; font-weight:bold; -moz-text-shadow:2px 0 0 #333; -webkit-text-shadow:2px 0 0 #333; text-shadow:2px 0 0 #333; position:relative; background-color:#00B4FF }
#BloggerSpiceRP ul,#related_posts li { overflow:hidden; padding:0; margin:0; list-style:none }
#BloggerSpiceRP ul { margin-top:10px }
#BloggerSpiceRP li { float:left; width:100%; margin:0 0 5px}
#BloggerSpiceRP .gmbrrltd { background-color:#f7f7f7; float:left; margin:0 5px 0 0; padding:3px; border:1px solid #ddd; -moz-border-radius:2px; -webkit-border-radius:2px; border-radius:2px }
#BloggerSpiceRP strong { font-weight:bold; font-size:15px; line-height:1.1em }
#BloggerSpiceRP p { margin:2px 0 0; font-size:12px }
.loadingxx { width:100%; min-height:150px; background:transparent url( no-repeat center; display:block; text-indent:-9999px }

Optional Step

Step 5 Now find </head> by Pressing Ctrl+F   

Step 6 And Paste the below code above </head> and save your template

<script src='' type='text/javascript'/>

Note: if you already added this JS code in your template then don't follow  step Optional step.

Step 7 Now find <div class='post-footer-line post-footer-line-1'> or <div class='post-footer-line post-footer-line-2'> by PressingCtrl+F   

Step 8 And Paste the below code after/below <div class='post-footer-line post-footer-line-1'> or <div class='post-footer-line post-footer-line-2'> 

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='BloggerSpiceRP'/>
<script type='text/javascript'>
function relatedPostsWidget(a){(function(e){var f={blogURL:"",maxPosts:5,maxTags:5,maxPostsPerTag:5,containerSelector:"",tags:null,loadingText:"",loadingClass:"",relevantTip:"",rlt_summary:150,relatedTitle:"Related Posts",readMoretext:"Read More",rlpBlank:"",rlt_thumb:70,recentTitle:"Recent Posts",postScoreClass:"",onLoad:false};f=e.extend({},f,a);var k=0,b=null,g=null;if(!f.containerSelector){document.write('<div id="BloggerSpiceRP"></div>');f.containerSelector="#BloggerSpiceRP"}var c=function(t,n){k++;if(t.feed.entry){for(var o=0;o<t.feed.entry.length;o++){var r=t.feed.entry[o];var p="";for(var m=0;m<;m++){if([m].rel=="alternate"){[m].href;break}}if("content" in r){var l=r.content.$t}else{if("summary" in r){var l=r.summary.$t}else{var l=""}}var l=l.replace(/<\S[^>]*>/g,"");if(l.length>f.rlt_summary){var l=l.substring(0,f.rlt_summary)+"..."}var q=r.title.$t;if("media$thumbnail" in r){var$thumbnail.url.replace(/\/s[0-9]+\-c/g,"/s"+f.rlt_thumb+"-c")}else{var s=f.rlpBlank}if(location.href.toLowerCase()!=p.toLowerCase()){i(p,q,s,l)}}}if(k>=f.tags.length){g.attr("class","");e("#BloggerSpiceRP-loadingtext",b).remove();if(f.maxPosts>0){e("li:gt("+(f.maxPosts-1)+")",g).remove()}}};var i=function(p,s,u,l){var q=e("li",g);for(var o=0;o<q.length;o++){var t=e("a",q.eq(o));var r=j(t);if(t.attr("href")==p){h(t,++r);for(var n=o-1;n>=0;n--){var m=e("a",q.eq(n));if(j(m)>r){if(o-n>1){q.eq(n).after(q.eq(o))}return}}if(o>0){q.eq(0).before(q.eq(o))}return}}g.append('<li><a class="jdlunya" href="'+p+'" title="'+(f.relevantTip?f.relevantTip.replace("\d",1):"")+'"><span class="gmbrrltd"><img style="width:'+f.rlt_thumb+"px;height:"+f.rlt_thumb+'px;display: block" alt="'+s+'" src="'+u+'"/></span><strong>'+s+"</strong></a><p>"+l+'<a target="_blank" title="'+s+'" href="'+p+'">'+f.readMoretext+"</a></p></li>")};var j=function(l){var m=parseInt(l.attr("score"));return m>0?m:1};var h=function(l,m){l.attr("score",m);if(f.relevantTip){l.attr("title",f.relevantTip.replace("\d",m))}if(f.postScoreClass){l.attr("class",f.postScoreClass+m)}};var d=function(){if(f.containerSelector!="#BloggerSpiceRP"){var l=e(f.containerSelector);if(l.length!=1){return}b=e('<div id="BloggerSpiceRP"></div>').appendTo(l)}else{b=e(f.containerSelector)}if(!f.tags){f.tags=[];e('a[rel="tag"]:lt('+f.maxTags+")").each(function(){var n=e.trim(e(this).text().replace(/\n/g,""));if(e.inArray(n,f.tags)==-1){f.tags[f.tags.length]=n}})}if(f.tags.length==0&&!f.recentTitle){return}if(f.tags.length==0){e("<h4>"+f.recentTitle+"</h4>").appendTo(b)}else{if(f.relatedTitle){e("<h4>"+f.relatedTitle+"</h4>").appendTo(b)}}if(f.loadingText){e('<div id="BloggerSpiceRP-loadingtext">'+f.loadingText+"</div>").appendTo(b)}g=e("<ul "+(f.loadingClass?'class="'+f.loadingClass+'"':"")+"></ul>").appendTo(b);if(f.tags.length==0){e.get((f.blogURL===""?window.location.protocol+"//""/feeds/posts/summary?max-results="+f.maxPostsPerTag+"&orderby=published&alt=json-in-script",c,"jsonp")}else{for(var m=0;m<f.tags.length;m++){e.get((f.blogURL===""?window.location.protocol+"//""/feeds/posts/summary/-/"+f.tags[m]+"?max-results="+f.maxPostsPerTag+"&orderby=published&alt=json-in-script",c,"jsonp")}}};if(f.onLoad){e(window).load(d)}else{e(document).ready(d)}})(jQuery)};
related_title: "Related Posts",
containerSelector: "#BloggerSpiceRP",
maxPosts: 4,loadingClass: "loadingxx",
rlt_thumb: 70
<div class='clear'/>

Step 9 Now save your template


  • Alter #00B4FF this color code for Related Posts header background color.
  • Change digit maxPosts: 4, for the number of post display.
  • Change digit rlt_summary:150 for the related posts summary length.

To see the related posts widget please visit your blog posts. It will appear at the end of every blog articles.


  1. MM Nauman
    Hello Bro How Are You ????? I Need Your Help I want archive, comments, populars like your's i tried to create but it is not happening so please give me the script to create and your site is loading very fast great to see this..
    • BloggerSpice
      Brother Nauman,,I am still learning from an Indonesian Blog developer..The coding of this template is totally different and Customized.Still has some bugs in this template. I am trying to fix it..But if you just try to get code from view source code option then it won't work. However I will share about tab bar. :)
    • MM Nauman
      Hello Bro Please share about tab bar want it for my site thanks
  2. Md. Faysal Alam Riyad
    sorry brother i can;t use it .please help me
    • BloggerSpice
      what error have u got in template?
  3. Unknown
    Hi, While, i was reading this article,
    I noticed that your previous/ next navigation bar under the post
    works perfectly. however I have the same thing but mine
    shows my entire article instead of the specific label..
    how could I fix this?

    please help me, my blog is

    thank you
    • BloggerSpice
      Hi Jeon I think your template is working fine. If you have published few post under one label then it will happen. Your template designer is Uong Jowo..and he is the best template designer. This template has converted by WordPress. You can directly shoot question to Uong Jowo..he will help you to fix the problem.Thanks.
    • Unknown
      Hi, thank you for your answer.
      however, the previous /next bar under the article
      is not his widget... and the person who made the widget doesn't answer... could you please help me?

      I think the class name is not right,,,but i am not sure what else i need to put,, right now it is .post. h1~ something.

      and it is not a few post,,, for the part that has 31 article, it is same.....

      please help me out
    • Unknown
      oh! I figured out,, it works now ^^

      Thank you so much! and I really appreciate it.

      and could you please also help me on

      the navigationm bar with number?

      the widget was updated and the widget maker explained to me on how to update it,but
      I followed,,, it doesn't work...

      I will send you a message, please check.
      thank you
    • BloggerSpice
      Hi is nice to hear that your Next and Previous button working well. In terms of pagination to make it work remove all the code like below.


      You will find 7 or 8 times this code so remove all the code and apply pagination then. And before deleting the code take a backup of your template. Thanks
  4. Dennis van Leeuwen

    I have noticed the page you're on is also listed in the related posts? #duplicate?
  5. BloggerSpice
    Hi Dennis..I have seen this issue before. When there are limited post under a Blog Label then Duplicate post may appear. But Duplicate related post won't appear all the time. Thanks
  6. Editorial Team
  7. Editorial Team
  8. Thank you! Brother. Ye problem kahi se bhi solve nhi ho rahi thi. Finally aapka code use karke ye problem solve ho gayi. Thank you again.
    • BloggerSpice
      Hi Hindi Study :)
      I am very glade to hear that. Thank you.
  9. Thank you very much for the valuable advice.
  1. To insert a code use <i rel="pre">code_here</i>
  2. To insert a quote use <b rel="quote">your_qoute</b>
  3. To insert a picture use <i rel="image">url_image_here</i>
Go Up