List style related posts widget with thumbnail and Summary for Blogger

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.
List style related posts widget with thumbnail and Summary for Blogger
4 Stars stars - "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 ...

Post a Comment

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..

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. :)

Hello Bro Please share about tab bar want it for my site thanks

sorry brother i can;t use it .please help me

what error have u got in template?

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

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.

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

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

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


I have noticed the page you're on is also listed in the related posts? #duplicate?

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



Facebook Group Community Disqus Channel Code ConverterHide Code Converter Show EmoticonHide Emoticon

Got questions? Ask ’em below! While we’re here, you might like to give any feedback about this Post, Your comment inspire us to continuous Improvement of This Blog and Contents. Your words are your own, so be nice and helpful if you can. Please, only use your REAL NAME, not your business name or keywords. Using business name or keywords instead of your real name will lead to the comment being deleted. Anonymous commenting is not allowed either. Limit the amount of links submitted in your comment. We accept clean XHTML in comments, but don't overdo it please.

Make sure you tick the Notify Me box below the comment form to be notified of follow up comments and replies. Thank you for commenting

Contact Form


Email *

Message *