Cara Membuat Recent Posts Dibawah Postingan

Assalamu'alaikum, sahabat blogger? Sudah lama juga nih ngga posting artikel. mumpung ada waktu luang, kali ini saya akan berbagi tutorial tentang Cara Membuat Recent Posts Dibawah Postingan. Recent Post ini saya dapatkan dari blognya Mas Dhanie (DTK Blog) , bagaimana Penampilannya, lihat screenshot dibawah ini :

Lumayan Simpel buat mempercantik tampilan blog agan-agan semua.

Oke deh jika tertarik, Ikuti tutorial berikut ini :

• Masuk ke Blogger agan masing-masing.
• Maka akan ada tampilan Dashbord => Klik Template => Edit HTML
• Masukan kode dibawah ini tepat diatas kode ]]></b:skin>

#related_posts { background-color:#fff; margin:0; }
#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:47%; padding:5px; border:1px solid #ddd; transition-duration:2s }
#related_posts li:hover { background-color:#f7f7f7; opacity:0.8; border:1px solid #0070b0; -o-transition:0.6s linear; -ms-transition:0.6s linear; -moz-transition:0.6s linear; -webkit-transition:0.6s linear; transition:all .4s ease-out }
#related_posts .gmbrrltd { background:transparent url(' data:image/gif;base64,R0lGODlhEAAQAPcEAMnJyVdXV5CQkLy8vP///wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH/C05FVFNDQVBFMi4wAwEAAAAh+QQFAAAEACwAAAAAEAAQAAAIUwAHCBxAgICAgwIKBlgYYCBBgwgVMnRYEGFCAgwbDqwYESPDgiBDihxJUiSAkwBKolyZkiRLlCpfthy5sqTNmyZhEqi5U2ZBnjJbAvXZ8+RPlAEBACH5BAUAAAQALAAAAAAQAAoAAAg8AAEIBECAwICDAwoKWChgIEGDCBUydFgQYUICDBsOrBgRI8OCIEOKHEmypMkAKAOYBJlS5UoCLV/CTBkQACH5BAUAAAQALAYAAAAKABAAAAg5AAEIBECAwICDAwYSNIhQYUGECQc+RFiwosWLGDEK2ChAI0ePG0F2zEiyJIEAKANgTKnyIsuVKQMCACH5BAUAAAQALAYAAAAKABAAAAg7AAkIHAigIICBBA0iFGjw4MKGCyNKnDig4oCIFi8uzIjR4sSPAwOIDCBQgEkBI0kSOIlyZMmTKV+aDAgAIfkEBQAABAAsAAAGABAACgAACD0ACQgcSFAggIMACiokgDDhQoINH0JEKLGiRYEBMgYQKKCjAIEDQg7QuJGAx48ERI7UyNEjSJEkW3Z8GTIgACH5BAUAAAQALAAABgAQAAoAAAg7AAMIDECgoMGDBQcSRMhQIcOGAx9KnEiRooCLAgoO2DigIICPADBmJMCxIwGQITFq5OgRpMiVG1t+DAgAIfkEBQAABAAsAAAAAAoAEAAACDoAAwgMQKCgwYEEDRZEqHDhwIYQI0oUQFEAxIoWG2K8WFGiR48DQg4oCKAkAJEjCZg8KZKkSZQuSwYEACH5BAUAAAQALAAAAAAKABAAAAg5AAUIFECAQICDAQYSNIhQYUGECQc+RFiwosWLGAdoHJBxY0eNHzliHEnSIoCTADCiTHlxpUqUGAMCADs=' ) no-repeat 50% 50%; float:left; margin:0 5px 0 0; padding:3px; border:1px solid #0070b0; -moz-box-shadow:0 1px 3px rgba(58,58,58,0.06),0 1px 2px rgba(54,54,54,0.21); -webkit-box-shadow:0 1px 3px rgba(58,58,58,0.06),0 1px 2px rgba(54,54,54,0.21); box-shadow:0 1px 3px rgba(58,58,58,0.06),0 1px 2px rgba(54,54,54,0.21); -moz-border-radius:2px; -webkit-border-radius:2px; border-radius:2px; -o-transition:0.6s linear; -ms-transition:0.6s linear; -moz-transition:0.6s linear; -webkit-transition:0.6s linear; transition:all .4s ease-out }
#related_posts .gmbrrltd:hover { border:1px solid #860000; transition-duration:2s }
#related_posts strong { font-family:Yanone Kaffeesatz; font-weight:normal; font-size:18px; line-height:1.1em }
#related_posts p { margin:2px 0 0; font-size:11px }
.loadingxx { width:100%; min-height:150px; background:transparent url(data:image/gif;base64,R0lGODlhEAAQAPcEAMnJyVdXV5CQkLy8vP///wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH/C05FVFNDQVBFMi4wAwEAAAAh+QQFAAAEACwAAAAAEAAQAAAIUwAHCBxAgICAgwIKBlgYYCBBgwgVMnRYEGFCAgwbDqwYESPDgiBDihxJUiSAkwBKolyZkiRLlCpfthy5sqTNmyZhEqi5U2ZBnjJbAvXZ8+RPlAEBACH5BAUAAAQALAAAAAAQAAoAAAg8AAEIBECAwICDAwoKWChgIEGDCBUydFgQYUICDBsOrBgRI8OCIEOKHEmypMkAKAOYBJlS5UoCLV/CTBkQACH5BAUAAAQALAYAAAAKABAAAAg5AAEIBECAwICDAwYSNIhQYUGECQc+RFiwosWLGDEK2ChAI0ePG0F2zEiyJIEAKANgTKnyIsuVKQMCACH5BAUAAAQALAYAAAAKABAAAAg7AAkIHAigIICBBA0iFGjw4MKGCyNKnDig4oCIFi8uzIjR4sSPAwOIDCBQgEkBI0kSOIlyZMmTKV+aDAgAIfkEBQAABAAsAAAGABAACgAACD0ACQgcSFAggIMACiokgDDhQoINH0JEKLGiRYEBMgYQKKCjAIEDQg7QuJGAx48ERI7UyNEjSJEkW3Z8GTIgACH5BAUAAAQALAAABgAQAAoAAAg7AAMIDECgoMGDBQcSRMhQIcOGAx9KnEiRooCLAgoO2DigIICPADBmJMCxIwGQITFq5OgRpMiVG1t+DAgAIfkEBQAABAAsAAAAAAoAEAAACDoAAwgMQKCgwYEEDRZEqHDhwIYQI0oUQFEAxIoWG2K8WFGiR48DQg4oCKAkAJEjCZg8KZKkSZQuSwYEACH5BAUAAAQALAAAAAAKABAAAAg5AAUIFECAQICDAQYSNIhQYUGECQc+RFiwosWLGAdoHJBxY0eNHzliHEnSIoCTADCiTHlxpUqUGAMCADs=) 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 }
.post-body h4 {background-color:#f7f7f7; color:#333; border-bottom:2px solid #888; font-size:17px; line-height:1em; font-family:Segoe UI; text-align:center; margin-top: 10px; margin-bottom: 1px}

•  Setelah itu, masukan kode dibawah ini sesuai selera agan-agan sekalian. cari saja kode <data:post.body/> Lalu sesuaikan aja sesuai keinginan.

<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",readMoretext:"Read more",rlpBlank:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaSbCZ3PCxj-bbF3rXE7C7rwi3rD5yaYVWlxVqpq99dH1adKKw7xdb3hBqL5SiDpWt-d-_mJpZcO5E6Mjmi81yoreKkpUdRD0nvZVAKlN0UnE37KY-opyIMzYhl6lzxu2ttSv-qjYRfBk/s70-c/20.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: 4,
loadingClass: "loadingxx",
rlt_thumb: 50
});
//]]>
</script>
</b:if>

•  Lalu Klik Save Template.

Oke, Cukup Sekian Tutorial Kali ini. Semoga Berhasil :)

Bila ada kesalahan mohon Silakan klik tombol Komentar di bawah :)