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 Membuat Recent Post Berdasarkan Label

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="http://2.bp.blogspot.com/-giova1ZCh-A/Uzq6L8QTJNI/AAAAAAAAAJc/USXictTq_xs/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.
Niagahoster
Starts from
$2.5
/Month

Vultr

Read Review
  • One-click installation of 20+ apps
  • Available 17 worldwide locations
  • 100% local SSD and high performance Intel CPUs
  • Infinite OS combinations
Visit Site
Gunakan link di atas untuk saldo akun $100 gratis
Niagahoster
Mulai dari
Rp10K
/Bulan

Niagahoster

View Details
  • Free SSL Certificate
  • Garansi 30 hari
  • Free domain & website migration
  • Tersedia unlimited disk space (shared hosting, kecuali paket bayi)
Visit Site
Diskon unlimited hosting hingga 75%
Niagahoster
Mulai dari
Rp15K
/Bulan

IDCloudHost

View Details
  • Free SSL Certificate
  • LiteSpeed Enterprise dan Load Balancer
  • Unlimited Email
  • cPanel Control Panel
Visit Site
Tersedia Cloud VPS termurah, hanya Rp68 /jam
Free and premium blogger templates