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 == "item"'>
<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/>
<b:if cond='data:blog.pageType == "item"'>
<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
