Widget Recent Post Blogger Tanpa Document Write

"Cara mudah membuat widget postingan terbaru atau recent post di Blog, ringan, tanpa document write, sehingga ramah skor Core Web Vital."

YZG 06 Januari 0

Cara membuat widget recent post ringan di Blog, bagi para sobat blogger pastinya akrab dengan widget yang satu ini, karena memang telah banyak tutorial yang membahas bagaimana cara memasang widget postingan terbaru di Blogger.

Pada kesempatan kali ini CatatanDroid akan mencoba membagikan kepada sobat pembaca setia semua tips Blogger cara mudah membuat widget artikel terbaru yang ringan dan anti document write. Penasaran kan? Yuk disimak!

Apa itu Recent Post Widget?

Recent post widget adalah widget yang berisikan list artikel atau postingan terbaru yang terdapat di blog kita. Widget postingan terbaru ini bisa sangat bermanfaat untuk menjaga nilai Bounce Rate.

Dengan hadirnya daftar postingan terbaru di sidebar ini para pengunjung tentunya akan mengetahui artikel paling update dari blog kita, sehingga besar kemungkinan mereka untuk membacanya akan semakin terbuka lebar.

Widget Recent Post Ringan Ramah Core Web Vital

Namun tahukah sobat bahwa hampir semua tutorial yang ada memiliki 1 kekurangan fatal yang sama, yakni tidak lolos auditor page speed insight web dev. Tepatnya pada kategori Performance akan muncul error merah bertuliskan:

Avoid document.write()
For users on slow connections, external scripts dynamically injected via `document.write()` can delay page load by tens of seconds.

Bagi sobat blogger yang sangat mementingkan nilai core web vital tentunya hal ini sangat mengganggu, sekecil apapun hal yang menjadi faktor buruknya skor cwv ini sebisa mungkin kita kurangi dan cari solusinya.

Daripada berlama-lama lagi yuk langsung saja kita lakukan prakteknya!

Sebelum melakukan tutorial perubahan Template Blogger harap lakukan Backup template terlebih dahulu untuk berjaga-jaga.

Cara Memasang Widget Postingan Terbaru

Pertama-tama buka Blogger.com dan login dengan akun blog sobat
Buka menu Theme lalu pilih Edit HTML

Cari ctrl+f /b:skin pastekan kode CSS berikut ini tepat diatasnya

<style type="text/css">
/* Recent Posts CatatanDroid */
#recent-ctd{color: inherit;counter-reset: section;}
.recents-ctd{margin: 0 auto 2px;width: -webkit-fill-available;box-shadow: 0 0px 1px 0 rgb(0 0 0 / 10%);padding: 10px 15px;transition: all .2s;background: #ffffff;}
.recents-ctd::before{counter-increment: section;content: counter(section,decimal-leading-zero);color: #000;opacity: .2;font-weight: 700;font-size: 1.1em;min-width: 28px;position: absolute;}
.recents-ctd h3{margin: -5px 0 -10px 2em;text-align: left;font-size: 1em;}
.recents-ctd a{display: block;padding: 5px 1em 10px 0;}
body.darkmode .recents-ctd{background:#323232}
body.darkmode .recents-ctd::before{color: #fff;opacity: .2;transition: all .2s;}
</style>

Lanjut cari /body pastekan kode JavaScript berikut ini tepat diatasnya

<script type="text/javascript">
//<![CDATA[
let url = "https://www.catatandroid.com/",
jumlahpost = 4;
eval(function(p,a,c,k,e,d){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--){d[e(c)]=k[c]||e(c)}k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c])}}return p}('o n(d){k(5.c("f-7")){2 4=d.z.y,1,3,6="",l=5.c("f-7");i(2 s=0;s<9;s++){i(2 g=0;g<9;g++){k(4[s].3[g].j=="x"){3=4[s].3[g].h;w}}2 1=4[s].1.$t;6+=\'<b q="r-7"><e><a h="\'+3+\'" 1="\'+1+\'" G="N" j="O">\'+1+\'</a></e></b>\'}l.I=6}}2 8=5.L(\'m\');8.Q=P+\'/u/R/J?H=F-K-m&M=C&E-v=\'+9+\'&p=n\';5.B(\'A\')[0].D(8);',54,54,'|title|let|link|rltd|document|content|ctd|ctdscrpt|jumlahpost||div|getElementById|ctdrltd|h3|recent||href|for|rel|if|ctdcont|script|PostingTerbaru|function|callback|class|recents|||feeds|results|break|alternate|entry|feed|body|getElementsByTagName|published|appendChild|max|json|target|alt|innerHTML|summary|in|createElement|orderby|_blank|nofollow|url|src|posts'.split('|'),0,{}))
//]]>
</script>

Save Template dan kembali ke Dashboard utama blogger
Buka menu Layout, tambahkan widget baru (Add a gadget) pada sidebar
Pilih widget HTML/JavaScript pastekan kode dibawah ini
```
<div id="recent-ctd"></div>
```
Save widget dan lihat hasilnya

Selamat, kita telah berhasil memasang widget Recent post di blog! Silahkan lihat pada kolom sidebar blog kita akan muncul widget baru berisikan daftar artikel terbaru yang telah kita posting di blog.

tampilan widget recent post di blog CatatanDroid

Demo Widget Recent Post CatatanDroid

Cek dan lakukan perubahan css sesuai keinginan jika dirasa ada yang kurang pas bagi sobat semua, lakukan juga tes di web dev untuk memastikan error document write telah benar-benar hilang.

Penutup dan Kesimpulan

Sebelum mengakhiri artikel kali ini terimakasih kepada blog Jagoankode yang menjadi reverensi dalam kode javascript yang dipakai pada tips blog ini, CatatanDroid melakukan perubahan pada:

Metode list ul li menjadi div
Menambahkan tag h3 pada title
Merubah counter decimal diawali 0
Pergantian css untuk menyesuaikan tema

Bagaimana sobat apakah berhasil diterapkan juga pada blog kalian? Akhir kata semoga artikel tips widget blog recent post ini dapat bermanfaat bagi sobat yang membutuhkan. Terima kasih dan Selamat mencoba! CatatanDroid