Multi Recent Post by Label di Blogger Tanpa Document Write

Recent post by label dalam Bahasa Indonesia berarti postingan terbaru berdasarkan kategori. Banyak dampak positif yang akan diperoleh jika memasang postingan terbaru berdasarkan kategori di blog Anda.

Salah satunya memudahkan pengunjung dalam menemukan artikel yang sekiranya disukai. Selain itu, tampilan situs juga akan terlihat lebih professional dan tampak menarik.

Tentunya hal tersebut akan berdampak baik pada blog Anda, bahkan dapat meningkatkan jumlah kunjungan setiap harinya.

Dikarenakan banyaknya tutorial dalam pembuatan postingan terbaru berdasarkan label di blog masih menggunakan metode lama, yaitu document.write.

Saya memutuskan untuk memberikan opsi lain dengan cara baru yang lebih efektif dan ramah mesin pencari (SEO Friendly).

Kenapa Harus Menghindari Document.write?

Selain tidak ramah bagi mesin pencari, menggunakan metode document.write juga akan mengurangi kecepatan dalam pengaksesan situs Anda. Hal tersebut dapat mengakibatkan pengunjung kabur sebelum konten dalam situs termuat sepenuhnya.

Dengan demikian situs akan dianggap buruk oleh pengunjung dan mesin pencari sehingga dapat mengakibatkan tingkat bounce rate yang tinggi serta SEO score menurun.

Alternatif Recent Post by Label

Solusi terbaik pada saat ini adalah menggunakan metode lain yang lebih modern. Dilihat dari perkembangan JavaScript yang begitu pesat, terdapat banyak metode yang bisa digunakan dalam pembuatan recent post by label di Blogger.

Pada tutorial ini saya menggunakan metode fetch untuk mengambil dan menampilkan data dari Blogger. Metode ini terbilang jauh lebih baik dibandingkan dengan document.write dan sudah banyak digunakan oleh situs-situs ternama.

Berikut adalah pilihan recent post by label yang sudah saya buat dan dapat di pasang pada blog Anda:

1. List Style

Tampilan terbilang sederhana, menampilkan artikel berdasarkan label dari yang terbaru hingga terlama berurutan dari atas.

CSS List Style, copy kode lalu letakan di bagian Edit HTML sebelum /head.

<style>
.recentari-1{display:block}.recentari-1 ul{list-style:none;margin:0;padding:0}.recentari-1 .listari{margin:10px 0;}
.recentari-1 .listari a{display:flex;flex-direction:row;flex-wrap:nowrap;align-items:center;}
.recentari-1 .listari .thumbari{display:flex;min-width:70px;margin:0}.recentari-1 .listari .thumbari img{border-radius:12px}
.recentari-1 .listari .arititle{font-size:14.5px;font-weight:bold;line-height:1.5em;width:100%;color:#222;margin-left:10px;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;}
</style>

Pengaturan, copy kode lalu letakan di Tata Letak, buat widget HTML/JavaScript.

<div class="recentari-1"/>
<script>/*<![CDATA[*/ const byLabel_1 = {
  targetRecent: '.recentari-1',
  namaLabel: 'Template',
  jumlahPost: 3,
  thumbnailWidth: 80,
  thumbnailHeight: 80
}; document.addEventListener('DOMContentLoaded', () => {recentByLabel(byLabel_1);});
/*]]>*/</script>

2. Grid Style

Style yang berbeda dengan menampilkan berderetan dari kiri ke kanan. Biasa digunakan oleh situs modern yang menyukai tampilan yang banyak artikel.

CSS Grid Style, copy kode lalu letakan di bagian Edit HTML sebelum /head.

<style>
.recentari-2{display:block}.recentari-2 ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:row;flex-wrap:wrap;}
.recentari-2 ul li{width:calc(100% / 3 - 10px);margin:5px}.recentari-2 .listari{margin:0;}
.recentari-2 .listari a{display:flex;flex-direction:column;flex-wrap:wrap;align-items:flex-start;}
.recentari-2 .listari .thumbari{display:flex;width:100%;min-width:70px;margin:0}
.recentari-2 .listari .thumbari img{width:100%;object-fit:cover;border-radius:12px;}
.recentari-2 .listari .arititle{font-size:13px;font-weight:bold;line-height:1.4em;width:100%;color:#222;margin-top:7.5px;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;}@media screen and (max-width:768px){.recentari-2 ul li{width:calc(100% / 2 - 10px);margin:5px}}
</style>

Pengaturan, copy kode lalu letakan di Tata Letak, buat widget HTML/JavaScript.

<div class="recentari-2"/>
<script>/*<![CDATA[*/ const byLabel_2 = {
  targetRecent: '.recentari-2',
  namaLabel: 'Android',
  jumlahPost: 6,
  thumbnailWidth: 250,
  thumbnailHeight: 140
}; document.addEventListener('DOMContentLoaded', () => {recentByLabel(byLabel_2);});
/*]]>*/</script>

3. Story Style

Tampilan yang memanjang secara vertical dan dapat di scroll layaknya seperti fitur Story di Instagram.

CSS Story Style, copy kode lalu letakan di bagian Edit HTML sebelum /head.

<style>
.recentari-3{display:block;overflow-x:scroll;}.recentari-3::-webkit-scrollbar{height:100%;width: 0 !important}
.recentari-3 ul{width:max-content;list-style:none;margin:0;padding:0;display:flex;flex-direction:row;flex-wrap:nowrap}
.recentari-3 ul li{display:flex;width:170px;}.recentari-3 ul li:not(:last-child){margin-right:10px}.recentari-3 .listari{margin:0;}
.recentari-3 .listari a{position:relative;display:flex;flex-direction:row;flex-wrap:nowrap;align-items:center;width:100%;height:100%}
.recentari-3 .listari .thumbari{height:100%;display:flex;min-width:70px;margin:0}
.recentari-3 .listari .thumbari img{height:100%;object-fit:cover;border-radius:12px;}.recentari-3 .listari .arititle{position:absolute;left:10px;bottom:10px;padding-right:5px;font-size:13px;font-weight:bold;text-align:left;line-height:1.4em;color:#fff;text-shadow: 1px 1px 1px #222;margin:0;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;}
</style>

Pengaturan, copy kode lalu letakan di Tata Letak, buat widget HTML/JavaScript.

<div class="recentari-3"/>
<script>/*<![CDATA[*/ const byLabel_3 = {
  targetRecent: '.recentari-3',
  namaLabel: 'iOS',
  jumlahPost: 10,
  thumbnailWidth: 170,
  thumbnailHeight: 300
}; document.addEventListener('DOMContentLoaded', () => {recentByLabel(byLabel_3);});
/*]]>*/</script>

Memasang Widget Recent Post by Label

Seperti judul pada artikel, widget recent post by label ini dapat dipasang sebanyak apapun pada blog Anda tanpa perlu takut loading blog menjadi lambat.

Dikarenakan sudah diatur agar dapat digunakan berulang dengan satu JavaScript ringkas saja. Berikut cara memasang widget recent post by label pada blog di Blogger:

1. Pasang CSS Sebelum /head

Hal pertama Anda perlu memasang CSS yang berfungsi untuk mempercantik tampilan widget. Silakan pilih salah satu atau pasang semua yang sudah disediakan diatas.

Anda dapat meletakkan CSS yang diinginkan pada bagian Edit HTML lalu cari kode /head dan letakan kode diatasnya.

2. Pasang JavaScript Sebelum /body

<script>/* Recent Post by Label, Credit: arikadnyana.com */ 
let urlHomepageRecent =&quot;<data:blog.homepageUrl.canonical/>&quot;;
let noImageRecent =&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyko0G4fZvMB4LP96NdXbmB3_O-aJsUXAs3s9nQsBiB_o6ATpGE1btIOC5fy-WOThjwGyrxJPxp9aN57bAU1kBbb2gZBCydqEV14iTLl8LIqzbLZqTlLFOBiNyvYraXhzPn-MQM-9qVrsfDehHMWurgGL3a3Ggec39B1QBJVumRPATdxVCZuz42LDR/s1600/arikadnyana.jpg&quot;; 
/*<![CDATA[*/ function recentByLabel(e){const{namaLabel:t,jumlahPost:a,thumbnailWidth:n,thumbnailHeight:l}=e,i=document.querySelector(e.targetRecent);fetch(`${urlHomepageRecent}feeds/posts/default/-/${t}?max-results=${a}&alt=json`).then((e=>e.json())).then((e=>{const t=e.feed.entry,c=document.createElement("ul");t.slice(0,a).forEach((e=>{const t=e.title.$t,a=e.media$thumbnail?e.media$thumbnail.url.replace(/\/[w,s][0-9][0-9].*\//g,`/w${n}-h${l}-c-rw/`):noImageRecent,i=e.link.find((e=>"alternate"===e.rel)).href,r=document.createElement("li");r.innerHTML=`<div class="listari"><a alt="${t}" href="${i}"><div class="thumbari"><img alt="${t}" src="${a}" width="${n}" height="${l}"></div><span class="arititle"> ${t}</span></a></div>`,c.appendChild(r)})),i.appendChild(c)})).catch((e=>console.error(e)))} /*]]>*/</script>

Masih di Edit HTML, langkah selanjutnya Anda perlu meletakkan kode JavaScript di atas sebelum kode /body.

Anda dapat merubah bagian noImageRecent dengan url gambar yang hendak ditampilkan jika pada artikel tidak terdapat gambar.

3. Pasang Script Pengaturan di Tata Letak

Selanjutnya pindah ke Tata Letak dan buat widget HTML/JavaScript baru dibagian manapun sesuka hati Anda.

Letakkan kode di Atas pada widget yang telah dibuat, beri judul sesuka Anda lalu simpan.

Selesai, jika Anda mengikuti langkah demi langkahnya dengan benar, maka recent post by label akan tampil sebagaimana mestinya.

Modifikasi Recent Post by Label

Anda dapat memodifikasi agar sesuai dengan kebutuhan dengan cara mengganti targetRecent pada pengaturan dan percantik tampilannya dengan CSS.

Selain itu, Anda juga dapat memodifikasi bagian JavaScript apabila ingin menampilkan data lainnya, seperti: author, tanggal post, label post, deskripsi, dan jumlah komentar.

Anda dapat melihat tampilan lainnya pada Noah Blogger Template yang sudah saya buat dengan JavaScript yang kurang lebih mirip dengan ini.

Akhir Kata

Keunggulan dari widget recent post by label ini adalah dapat digunakan ulang tanpa perlu menulis kode berulang kali. Cukup ganti pada bagian pengaturannya saja, jadi dipasang banyak juga tidak akan membuat loading blog lambat.

Mungkin itu saja yang dapat saya jelaskan pada artikel kali ini, semoga dengan adanya widget multi recent post by label ini dapat meningkatkan kreatifitas para Blogger.

Jangan pernah takut berkreasi karena kreatifitas itu tanpa batas. Sekian dan terima kasih.