Membuat Related Post Thumbnail Responsive Ringan!

Tutorial cara membuat widget artikel terkait di blog ?, widget tersebut berfungsi untuk menampilakan artikel yang berkaitan dengan kategori atau artikel yang kita baca dan salah satu faktor SEO one page blogspot. Bila menggunakan template blog yang responsive tentu harus menggunakan widget yang responsive pula demi kenyamanan pengunjung saat di blog anda, sebetulnya responsive saja tidak cukup jika tidak disertai kata "ringan" pada widget yang digunakan pada blog. Banyak keuntungan jika menggunakan widget yang ringan tetapi tetap keren dan profesional kelihatannya.

Related post yang sekarang dishare sudah saya coba baik itu lewat komputer atau via mobile, dan alhasil memuaskan untuk template blog ini :D.  Widget artikel terkait ini sudah saya coba di browser mozilla, google chrome, internet explorer, avant browser, dan tentunya opera dan memang responsive.

Berikut cara memasang Widget Related Post Thumbnail Responsive!

• Masuk akun blogger, selanjutnya pada dashboard pilih menu » Template » Edit HTML
• Copy dan paste kode dibawah ini, Tepat dibawah ]]></b:skin>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style>
/* css related posts */
#related_posts { 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 }
#related_posts 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:#888 }
#related_posts ul,#related_posts li { overflow:hidden; padding:0; margin:0; list-style:none }
#related_posts ul { margin-top:10px }
#related_posts li { float:left; width:100%; margin:0 0 5px}
#related_posts .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 }
#related_posts strong { font-weight:normal; font-size:15px; line-height:1.1em }
#related_posts p { margin:2px 0 0; font-size:12px }
.loadingxx { width:100%; min-height:150px; background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7nRV8H5S9ONqGMUkUx10Kt_LRSEm84_s3hZrD7JKFEwgR8DCY6gVfoaRk8vyU-DjvIMhgQXq27g-6jPXetjEPZneJBGlnzfdoHZDPycbxoLN-dPgB1sBhlIVuNr9KvVeasm_bROjib78/h92/loading-dip.gif) no-repeat center; display:block; text-indent:-9999px }
.kotak-dalem { background-color:transparent; padding:0; -moz-box-shadow:none; -webkit-box-shadow:none; box-shadow:none; border:none; margin-bottom:0 }</style></b:if>

• Selanjutnya copy kode dibawah ini dan paste tepat dibawah <data:post.body/>
  
  jika terdapat kode <data:post.body/> lebih dari dua maka cari yang paling bawah atau kode yang kedua. Jika pada template ini ada 4 <data:post.body/> dan saya pasang di paling akhir yaitu ke-4.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related_posts'/>
<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:100,relatedTitle:"Related Posts<data:post.title/>",readMoretext:"Read more",rlpBlank:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7FJBTVS0NzApQfNkYFLNFL4Wms2Xk3_9irxLpMwD7QcQVW6He8hTAkHkI1NC6zMRJgres2ft0AKOa6pYFojnAyZApyW8FM7ehW3e1DUtScESS2uQXavAZzJ5UdXc383bOTb_KDZsY8dQ/h120/20Blogger.jpg",rlt_thumb:55,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="related_posts"></div>');f.containerSelector="#related_posts"}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("#related-posts-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!="#related_posts"){var l=e(f.containerSelector);if(l.length!=1){return}b=e('<div id="related_posts"></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="related-posts-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: "#related_posts",
maxPosts: 5,
loadingClass: "loadingxx",
rlt_thumb: 50
});
//]]>
</script>
</b:if>

Warna orange merupakan background related post, sedangkan warna hijau adalah jumlah post yang ditampilkan, silahkan ganti sesuai keingingan anda.
Sampai disini sudah jadi widget artikel terkaitnya ?, jika belum dibawah ini video tutorial membuat widget related post :D

Video Tutorial Memasang Dan Membuat Related Post Responsive Blogspot

Sekian semoga tutorial cara membuat widget related post responsive ini bermanfaat :D