Cara Membuat Recent Post Berdasarkan Label di Blogger/Blogspot

Tutorial blogger kali ini tentang cara memasang widet artikel terbaru (recent post) berdasarkan label yang bebas dari render blocking sehingga loading blog tampak lebih ringan. Widget recent post by label ini biasanya digunakan pada template-template yang mengusung tema magazine. Tujuannya untuk memperkaya peletalkkan gadget agar template tampak lebih rame, kayak ibu-ibu pergi belanja ke pasar tradisional.

Selain itu, widget recent post yang hendak saya bagikan ini mempunyai kelengkapatan tertentu. Yaitu, adanya tanggal dan thumbnail/gambar postingan. Script widget recent post by label ini juga sudah disisipkan tag kondisional JavaScript sehingga scriptnya tidak akan tampil pada device-device mobile. Alasan script ini dimasukkan agar ketika pengunjung mengkases blog via mobile, blog tetap ringan alias tidak malu-malu untuk segera menampakkan batang hidungya.

Terkait: Cara Membuat Recent Post Hanya Gambar Valid HTML5

Bagi yang tertarik memasang widget recent post by label ini di blognya, ikuti langkah-langkahnya pada tutorial berikut ini.

Cara memasang widget recent post berdasarkan label dengan tag kondisional JavaScrip

Seperti biasa, silahkan login terlebih dahulu ke blogger dan pilih blog yang akan dibuat widget ini.

#Langkah kesatu
Perhatikan menu pada dasbor blog, lalu klik Template > Edit HTML. Temukan kode </style> atau kode ]]></b:skin> kemudian letakkan kode CSS berikut ini tepat di atas kode tadi.

/* Recent By Label */
.recent-by-tag img {float:left;width:60px;height:60px;margin-right:10px;margin-bottom:17px}
.recent-by-tag li {clear:both;line-height:1.3em !important}
.recent-by-tag li a{list-style:none;color:#555;font-weight:bold;font-size:14px !important}
.recent-by-tag li a:hover,.recent-by-tag li:hover a{color:#f35858 !important}
.recent-by-tag li .showdates{display:inline-block;font-size:10px;font-weight:normal;margin-top:5px;color:#aaa}

#Langkah kedua
Kopi kode di bawah ini dan letakkan di atas kode </head>

<script type='text/javascript'>
var numposts = 5;
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/AVvXsEicudYosW3Hb12NGiIFldMDft15xC4ORYeQGORaSUnXtLCs-8SUnLsN5pVOTwBJxW6-4Zu8PYlrqxeOOv5z3PsV3KQIObQBy1LakbVSAAZ-xgWqW1usb__0h8aTwjmfyxlRlnEnWXhF11CZ/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="clear">');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>');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>

Setelah itu, jangan lupa untuk menyimpan template.

Keterangan:
min-width: 992px ialah batas device kode ini akan ditampilkan. Maksudnya, jika device semakin kecil dari angka 992px maka kode tidak muncul.
var numposts = 5; angka 5 adalah jumlah artikel yang ingin ditampilkan.
var showpostthumbnails = true; kode true untuk menampilkan gambar/thumbnail. Jika thumbnail tidak ingin ditampilkan ganti kode true dengan kode false.
var showpostdate = true; kode true untuk menampilkan tanggal postingan. Ganti dengan kode false jika tidak ingin menampilkannya.

#Langkah ketiga
Yaitu menggunakan kode pemanggil, dengan cara: perhatikan menu pada dasbor, klik Tata Letak > Tambah Gadget > HTML/JavaScript. Lalu pastekan kode berikut ini:

<script>
var mql = window.matchMedia('screen and (min-width: 992px)');if (mql.matches){document.write("<script src=\"/feeds/posts/default/-/SEO?orderby=updated&amp;alt=json-in-script&amp;callback=rcentbytag\"><\/script>");}
</script>

Keterangan:
Ganti kode SEO pada script di atas dengan label yang ingin anda tampilkan pada widget ini.

Demikian, selesai.