Cara Membuat Related Posts Widget Blogger Native JavaScript Tanpa jQuery

---

Related Posts termasuk widget Blogger yang kelihatannya sederhana, tetapi fungsinya cukup penting: setelah pembaca selesai membaca satu artikel, kita memberi jalan yang masuk akal untuk lanjut ke artikel lain yang masih satu topik. Kalau rekomendasinya relevan, peluang pembaca membuka halaman kedua tentu lebih besar dibanding membiarkan artikel berakhir begitu saja tanpa arah.

Masalahnya, banyak kode Related Posts lama masih bergantung pada jQuery, library eksternal, atau script pihak ketiga yang sudah tidak perlu dipakai untuk kebutuhan sesederhana ini. Karena itu kita akan membuat versi native JavaScript yang mengambil artikel dari feed Blogger sendiri, mencari label artikel aktif, membuang URL yang sedang dibaca, lalu menampilkan beberapa artikel terkait dalam grid responsif.

Informasi Singkat

---

Blogger masih menyediakan gadget HTML/JavaScript dan data layout yang bisa dipakai untuk menambahkan elemen kustom. Widget di artikel ini tidak memakai API key dan tidak membutuhkan jQuery. Data artikel dibaca dari feed publik blog sendiri melalui JSONP, sehingga tetap praktis untuk Blogger custom domain selama feed posting diizinkan.

---

Sumber : Blogger Help - Mengubah Desain Blog · Blogger Help - Tag Data Tata Letak

Kenapa Related Posts Masih Layak Dipasang?

Widget ini bukan tombol ajaib untuk membuat ranking naik. Fungsinya lebih realistis: membantu pembaca menemukan artikel lanjutan yang relevan. Kalau sebuah artikel tentang custom domain merekomendasikan tutorial HTTPS, DNS, atau Search Console yang masih satu konteks, pembaca punya alasan untuk lanjut mengeklik tanpa harus kembali ke homepage.

Dari sisi struktur situs, related posts juga bisa menambah jalur internal link antarartikel. Tetapi relevansi tetap lebih penting daripada jumlah. Enam artikel yang benar-benar satu topik biasanya lebih berguna daripada dua puluh rekomendasi acak.

Cara Kerja Widget Ini

Alurnya dibuat sesederhana mungkin. Script mencari label artikel dari link label yang sudah dirender oleh template, lalu meminta maksimal 20 artikel dari feed Blogger untuk label tersebut. Setelah data masuk, URL artikel yang sedang dibaca dikeluarkan dari daftar, kemudian maksimal enam artikel lain dirender sebagai kartu.

Request feed hanya dilakukan sekali. Thumbnail memakai gambar yang sudah tersedia di feed dan diarahkan ke ukuran sekitar 320 piksel agar tidak mengambil gambar terlalu besar. Gambar juga memakai loading="lazy" dan decoding="async". Kalau thumbnail tidak tersedia, widget menampilkan huruf awal judul sebagai fallback.

Kalau ingin memahami struktur URL feed Blogger lebih dalam, CodeFlare juga punya panduan cara mendapatkan URL RSS Feed Blogger dan menggunakan parameternya. Untuk optimasi gambar feed yang lebih lanjut, ada juga tutorial Image Engine Blogger + GitHub untuk feed widget responsif.

Fitur yang Dibawa Versi Native JavaScript Ini

• Tanpa jQuery dan tanpa framework JavaScript.
• Tanpa API key atau akun layanan pihak ketiga.
• Mengambil artikel dari feed Blogger sendiri.
• Otomatis membaca label artikel aktif.
• Menghapus artikel yang sedang dibaca dari rekomendasi.
• Maksimal artikel bisa diubah melalui atribut data-max.
• Grid responsif 3 kolom, 2 kolom, lalu 1 kolom di layar kecil.
• Thumbnail lazy load dan ukuran feed diperkecil.
• Fallback jika thumbnail atau feed gagal dimuat.
• Tidak menampilkan pesan error ke pembaca; error cukup dicatat di console.

Live Preview Sederhana

Artikel Terkait

01Cara Optimasi Widget Blogger agar Tetap Ringan12 Sep 2026 02Mengenal JSON Feed Blogger untuk Widget Dinamis10 Sep 2026 03Tips Internal Link Blogger yang Lebih Natural8 Sep 2026

Kode Final Related Posts Widget Blogger

<style>
.cfRelWidget{margin:18px 0;font-family:Roboto,Arial,sans-serif}
.cfRelHead{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 12px}
.cfRelHead strong{font-size:18px;font-weight:700}
.cfRelGrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.cfRelCard{display:block;overflow:hidden;border:1px solid rgba(127,127,127,.28);border-radius:10px;text-decoration:none;background:rgba(127,127,127,.06);transition:transform .2s ease,box-shadow .2s ease}
.cfRelCard:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(0,0,0,.12)}
.cfRelThumb{display:block;aspect-ratio:16/10;overflow:hidden;background:rgba(127,127,127,.12)}
.cfRelThumb img{width:100%;height:100%;display:block;object-fit:cover;transition:transform .3s ease}
.cfRelCard:hover .cfRelThumb img{transform:scale(1.04)}
.cfRelNoImg{display:grid;place-items:center;height:100%;font-size:34px;font-weight:700;opacity:.45}
.cfRelText{display:block;padding:10px}
.cfRelTitle{display:-webkit-box;overflow:hidden;-webkit-line-clamp:2;-webkit-box-orient:vertical;font-size:15px;line-height:1.45;font-weight:700}
.cfRelMeta{display:block;margin-top:6px;font-size:12px;opacity:.68}
@media(max-width:760px){.cfRelGrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:480px){.cfRelGrid{grid-template-columns:1fr}}
</style>

<div class="cfRelWidget" id="cfRelatedWidget" data-max="6" data-label="" data-title="Artikel Terkait">
<div class="cfRelHead"><strong>Artikel Terkait</strong></div>
<div class="cfRelGrid" aria-live="polite"></div>
</div>

<script>
(function(){
"use strict";
var root=document.getElementById("cfRelatedWidget");
if(!root||root.dataset.ready==="1")return;
root.dataset.ready="1";

var grid=root.querySelector(".cfRelGrid");
var head=root.querySelector(".cfRelHead strong");
var max=parseInt(root.dataset.max||"6",10);
if(head)head.textContent=root.dataset.title||"Artikel Terkait";

function cleanUrl(u){
try{
var x=new URL(u,location.href);
return (x.origin+x.pathname).replace(/\/+$/,"");
}catch(e){
return String(u||"").split(/[?#]/)[0].replace(/\/+$/,"");
}
}

function findLabel(){
if(root.dataset.label)return root.dataset.label.trim();
var links=document.querySelectorAll('.post-labels a,.post-label a,a[rel="tag"]');
for(var i=0;i<links.length;i++){
var href=links[i].getAttribute("href")||"";
var text=(links[i].textContent||"").trim();
if(text&&href.indexOf("/search/label/")>-1)return text;
}
var meta=document.querySelector('meta[property="article:section"]');
return meta&&meta.content?meta.content.trim():"";
}

function altLink(entry){
var links=entry.link||[];
for(var i=0;i<links.length;i++){
if(links[i].rel==="alternate")return links[i].href||"";
}
return "";
}

function thumb(entry){
var u=entry.media$thumbnail&&entry.media$thumbnail.url?entry.media$thumbnail.url:"";
if(!u){
var html=(entry.content&&entry.content.$t)||(entry.summary&&entry.summary.$t)||"";
var m=html.match(/<img[^>]+src=["']([^"']+)["']/i);
if(m)u=m[1];
}
if(!u)return "";
return u.replace(/\/s\d+(?:-c)?\//,"/s320/").replace(/\/w\d+-h\d+[^/]*\//,"/s320/");
}

function published(entry){
var d=entry.published&&entry.published.$t?new Date(entry.published.$t):null;
if(!d||isNaN(d.getTime()))return "";
return d.toLocaleDateString(document.documentElement.lang||"id-ID",{day:"numeric",month:"short",year:"numeric"});
}

function card(entry){
var url=altLink(entry);
var title=entry.title&&entry.title.$t?entry.title.$t:"Artikel";
var image=thumb(entry);

var a=document.createElement("a");
a.className="cfRelCard";
a.href=url;
a.setAttribute("aria-label",title);

var media=document.createElement("span");
media.className="cfRelThumb";

if(image){
var img=document.createElement("img");
img.src=image;
img.alt="";
img.loading="lazy";
img.decoding="async";
img.onerror=function(){
media.innerHTML="";
var no=document.createElement("span");
no.className="cfRelNoImg";
no.textContent=title.charAt(0).toUpperCase();
media.appendChild(no);
};
media.appendChild(img);
}else{
var no=document.createElement("span");
no.className="cfRelNoImg";
no.textContent=title.charAt(0).toUpperCase();
media.appendChild(no);
}

var text=document.createElement("span");
text.className="cfRelText";

var ttl=document.createElement("span");
ttl.className="cfRelTitle";
ttl.textContent=title;

var meta=document.createElement("span");
meta.className="cfRelMeta";
meta.textContent=published(entry);

text.appendChild(ttl);
if(meta.textContent)text.appendChild(meta);
a.appendChild(media);
a.appendChild(text);
return a;
}

var label=findLabel();
if(!label){
root.style.display="none";
console.warn("[CodeFlare Related Posts] Label artikel tidak ditemukan.");
return;
}

var current=cleanUrl(location.href);
var callback="cfRel_"+Date.now()+"_"+Math.floor(Math.random()*10000);
var script=document.createElement("script");
var timer;

window[callback]=function(json){
clearTimeout(timer);
try{
var entries=(json.feed&&json.feed.entry)||[];
var shown=0;
grid.innerHTML="";
for(var i=0;i<entries.length&&shown<max;i++){
var url=altLink(entries[i]);
if(!url||cleanUrl(url)===current)continue;
grid.appendChild(card(entries[i]));
shown++;
}
if(!shown)root.style.display="none";
}finally{
delete window[callback];
if(script.parentNode)script.parentNode.removeChild(script);
}
};

script.src=location.origin+"/feeds/posts/default/-/"+encodeURIComponent(label)+"?alt=json-in-script&max-results=20&callback="+callback;
script.async=true;
script.onerror=function(){
clearTimeout(timer);
root.style.display="none";
delete window[callback];
console.warn("[CodeFlare Related Posts] Feed Blogger gagal dimuat.");
};
timer=setTimeout(function(){
root.style.display="none";
delete window[callback];
if(script.parentNode)script.parentNode.removeChild(script);
console.warn("[CodeFlare Related Posts] Feed timeout.");
},10000);
document.body.appendChild(script);
})();
</script>

Kode di atas sudah lengkap: HTML, CSS, dan JavaScript berada dalam satu blok. Setiap baris kode sengaja diakhiri tag <br /> di parser artikel CodeFlare supaya tampil per baris dan tidak memanjang horizontal seperti satu kalimat.

Cara Memasang di Blogger

Sebelum mengubah template, backup tema terlebih dahulu. Blogger sendiri mengingatkan bahwa kode atau widget pihak ketiga menjadi tanggung jawab pemilik blog, jadi lebih aman punya salinan template sebelum eksperimen.

1. Login ke Blogger dan pilih blog yang akan dipasang widget.
2. Buka Tema lalu buat backup template.
3. Jika template menyediakan area gadget tepat di bawah artikel, Anda bisa mencoba Tata Letak → Tambahkan Gadget → HTML/JavaScript.
4. Kalau area tersebut tidak tersedia, buka Tema → Edit HTML dan cari bagian setelah isi artikel atau post body.
5. Tempel kode widget di posisi yang hanya tampil pada halaman artikel.
6. Simpan template lalu buka salah satu artikel yang memiliki label.
7. Pastikan widget tidak menampilkan artikel yang sedang dibaca dan link rekomendasinya memang satu topik.

PERHATIAN

Jangan menempel script di dalam <b:skin> atau lokasi XML yang tidak menerima JavaScript mentah. Kalau template mempunyai area HTML/JavaScript di bawah post, cara itu lebih aman untuk pengguna pemula. Jika harus Edit HTML, backup template terlebih dahulu dan pastikan kode ditempatkan pada bagian body yang benar.

Kalau Label Tidak Terdeteksi

Setiap template Blogger punya struktur markup yang sedikit berbeda. Script mencoba beberapa selector label umum seperti .post-labels, .post-label, dan link dengan rel="tag". Kalau template Anda menyembunyikan label atau memakai struktur yang benar-benar kustom, isi label secara manual pada atribut data-label.

<div class="cfRelWidget" id="cfRelatedWidget" data-max="6" data-label="Blogger" data-title="Artikel Terkait"></div>

Dengan cara itu widget akan selalu mengambil artikel dari label Blogger. Untuk related posts otomatis, biarkan data-label="" kosong seperti kode default.

Kalau Widget Kosong padahal Kode Sudah Terpasang

Penyebab paling umum adalah feed posting tidak tersedia, artikel tidak mempunyai label, atau selector label template berbeda. Buka Developer Tools browser lalu lihat Console. Versi ini sengaja menulis informasi seperti [CodeFlare Related Posts] Feed Blogger gagal dimuat hanya di console supaya pembaca tidak melihat kotak error di halaman.

Pastikan juga blog tidak membatasi feed secara berlebihan. Related Posts ini membutuhkan feed publik untuk membaca daftar artikel. Kalau feed memang sengaja dimatikan, lebih baik gunakan engine lain yang sudah mempunyai data artikel sendiri daripada memaksa widget ini.

Cara Mengubah Jumlah Artikel dan Judul Widget

Pengaturan dasar tidak perlu menyentuh JavaScript. Cukup ubah atribut pada elemen utama.

data-max="6"
data-label=""
data-title="Artikel Terkait"

Misalnya data-max="4" akan menampilkan maksimal empat rekomendasi. Untuk blog dengan sidebar sempit atau artikel yang sudah cukup panjang, empat sampai enam kartu biasanya sudah cukup. Tidak perlu menampilkan terlalu banyak artikel hanya karena feed mampu mengirim dua puluh item.

Related Posts yang Baik Dimulai dari Label yang Rapi

Karena relevansi widget ditentukan oleh label, struktur label blog ikut menentukan kualitas rekomendasinya. Hindari memberi terlalu banyak label yang sebenarnya tidak menggambarkan topik. Artikel tentang HTTPS Blogger misalnya lebih cocok memakai label seperti Blogger, Custom Domain, HTTPS, dan Tutorial daripada memasukkan puluhan label umum yang membuat hubungan antarkonten menjadi kabur.

Kalau Anda suka widget feed yang lebih visual, artikel Widget Artikel Blogger Futuristik dengan Feed Label Otomatis bisa menjadi artikel pendamping. Bedanya, widget di halaman ini sengaja difokuskan untuk rekomendasi artikel setelah pembaca selesai membaca satu post.

Apakah Widget Ini Bisa Menambah Traffic?

Widget tidak menciptakan visitor baru dari Google dengan sendirinya. Nilai utamanya ada setelah visitor sudah masuk ke blog. Rekomendasi yang tepat bisa membantu pembaca menemukan halaman kedua, ketiga, atau artikel pendukung yang sebelumnya tidak mereka lihat.

Itu sebabnya related posts lebih masuk akal dipandang sebagai alat distribusi internal. Trafik organik tetap datang dari kualitas artikel, relevansi pencarian, indexing, reputasi, dan banyak faktor lain. Widget hanya membantu memanfaatkan kunjungan yang sudah berhasil kita dapatkan supaya pembaca tidak langsung menemui jalan buntu setelah paragraf terakhir.

Jangan Membuat Widget Lebih Berat daripada Artikelnya

Widget yang niatnya menaikkan pageview justru bisa merugikan kalau memuat banyak library, animasi berat, puluhan gambar besar, dan beberapa request eksternal sekaligus. Karena itu versi ini sengaja memakai satu request feed, native JavaScript, gambar lazy load, dan tidak memakai dependency eksternal.

Kalau nanti ingin mengembangkan desainnya, pertahankan prinsip tersebut. Tambahkan fitur yang memang membantu pembaca, bukan sekadar efek. Related Posts yang tampil cepat, judulnya relevan, gambarnya jelas, dan nyaman disentuh di mobile biasanya jauh lebih berguna daripada kartu penuh animasi yang membuat artikel terasa berat.