Membuat Grid Recent Post Berdasarkan Label di Blog

16 September 2016

Recent Post adalah suatu widget yang memunculkan postingan terakhir yang di publish atau di update, nah kali ini saya akan membagikan tutorial cara membuat recent post berdasarkan label di blog yang bertemakan grid. Widget recent post ini sangat cocok digunakan pada blog yang membahas tentang Game Android ataupun Aplikasi Android.

Tampilan Grid Recent Post ini saya buat 2 style agar sobat dapat memilih tampilan yang cocok untuk blog sobat. Tampilan pertama cocok untuk tampilan blog yang simple dan flat, dan tampilan kedua cocok untuk tampilan blog yang menggunakan template dengan desain elegant dan keren dan juga ada tambahan tombol Download (sobat bisa mengganti teks Download dengan teks yang sobat inginkan).

Tampilan yang ke 2 saya buat atas permintaan beberapa sobat blogger yaitu membuat recent post berdasarkan label atau widget grid yang mirip seperti Jalan Tikus.

Demo

Cara Membuat Grid Recent Post Berdasarkan Label

Langkah Pertama buka Blogger > Tata Letak

Tambahkan atau Edit widget HTML/Javascript dan masukan script di bawah ini :

<script>
document.write("<script src=\"/feeds/posts/default/-/Android?orderby=updated&amp;alt=json-in-script&amp;callback=rcentbytag\"><\/script>");
</script>

Ganti Android dengan Label yang ingin sobat munculkan pada Recent Post.

Langkah Kedua buka Template > Edit HTML

Masukan kode Javascript di bawah ini tepat di atas kode </head>

<script type='text/javascript'>
var numposts = 6;
var showpostthumbnails = true;
var showpostdate = false;
</script>
<script type='text/javascript'>
//<![CDATA[
function rcentbytag(e){document.write('<ul class="recent-by-tag">');for(var t=0;t<numposts;t++){var n=e.feed.entry[t];var r=n.title.$t;var i;if(t==e.feed.entry.length)break;for(var o=0;o<n.link.length;o++){if(n.link[o].rel=="replies"&&n.link[o].type=="text/html"){var u=n.link[o].title;var f=n.link[o].href}if(n.link[o].rel=="alternate"){i=n.link[o].href;break}}var l;try{l=n.media$thumbnail.url}catch(h){s=n.content.$t;a=s.indexOf("<img");b=s.indexOf('src="',a);c=s.indexOf('"',b+5);d=s.substr(b+5,c-b-5);if(a!=-1&&b!=-1&&c!=-1&&d!=""){l=d}else l="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghHxDcvaUErK1ZSMhBHMcdU9HvIDKfC8P2Ip5OPE1Hvf9qG8wO1_qRr9byubt8Z2zC6YkuOqniTGy3C9-LeORftFSBVGX4gpt_zfQJ5t4MeeaebOi6v7eTYbfFxrK8yocRFWKX7YwM24Bo/s70-c/KM+Icon.png"}var p=n.published.$t;var v=p.substring(0,4);var m=p.substring(5,7);var g=p.substring(8,10);var y=new Array;y[1]="Januari";y[2]="Februari";y[3]="Maret";y[4]="April";y[5]="Mei";y[6]="Juni";y[7]="Juli";y[8]="Agustus";y[9]="September";y[10]="Oktober";y[11]="November";y[12]="Desember";document.write('<li class="recentlist">');if(showpostthumbnails==true)document.write('<a href="'+i+'" target ="_blank" title="'+r+'"><img class="rct-thumb" alt="'+r+'" src="'+l+'"/></a>');document.write('<strong><a href="'+i+'" target ="_blank" title="'+r+'" rel="nofollow">'+r+'</a></strong>');document.write('<br>');document.write('<a class="btndown" href="'+i+'" target ="_blank">Download</a>');var x="";var T=0;if(showpostdate==true){x='<span class="showdates">'+x+g+" "+y[parseInt(m,10)]+" "+v+"</span>";T=1}document.write(x);document.write("</li>");if(t!=numposts-1)document.write("")}document.write("</ul>")}
//]]>
</script>

Jika sobat ingin mengganti Teks "Download", ganti teks Download yang sudah saya tandai dengan teks tombol yang sobat inginkan.

Langkah Terakhir pilih salah satu Style di bawah ini dan letakan di atas kode ]]></b:skin> atau </style>

Style 1

/* Grid Recent Post by Label */
ul.recent-by-tag{overflow:hidden;padding:0 15px}
.recent-by-tag img{width:100px;height:100px;margin-right:10px;margin-bottom:5px}
.recent-by-tag li{width:100px;margin-bottom:10px;margin-right:12px;text-align:center;list-style:none;padding:11px 18px;background:#f1f1f1;border:1px solid #ddd;float:left;line-height:1.3em!important}
.recent-by-tag li a{list-style:none;color:#555;font-weight:400;font-size:13px!important;width:1-0px;overflow:hidden;text-overflow:ellipsis;display:block;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.recent-by-tag li a:hover,.recent-by-tag li:hover a{color:#f35858!important}
.recent-by-tag .btndown{display:none}
@media screen and (max-width:640px) {ul.recent-by-tag{padding:0;margin-left:10px}}
@media screen and (max-width:480px) {ul.recent-by-tag{margin-left:0}}

Style 2

/* Grid Recent Post by Label */
ul.recent-by-tag{overflow:hidden;padding:0 15px}
.recent-by-tag img{width:80px;height:80px;margin-left:10px;margin-bottom:5px}
.recent-by-tag li{width:100px;margin-bottom:10px;margin-right:12px;text-align:center;list-style:none;padding:11px 18px;float:left;line-height:1.3em!important}
.recent-by-tag li a{list-style:none;color:#111;font-weight:700;font-size:12px!important;overflow:hidden;display:block;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.recent-by-tag .btndown{color:#88c425;font-weight:400;text-transform:uppercase;padding:2px 4px;font-size:11px!important;border:1px solid #88c425}
.recent-by-tag .btndown:hover{color:#fff;background:#88c425}
@media screen and (max-width:640px) {ul.recent-by-tag{padding:0;margin-left:10px}}
@media screen and (max-width:480px) {ul.recent-by-tag{margin-left:0}}

Simpan Template.

UPDATED : 29/09/2016

Lihat Juga : Cara Membuat Recent Post Berdasarkan Label di Blog

Sekian Tutorial yang bisa saya bagikan kali ini, semoga bermanfaat. Terima kasih.

Dunia Blanter