How to add List style related posts widget with thumbnail and Summary for Blogger blog

How to add List style related posts widget with thumbnail and Summary for Blogger blog Related post widget is useful to get more page v...

How to add List style related posts widget with thumbnail and Summary for Blogger blog

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.

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 http://naijaexploits.blogspot.com */
#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(http://2.bp.blogspot.com/-bL-eL_VIl2A/UoHFt0i8-wI/AAAAAAAAFI8/vn7h5nIbz6A/s1600/bs+loading+dot.gif) 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='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' 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'>//<![CDATA[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:"http://3.bp.blogspot.com/-ciCUurobkhg/UoCtFhXRBuI/AAAAAAAAFIs/9FbIqQZ3KfU/s1600/BS+No+Image+White.png",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<r.link.length;m++){if(r.link[m].rel=="alternate"){p=r.link[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 s=r.media$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+"//"+window.location.host:f.blogURL)+"/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+"//"+window.location.host:f.blogURL)+"/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)};relatedPostsWidget({related_title: "Related Posts",containerSelector: "#BloggerSpiceRP",maxPosts: 4,loadingClass: "loadingxx",rlt_thumb: 70});//]]></script><div class='clear'/>  </b:if>

 Step 9 Now save your template

CUSTOMIZATION

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.



COMMENTS

BLOGGER
Name

Acronyms,1,Ads Ready,1,Adsense,1,Adserver,1,airtel,2,android,22,Apps,4,Auto Loader,19,backup,1,Bank,1,BB10,1,better,1,bios,1,blackberry,24,Blogger,11,blogger jquery,12,Blogger Template,3,blogger tips,12,Blogger Widget/Gadget,13,Bluetooth,1,BOIS Update,1,browser,2,Bug,1,business,3,CAD,1,capability,1,Career Development,2,Celebrate,1,chat,1,cloud computing,1,code,1,comment,2,computer,13,crack,17,crash,1,css,3,cure,1,CV,18,data,2,delete,1,Diamond Bank,2,download,32,email,6,ESPN,1,etisalat,2,Facebook,2,Feedburner,1,Firmware,3,Flash File,27,Flash Games,3,Flashing,3,For Seniors,2,free-up space,1,Freebies and Giveaways,2,FTP,1,Galaxy,2,games,5,glo,2,good,1,Google,8,Google Affiliate,1,Google Drive,1,Google Photos,1,Google Play Store,3,Google+.,1,great,1,GTA,4,guide,3,hacks,7,handle,1,Hard drive,2,HDD,1,how to,10,HTC,2,html,1,Huawei,1,ict,4,India,1,INEC,1,Infinity Best,1,Innovation,1,Intel,1,internet,6,internet explorer,1,iOS,2,ipad,4,iphone,7,Itel,1,java script,6,Jetpack,1,keyboard,8,know,3,Label,3,Laptop,1,Learning,12,LG,2,Lollipop,2,Mac,2,Management,1,Marriage,1,Mediafire,1,meeting,1,message,12,Microsoft,5,Microsoft excel,2,mobile,7,Mobile Phones Specifications,1,mobility,2,money,1,Motorola,1,Movie,1,Mozilla Firerfox,1,MS Word,1,MTK,2,mtn,4,music,1,need,1,Networking,1,NOBLE NOKIA INFO,9,Nokia,4,notebook,1,passwords,1,PayDirect,1,PayPal,1,PC,7,PC Games,45,PC mgazine,6,PC Tricks,3,pc-crash,1,PDF,1,Personal Productivity,4,Phone,3,photo shop,1,Play Station,9,Plugin,1,post,2,Premium Blogger Template,1,protect,3,ProtectTool,1,Racing Game,2,reasons,1,Responsive,1,Root,2,sagem,1,samsung,11,save,1,secrets,1,secure,4,security,9,security Enhancements,5,Server,1,shell-coding,1,shortcut,21,Simple Server,1,SmartsmsSolutions,2,SMS,6,social community,3,Sony,2,Spreadtrum,1,SSD,1,steps,1,Stock Rom,2,Symbian,1,Sync,2,Tablet PC,3,Talent,1,TECH_WORLD,2,Techniques,3,technology,3,technology tips,26,Tecno,7,template hacks,1,Theme,1,tips,19,transmissions,1,Tutorial,3,tutorials,28,types,1,USB Driver,1,users,1,Video,1,Virus,1,Visa Card,1,Volcano Box,8,Vote,1,WAP WORLD,8,Whatsapp,1,windows,11,Windows 10,2,Windows 7,1,Windows 8,1,windows mobile,1,Windows Phone,2,Windows Phone Store,2,windows xp,5,word of life,11,Wordpress,3,work place skills,7,WPTouch Mobile Plugin,1,Xbox,2,zain,1,Zenith Bank,1,
ltr
item
NOBLE ICT EXPLOITS ZONE™: How to add List style related posts widget with thumbnail and Summary for Blogger blog
How to add List style related posts widget with thumbnail and Summary for Blogger blog
http://2.bp.blogspot.com/-CCf-6OrxwU8/Vp08RQ3ZobI/AAAAAAAAI_Q/NyWG0FFw484/s320/RELATED%2BPOST.PNG
http://2.bp.blogspot.com/-CCf-6OrxwU8/Vp08RQ3ZobI/AAAAAAAAI_Q/NyWG0FFw484/s72-c/RELATED%2BPOST.PNG
NOBLE ICT EXPLOITS ZONE™
https://naijaexploits.blogspot.com/2015/10/how-to-add-list-style-related-posts.html
https://naijaexploits.blogspot.com/
https://naijaexploits.blogspot.com/
https://naijaexploits.blogspot.com/2015/10/how-to-add-list-style-related-posts.html
true
4058378300189517969
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS CONTENT IS PREMIUM Please share to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy