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
VPS 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
DigitalOcean
VPS Starts from
$5
/Month

DigitalOcean

Read Review
  • Deploy custom image, RDP, 1-Click App, or standard distribution
  • Flexibility and scalability
  • Fantastic average uptime of 99.99%
  • Infinite OS combinations (Linux and Windows)
  • Developer-friendly tools and APIs
Visit Site
Topup $25 to gets $100 in credit over 60 days with refer link above
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
VPS mulai dari
Rp68
/Jam

IDCloudHost

View Details
  • One-Click Deploy
  • Lokasi server Indonesia termurah
  • Instal berbagai Control Panel, VM, OS dan aplikasi
  • Menghubungkan dengan API
Visit Site
Dapatkan free credit Rp50K dengan minimal topup Rp50K

Komentar telah ditutup dan disembunyikan. Jika ada yang perlu disampaikan silahkan kirim pesan lewat laman kontak.