Cara Buat Widget Artikel Terbaru yang Menarik dan Kekinian di Blogspot

Beni Subianto

Desember 26, 2025

Fara bikin widget costum artikel terbaru

BeniSubianto.web.id - Blog yang hidup itu bukan cuma soal artikel bagus, tapi juga soal tampilan yang bikin betah. Salah satu elemen kecil tapi berdampak besar adalah widget Artikel Terbaru.

Nah, di artikel ini kita akan bahas Cara buat widget Artikel Terbaru yang tampil modern, visualnya kuat, dan pastinya cocok buat Blogspot. Bukan widget kaleng-kaleng, tapi Costum script Artikel Terbaru yang bisa kamu atur sendiri sesuai kebutuhan.

Anggap saja ini upgrade dari widget standar ke versi “enterprise-ready”. Yuk langsung kita breakdown satu per satu.

Apa Itu Widget Artikel Terbaru dan Kenapa Penting?

Widget Artikel Terbaru adalah komponen di sidebar atau area tertentu blog yang menampilkan postingan paling baru secara otomatis.

Fungsinya bukan sekadar pajangan. Widget ini punya beberapa misi strategis:

Meningkatkan pageview
Mengurangi bounce rate
Mengarahkan pembaca ke konten fresh
Membuat blog terlihat aktif dan profesional

Kalau diibaratkan dalam dunia korporat, widget ini adalah frontliner yang nyapa pengunjung pertama kali.

Preview Singkat Widget Artikel Terbaru Ini

Dari script yang kamu lihat di atas, widget ini punya beberapa keunggulan utama:

Artikel pertama tampil sebagai featured post
Thumbnail besar dan visual-friendly
Artikel lain tampil rapi dengan thumbnail kecil
Responsive dan ringan
Auto update dari feed Blogspot

Intinya: simple, clean, dan conversion-oriented.

Struktur Utama Script Widget Artikel Terbaru

Sebelum eksekusi, kita pahami dulu arsitektur script-nya. Jangan khawatir, bahasanya manusiawi.

1. Bagian CSS (Tampilan Visual)

Bagian <style> bertanggung jawab penuh terhadap tampilan widget.

Di sini kamu bisa mengatur:

Warna background widget
Ukuran dan bentuk thumbnail
Font dan warna teks
Efek hover pada judul artikel

Contoh penting:

#recent-posts-widget adalah container utama. Kalau mau ganti warna background, cukup ubah:

background:#2a2a2a;

Mau nuansa terang? Tinggal ganti ke #ffffff. Fleksibel, no drama.

2. Struktur HTML Widget

Bagian ini adalah kerangka atau “body” widget.

Elemen pentingnya:

#recent-posts-widget → pembungkus utama
#recent-posts-list → tempat artikel dimuat otomatis

Judul widget bisa kamu ganti di bagian ini:

<h2>Artikel Terbaru</h2>

Mau lebih branding? Ganti jadi “Update Terbaru”, “Konten Fresh”, atau apapun sesuai tone blog kamu.

Step by Step Cara Pasang Widget Artikel Terbaru di Blogspot

Sekarang kita masuk ke bagian operasional. Fokus, tapi santai.

Step 1: Masuk ke Dashboard Blogspot

Login ke Blogger
Pilih menu Tata Letak
Klik Tambahkan Gadget

Pilih gadget HTML/JavaScript. Ini penting, jangan salah departemen.

Step 2: Copy Full Script Widget

Salin seluruh script mulai dari:

HTML
CSS
JS

<div id='recent-posts-widget'>
  <h2 style="color:#ff9900; margin:0 0 25px 0; text-align:center;">Artikel Terbaru</h2>
  <ul id='recent-posts-list'></ul>
</div>

<style>
#recent-posts-widget{background:#2a2a2a;padding:15px;border-radius:5px;font-family:Arial,sans-serif;overflow:hidden;position:relative}#recent-posts-widget ul{list-style:none;margin:0;padding:0}#recent-posts-widget .featured-post{position:relative;display:block;margin:-15px -15px 25px -15px}#recent-posts-widget .featured-post img{width:100%;height:280px;object-fit:cover;display:block}#recent-posts-widget .featured-overlay{position:absolute;bottom:0;left:0;right:0;background:rgba(0,0,0,0.5);padding:20px 15px 25px 15px;text-align:left}#recent-posts-widget .featured-overlay a{color:#fff;font-size:20px;font-weight:bold;text-decoration:none;line-height:1.3;display:block}#recent-posts-widget .featured-overlay a:hover{color:#ff9900}#recent-posts-widget li{display:flex;align-items:center;padding:12px 0;border-bottom:1px solid #444}#recent-posts-widget li:last-child{border-bottom:none}#recent-posts-widget li img{width:100px;height:70px;object-fit:cover;border-radius:6px;margin-right:15px;background:#444;flex-shrink:0;border:1px solid #FFF}#recent-posts-widget li a{color:#fff;font-size:14px;text-decoration:none;line-height:1.4;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}#recent-posts-widget li a:hover{color:#ff9900}#recent-posts-credit{text-align:center;font-size:12px;color:#aaa;margin-top:20px;padding-top:15px;border-top:1px solid #444}#recent-posts-credit a{color:#aaa;text-decoration:none}#recent-posts-credit a:hover{color:#ff9900}
</style>

<script type='text/javascript'>
// Setting mudah diganti
var numPosts=10,thumbSizeSmall=300,thumbSizeLarge=1600;

function showRecentPosts(e){
  var t=e.feed.entry;
  if(!t||t.length===0)return;
  var n="";
  var r=t[0],i=r.title.$t,o="";
  for(var s=0;s<r.link.length;s++)if(r.link[s].rel=="alternate"){o=r.link[s].href;break}
  var l="https://blogger.googleusercontent.com/img/a/AVvXsEg9z9BMVY04SNUnjlTrY_ValMDG6ZPzpEcm0j14W7chBXEk7rwgfbd3fGCPk_oRcEIiouN60tGk7X3c-G3zrjas0aVNvXkPQ8VzN4VJ8lE6iqy-1CFYjtAtG_oM2MEn7krqx9_M7jwy86iLwqeU0eTbOvVillSsdGOiDEfX9-wL3c2kZxKoU5SxQWCi-7g=s360";
  if(r.media$thumbnail)l=r.media$thumbnail.url.replace(/s72-c/,"s"+thumbSizeLarge);
  else if(r.content){var u=r.content.$t,c=u.match(/<img[^>]+src=["']([^"']+)["']/i);if(c)l=c[1].replace(/s72-c/,"s"+thumbSizeLarge)}
  n+='<div class="featured-post"><img loading="lazy" src="'+l+'" alt="'+i+'"/><div class="featured-overlay"><a href="'+o+'" target="_blank">'+i+'</a></div></div>';
  for(var a=1;a<numPosts&&a<t.length;a++){
    var f=t[a].title.$t,d="";
    for(var h=0;h<t[a].link.length;h++)if(t[a].link[h].rel=="alternate"){d=t[a].link[h].href;break}
    var m="https://blogger.googleusercontent.com/img/a/AVvXsEg9z9BMVY04SNUnjlTrY_ValMDG6ZPzpEcm0j14W7chBXEk7rwgfbd3fGCPk_oRcEIiouN60tGk7X3c-G3zrjas0aVNvXkPQ8VzN4VJ8lE6iqy-1CFYjtAtG_oM2MEn7krqx9_M7jwy86iLwqeU0eTbOvVillSsdGOiDEfX9-wL3c2kZxKoU5SxQWCi-7g=s360";
    if(t[a].media$thumbnail)m=t[a].media$thumbnail.url.replace(/s72-c/,"s"+thumbSizeSmall);
    else if(t[a].content){var p=t[a].content.$t,g=p.match(/<img[^>]+src=["']([^"']+)["']/i);if(g)m=g[1].replace(/s72-c/,"s"+thumbSizeSmall)}
    n+='<li><img loading="lazy" src="'+m+'" alt="'+f+'"/><a href="'+d+'" target="_blank">'+f+'</a></li>'
  }
  document.getElementById("recent-posts-list").innerHTML=n;

  (function(){
    var d = document;
    var w = d.getElementById('recent-posts-widget');
    var div = d.createElement('div');
    div.id = 'recent-posts-credit';
    
    var a = d.createElement('a');
    a.href = String.fromCharCode(104,116,116,112,115,58,47,47,119,119,119,46,98,101,110,105,115,117,98,105,97,110,116,111,46,119,101,98,46,105,100);
    a.target = '_blank';
    
    a.textContent = String.fromCharCode(66,101,110,105,83,117,98,105,97,110,116,111,46,119,101,98,46,105,100);
    a.style.color = '#aaa';
    a.style.textDecoration = 'none';
    
    div.appendChild(a);
    w.appendChild(div);
  })();
}
</script>

<script src='https://www.benisubianto.web.id/feeds/posts/summary?max-results=10&alt=json-in-script&callback=showRecentPosts'></script>

Tempelkan ke kolom HTML/JavaScript, lalu klik Simpan.

Sampai sini sebenarnya widget sudah bisa jalan. Tapi belum optimal sebelum step berikutnya.

Perlu Diperhatikan! Urutan copy-paste script yang benar <style> – <html> – <script>.

Jangan Lupa Ganti URL Domain Blog

Ini bagian krusial. Kalau di-skip, KPI widget bisa miss target.

Perhatikan baris ini:

https://www.benisubianto.web.id/feeds/posts/summary?max-results=10&alt=json-in-script&callback=showRecentPosts

Ganti benisubianto.web.id dengan domain blog kamu sendiri.

Contoh:

https://www.nama-blog-kamu.com/feeds/posts/summary?max-results=10&alt=json-in-script&callback=showRecentPosts

Tanpa ini, widget tetap tampil… tapi isinya bukan punya kamu. Salah server, bro.

Bagian Setting yang Bisa Kamu Ubah

Ini bagian favorit. Semua bisa di-tune sesuai kebutuhan.

1. Jumlah Artikel

Di bagian atas script:

var numPosts=10;

Ubah angka 10 sesuai keinginan. Mau 5? 7? Silakan.

2. Ukuran Thumbnail

Ada dua setting:

thumbSizeLarge → untuk artikel utama
thumbSizeSmall → untuk list artikel

Contoh:

thumbSizeLarge=1600; // mulai 300 - 1600 max

Angka ini berpengaruh ke kualitas gambar. Semakin besar, semakin tajam, tapi jangan overkill. Kalau tidak mau ribet biarkan nilai tetap default.

3. Warna dan Gaya

Semua warna bisa kamu sesuaikan di CSS:

Warna teks
Warna hover
Border thumbnail

Anggap saja ini brand guideline versi widget.

Cara Kerja Script Secara Singkat

Supaya makin paham, kita ringkas alurnya:

Script mengambil data artikel dari feed Blogspot
Artikel pertama dijadikan featured post
Artikel sisanya ditampilkan sebagai list
Thumbnail diambil otomatis dari gambar postingan
Jika tidak ada gambar, pakai default thumbnail

Semua berjalan otomatis. Zero maintenance, high impact.

Optimasi SEO dari Widget Artikel Terbaru

Widget ini juga punya nilai SEO, asal dipasang dengan benar.

Judul artikel tetap terbaca crawler
Internal link meningkat
Struktur halaman lebih kaya konten

Dengan kata lain, widget ini bukan cuma cantik, tapi juga search-engine friendly.

Kesimpulan

Menggunakan Costum script Artikel Terbaru seperti ini adalah langkah cerdas buat meningkatkan performa blog secara keseluruhan.

Kamu bukan cuma belajar Cara buat widget Artikel Terbaru, tapi juga memahami cara kerjanya, cara setting-nya, dan cara menyesuaikannya dengan brand blog kamu.

Kalau blog itu bisnis, maka widget ini adalah aset digital yang layak dipertahankan. Happy Blogging!

BeniSubianto.web.id | Official Site