Cara Membuat Widget Label Blogger dengan Thumbnail Artikel Otomatis
Widget label di Blogger tidak harus tampil sebagai daftar kategori biasa. Dengan memanfaatkan feed Blogger dan JavaScript native, daftar label dapat diubah menjadi panel visual yang menampilkan kategori, gambar artikel, judul, tanggal, hingga jumlah komentar secara otomatis.
Pada tutorial kali ini kita akan membuat Widget Label Blogger 2 Kolom dengan tampilan menyerupai kumpulan berkas. Setiap label memiliki warna pastel, ikon kategori, serta satu artikel yang mewakili label tersebut.
Saat gambar artikel disentuh atau diarahkan dengan mouse, gambar akan bergeser dan memperlihatkan informasi artikel di belakangnya. Gerakannya dibuat berbeda antara kolom kiri dan kanan sehingga tampilannya lebih hidup tanpa membutuhkan library animasi tambahan.
Apa yang Berbeda dari Widget Label Ini?
Widget ini tidak mengambil daftar kategori secara manual. Data dibaca langsung dari feed Blogger pada domain tempat widget dipasang. Artinya, kode yang sama dapat digunakan pada blog Blogger lain tanpa harus mengganti alamat feed satu per satu.
Kalau ingin melihat pendekatan lain yang juga membaca data kategori secara otomatis, kamu bisa membandingkannya dengan Widget Artikel Blogger Futuristik dengan Feed Label Otomatis.
Live Preview Widget
Sebelum memasangnya pada blog, Anda dapat mencoba tampilannya melalui live preview berikut. Pada perangkat desktop, arahkan pointer ke gambar artikel untuk membuka informasi artikel yang berada di belakang gambar.
Cara Kerja Feed Blogger
Widget membaca endpoint feed dari domain Blogger yang sedang aktif. JavaScript kemudian memeriksa artikel yang tersedia dan mengelompokkannya berdasarkan label pada masing-masing entry.
Karena satu artikel Blogger dapat mempunyai lebih dari satu label, artikel yang sama sebenarnya berpotensi muncul berkali-kali. Untuk menguranginya, engine menyimpan URL artikel yang sudah digunakan dan mencoba memilih artikel lain untuk label berikutnya.
Memilih Artikel untuk Setiap Label
Artikel pada masing-masing label diurutkan berdasarkan tanggal publikasi terbaru. Setelah itu engine mencari artikel pertama yang URL-nya belum digunakan oleh label lain.
Jika seluruh artikel pada label tersebut ternyata sudah digunakan, engine tetap memilih artikel yang tersedia sebagai fallback. Dengan demikian, label tidak menjadi kosong hanya karena tidak mempunyai alternatif artikel lain.
Optimasi Thumbnail Blogger dan GitHub
Widget berukuran kecil tidak membutuhkan gambar beresolusi sangat besar. Karena itu gambar Blogger dinormalisasi ke ukuran s256-c sebelum digunakan sebagai thumbnail.
Untuk gambar yang berasal dari GitHub, engine juga dapat mencoba versi gambar dari folder s256. Jika gambar tersebut tidak ditemukan, URL gambar asli digunakan kembali sebagai fallback.
Efek Hover Berbeda pada Dua Kolom
Salah satu karakter utama widget ini adalah pergerakan thumbnail. Kartu pada posisi ganjil menggeser gambar ke arah atas, sedangkan kartu pada posisi genap menggeser gambar ke arah bawah.
Informasi artikel sebenarnya sudah berada di belakang thumbnail. Jadi efek tersebut bukan animasi flip yang membalik seluruh kartu. Hanya lapisan gambar yang bergerak keluar sehingga tulisan tetap berada pada orientasi normal.
Metode ini juga membuat struktur animasi lebih sederhana karena browser hanya perlu mengubah nilai transform pada lapisan gambar.
Judul Maksimal Tiga Baris
Judul artikel pada kartu dibatasi maksimal 3 baris. Pembatasan ini penting karena ruang vertikal widget cukup kecil dan masih harus menyediakan area untuk tanggal serta jumlah komentar.
Metadata ditempatkan pada bagian tersendiri di bawah judul. Sebuah garis abu-abu tipis digunakan sebagai pemisah sehingga judul dan informasi metadata tidak saling bertabrakan.
Ikon SVG Tanpa Font Awesome
Versi awal widget dapat menggunakan icon font, tetapi ketergantungan terhadap stylesheet dan file webfont eksternal dapat menyebabkan ikon tidak tampil pada konfigurasi Blogger tertentu.
Versi ini menggunakan SVG internal. Ikon sudah menjadi bagian dari kode widget sehingga tidak membutuhkan Font Awesome, Google Material Icons, atau library ikon lainnya.
Engine juga mencoba memilih ikon berdasarkan kata pada nama label. Label yang berhubungan dengan coding dapat menggunakan simbol kode, kategori game menggunakan ikon game, sedangkan label SEO atau pencarian dapat menggunakan ikon pencarian.
Apabila tidak ada kategori yang cocok, ikon folder digunakan sebagai fallback.
Kode Widget Label Blogger
Kode lengkap widget dapat ditempatkan melalui gadget HTML/JavaScript Blogger. CSS widget menggunakan nama class lokal agar kemungkinan bentrok dengan CSS template dapat dikurangi.
<style>
.cflv{box-sizing:border-box;max-width:350px;max-height:350px;margin:auto;overflow:hidden;background:linear-gradient(145deg,#e9f7ff,#cfeaf8 48%,#b9dff2);border:1px solid #8fc7e1;border-radius:7px;box-shadow:inset 0 0 0 3px #d7dde0,inset 0 0 0 4px #7b858a,0 5px 14px #0003;font-size:15px}
.cflv *{box-sizing:border-box;font-family:inherit}.cflv-files{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding:13px 9px 16px;max-height:312px;overflow-y:auto;overflow-x:hidden;background:linear-gradient(145deg,#edf9ff,#d7eef9 52%,#c5e5f4);scrollbar-width:thin;scrollbar-color:#78bddd #d9eff9}
.cflv-files::-webkit-scrollbar{width:7px}.cflv-files::-webkit-scrollbar-track{background:#d9eff9}.cflv-files::-webkit-scrollbar-thumb{background:#78bddd;border:1px solid #c7e7f6;border-radius:5px}
.cflv-file{position:relative;min-width:0;padding-top:18px}.cflv-tab{position:absolute;top:0;left:8px;z-index:4;display:flex;align-items:center;max-width:84%;height:27px;padding:4px 9px;background:var(--c);border-radius:7px 7px 0 0;color:#24363e;font-size:13px;font-weight:800;line-height:18px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-decoration:none!important}
.cflv-ico{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:13px;height:13px;margin-right:5px;color:currentColor}.cflv-ico svg{display:block;width:100%;height:100%;fill:currentColor}
.cflv-paper{position:relative;height:126px;padding:7px;background:var(--c);border:1px solid #fff;border-radius:4px 7px 5px 5px;box-shadow:0 2px 4px #26363d33;overflow:hidden}
.cflv-card{position:relative;display:block;width:100%;height:100%;color:#1d3540;text-decoration:none!important;overflow:hidden}.cflv-pic,.cflv-info{position:absolute;inset:0;border-radius:4px;overflow:hidden}
.cflv-pic{z-index:3;background:#dce9ee;transition:transform .42s cubic-bezier(.2,.75,.2,1),box-shadow .3s ease}.cflv-pic img{display:block;width:100%;height:100%;object-fit:cover}
.cflv-info{z-index:1;display:flex;flex-direction:column;padding:10px 9px 9px;background:linear-gradient(145deg,#fff,#edf8fd)}
.cflv-title{position:relative;display:-webkit-box;flex:0 0 auto;max-height:59.4px;margin:0;padding:0 0 0 10px;overflow:hidden;font-size:15px;font-weight:400;line-height:1.32;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3}
.cflv-title:before{content:"";position:absolute;left:0;top:2px;bottom:2px;width:4px;background:#1597d2;border-radius:3px}
.cflv-meta{display:flex;align-items:center;justify-content:space-between;flex:0 0 auto;gap:4px;width:100%;margin-top:auto;padding-top:6px;border-top:1px solid #aeb6ba;color:#58717c;font-size:10px;line-height:1.2}.cflv-meta>span{display:flex;align-items:center;min-width:0}.cflv-meta .cflv-ico{width:11px;height:11px;margin-right:3px}
.cflv-status{grid-column:1/-1;padding:80px 10px;text-align:center;color:#55727f}.cflv-ft{display:flex;align-items:center;justify-content:center;height:36px;padding:9px;text-align:center;background:linear-gradient(135deg,#087fc4,#075f9e 55%,#0b9bd7);border-top:1px solid #ffffff55;box-shadow:inset 0 1px #ffffff35;color:#fff;font-size:11px;letter-spacing:1px}.cflv-ft .cflv-ico{width:12px;height:12px;margin-right:5px}
@media(hover:hover){.cflv-tab:hover{color:#087fc4!important;text-decoration:none!important}.cflv-file:nth-child(odd):hover .cflv-pic{transform:translateY(-100%);box-shadow:0 5px 10px #23495b20}.cflv-file:nth-child(even):hover .cflv-pic{transform:translateY(100%);box-shadow:0 -5px 10px #23495b20}}
@media(max-width:280px){.cflv-files{grid-template-columns:1fr}}
</style>
<div class="cflv" id="cflv-widget">
<div class="cflv-files"><div class="cflv-status">Memuat label…</div></div>
<div class="cflv-ft">Powered by <b>CodeFlare</b></div>
</div>
<script>
(function(){
var W=document.getElementById("cflv-widget");if(!W)return;var F=W.querySelector(".cflv-files"),C=["#ccebf8","#ffe2b9","#ccebdc","#f7d2e2","#ded5f5","#ffd3ce","#caeaea","#fff1bd"],cb="CFLV"+Date.now(),s=document.createElement("script"),base=(location.origin||"").replace(/\/$/,"");
var SVG={
folder:'<svg viewBox="0 0 24 24"><path d="M3 5h7l2 2h9v12H3V5zm2 4v8h14V9H5z"/></svg>',
code:'<svg viewBox="0 0 24 24"><path d="m8.7 16.6-5-4.6 5-4.6 1.4 1.5L6.7 12l3.4 3.1-1.4 1.5zm6.6 0-1.4-1.5 3.4-3.1-3.4-3.1 1.4-1.5 5 4.6-5 4.6zM11 19l2-14h2l-2 14h-2z"/></svg>',
search:'<svg viewBox="0 0 24 24"><path d="M10.5 3a7.5 7.5 0 1 1-4.7 13.3L2 20.1 3.9 22l3.8-3.8A7.5 7.5 0 0 1 10.5 3zm0 2a5.5 5.5 0 1 0 0 11 5.5 5.5 0 0 0 0-11z"/></svg>',
robot:'<svg viewBox="0 0 24 24"><path d="M11 2h2v3h4a3 3 0 0 1 3 3v10a3 3 0 0 1-3 3H7a3 3 0 0 1-3-3V8a3 3 0 0 1 3-3h4V2zM7 7a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1V8a1 1 0 0 0-1-1H7zm1 4h2v2H8v-2zm6 0h2v2h-2v-2zm-6 5h8v2H8v-2z"/></svg>',
phone:'<svg viewBox="0 0 24 24"><path d="M7 2h10a2 2 0 0 1 2 2v16a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2zm0 3v13h10V5H7zm4 14h2v1h-2v-1z"/></svg>',
video:'<svg viewBox="0 0 24 24"><path d="M3 5h13a2 2 0 0 1 2 2v2l4-2v10l-4-2v2a2 2 0 0 1-2 2H3V5zm2 2v10h11V7H5z"/></svg>',
news:'<svg viewBox="0 0 24 24"><path d="M4 3h14v3h3v15H6a3 3 0 0 1-3-3V3h1zm2 2v13a1 1 0 0 0 1 1h12V8h-1v9H8V5H6zm4 2h6v2h-6V7zm0 4h6v2h-6v-2z"/></svg>',
chart:'<svg viewBox="0 0 24 24"><path d="M3 20V4h2v14h16v2H3zm4-4V9h3v7H7zm5 0V5h3v11h-3zm5 0v-4h3v4h-3z"/></svg>',
game:'<svg viewBox="0 0 24 24"><path d="M7 7h10a5 5 0 0 1 4.8 6.4l-1.2 4A3 3 0 0 1 15.8 18L14 16h-4l-1.8 2a3 3 0 0 1-4.8-.6l-1.2-4A5 5 0 0 1 7 7zm0 2a3 3 0 0 0-2.9 3.8l1.2 4c.2.6 1 .8 1.4.3L9.1 14h5.8l2.4 3.1c.4.5 1.2.3 1.4-.3l1.2-4A3 3 0 0 0 17 9H7zm0 2h2v2h2v2H9v2H7v-2H5v-2h2v-2zm9 1h2v2h-2v-2z"/></svg>',
shield:'<svg viewBox="0 0 24 24"><path d="M12 2 20 5v6c0 5.1-3.4 9.7-8 11-4.6-1.3-8-5.9-8-11V5l8-3zm0 3.1L7 7v4c0 3.5 2 6.8 5 8 3-1.2 5-4.5 5-8V7l-5-1.9z"/></svg>',
school:'<svg viewBox="0 0 24 24"><path d="m12 3 10 5-10 5L2 8l10-5zm-6 8.1 6 3 6-3V17l-6 3-6-3v-5.9z"/></svg>',
palette:'<svg viewBox="0 0 24 24"><path d="M12 3a9 9 0 0 0 0 18h1.5a2.5 2.5 0 0 0 0-5H12a1 1 0 0 1 0-2h3a6 6 0 0 0 0-12h-3zm-5 7a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm4-3a1.5 1.5 0 1 1 3 0 1.5 1.5 0 0 1-3 0z"/></svg>',
tool:'<svg viewBox="0 0 24 24"><path d="M14 3a6 6 0 0 0-5.5 8.4L3 17l4 4 5.6-5.5A6 6 0 0 0 21 9l-4 3-3-3 3-4a6 6 0 0 0-3-2z"/></svg>',
globe:'<svg viewBox="0 0 24 24"><path d="M12 2a10 10 0 1 1 0 20 10 10 0 0 1 0-20zm-2.2 3.1A8 8 0 0 0 4.3 11h3.8c.1-2.2.7-4.3 1.7-5.9zM10.1 11h3.8c-.2-2.7-1-5-1.9-6.3-.9 1.3-1.7 3.6-1.9 6.3zm5.8 0h3.8a8 8 0 0 0-5.5-5.9c1 1.6 1.6 3.7 1.7 5.9zM4.3 13a8 8 0 0 0 5.5 5.9c-1-1.6-1.6-3.7-1.7-5.9H4.3zm5.8 0c.2 2.7 1 5 1.9 6.3.9-1.3 1.7-3.6 1.9-6.3h-3.8zm5.8 0c-.1 2.2-.7 4.3-1.7 5.9a8 8 0 0 0 5.5-5.9h-3.8z"/></svg>',
server:'<svg viewBox="0 0 24 24"><path d="M3 4h18v6H3V4zm2 2v2h14V6H5zm-2 8h18v6H3v-6zm2 2v2h14v-2H5z"/></svg>',
calendar:'<svg viewBox="0 0 24 24"><path d="M6 2h2v2h8V2h2v2h3v18H3V4h3V2zm13 8H5v10h14V10zM5 6v2h14V6H5z"/></svg>',
comment:'<svg viewBox="0 0 24 24"><path d="M3 3h18v14H8l-5 4V3zm2 2v12l2.3-2H19V5H5z"/></svg>'
};
function IC(n){return'<span class="cflv-ico">'+(SVG[n]||SVG.folder)+'</span>'}
function E(v){return String(v||"").replace(/[&<>"']/g,function(x){return{"&":"&","<":"<",">":">",'"':""","'":"'"}[x]})}
function U(e){var a=(e.link||[]).filter(function(x){return x.rel==="alternate"})[0];return a?a.href:"#"}
function I(u){
if(!u)return{src:"",fb:""};
if(/blogger\.googleusercontent\.com|bp\.blogspot\.com/i.test(u))return{src:u.replace(/\/s\d+(?:-c)?\//i,"/s256-c/").replace(/\/w\d+-h\d+[^/]*\//i,"/s256-c/").replace(/=s\d+[^&]*/i,"=s256-c"),fb:""};
if(/githubusercontent\.com|github\.com/i.test(u)){
var g=u;
if(/\/s\d+(?:-c)?\//i.test(g))g=g.replace(/\/s\d+(?:-c)?\//i,"/s256/");
else if(!/\/s256\//i.test(g)){var a=g.split("/");a.splice(a.length-1,0,"s256");g=a.join("/")}
return{src:g,fb:u}
}
return{src:u,fb:""}
}
function P(e){
var u=e.media$thumbnail&&e.media$thumbnail.url;
if(!u){var h=(e.content&&e.content.$t)||(e.summary&&e.summary.$t)||"",m=h.match(/<img[^>]+src=["']([^"']+)["']/i);u=m?m[1]:""}
return I(u)
}
function D(e){
var d=new Date(e.published.$t),m=["JAN","FEB","MAR","APR","MEI","JUN","JUL","AGU","SEP","OKT","NOV","DES"];
return d.getDate()+" "+m[d.getMonth()]
}
function N(e){return e.thr$total?e.thr$total.$t:"0"}
function X(l){
var x=(l||"").toLowerCase(),m=[
[/blogger|blogspot|widget|template|theme/,"folder"],
[/adsense|iklan|advertis/,"chart"],
[/seo|search|google|bing|yandex/,"search"],
[/javascript|js|script|coding|code|html|css/,"code"],
[/ai|chatgpt|gemini/,"robot"],
[/android|mobile|phone|iphone|ios|apple/,"phone"],
[/github|git/,"code"],
[/youtube|video/,"video"],
[/news|berita|artikel/,"news"],
[/finance|money|bisnis|trading|forex/,"chart"],
[/game|gaming/,"game"],
[/security|privacy/,"shield"],
[/tutorial|tips|guide|cara/,"school"],
[/design|desain|gambar|image/,"palette"],
[/tool|tools/,"tool"],
[/internet|web|website/,"globe"],
[/cloud|hosting|server/,"server"]
];
for(var i=0;i<m.length;i++)if(m[i][0].test(x))return m[i][1];
return"folder"
}
function Z(){return"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256'%3E%3Crect width='256' height='256' fill='%23dce9ee'/%3E%3C/svg%3E"}
window[cb]=function(j){
var es=j.feed&&j.feed.entry||[],g={},used={},o=[];
es.forEach(function(e){(e.category||[]).forEach(function(c){(g[c.term]||(g[c.term]=[])).push(e)})});
Object.keys(g).sort(function(a,b){return g[a].length-g[b].length}).forEach(function(l){
g[l].sort(function(a,b){return new Date(b.published.$t)-new Date(a.published.$t)});
var a=g[l],e=null;
for(var i=0;i<a.length;i++)if(!used[U(a[i])]){e=a[i];break}
if(!e)e=a[0];
if(e){var p=P(e);used[U(e)]=1;o.push({l:l,t:e.title.$t,u:U(e),i:p.src||Z(),f:p.fb,d:D(e),c:N(e)})}
});
F.innerHTML=o.map(function(d,i){
var er=d.f?"this.onerror=null;this.src='"+d.f+"'":"this.onerror=null;this.src='"+Z()+"'";
return'<div class="cflv-file" style="--c:'+C[i%C.length]+'">'+
'<a class="cflv-tab" href="'+base+'/search/label/'+encodeURIComponent(d.l)+'">'+IC(X(d.l))+'<span>'+E(d.l)+'</span></a>'+
'<div class="cflv-paper"><a class="cflv-card" href="'+d.u+'">'+
'<span class="cflv-info"><span class="cflv-title">'+E(d.t)+'</span>'+
'<span class="cflv-meta"><span>'+IC("calendar")+d.d+'</span><span>'+IC("comment")+d.c+'</span></span></span>'+
'<span class="cflv-pic"><img loading="lazy" decoding="async" src="'+d.i+'" onerror="'+er+'" alt=""/></span>'+
'</a></div></div>'
}).join("")||'<div class="cflv-status">Label tidak ditemukan.</div>';
delete window[cb];s.remove()
};
s.src=base+"/feeds/posts/default?alt=json-in-script&max-results=150&callback="+cb;
s.async=true;
s.onerror=function(){F.innerHTML='<div class="cflv-status">Feed gagal dimuat.</div>'};
document.head.appendChild(s)
})();
</script>
Cara Memasang Widget di Blogger
Masuk ke dashboard Blogger kemudian buka menu Tata Letak. Pilih area tempat widget akan ditampilkan, lalu tambahkan gadget HTML/JavaScript.
Salin seluruh source widget dari kotak kode di atas, tempelkan ke dalam gadget, kemudian simpan. Setelah halaman blog dibuka, JavaScript akan mengambil data feed dari blog tempat widget tersebut dipasang.
Mengapa Feed Dibuat Dinamis?
Alamat blog sengaja tidak ditulis secara permanen di dalam source. Engine membaca origin dari halaman aktif dan menggunakannya untuk membangun URL feed Blogger.
Untuk memahami struktur URL feed dan parameter Blogger lebih jauh, baca juga Cara Mendapatkan URL RSS Feed Blogger dan Menggunakan Parameternya.
Dengan sistem tersebut, kode lebih mudah digunakan kembali. Ketika widget dipasang pada blog Blogger lain, pengguna tidak perlu mencari dan mengganti domain yang tersembunyi di dalam JavaScript.
Tampilan Folder dengan Warna Pastel
Setiap label memperoleh warna pastel secara bergantian. Bagian tab di atas kartu menampilkan nama label beserta ikon, sementara bagian utama digunakan sebagai tempat thumbnail artikel.
Nama label bukan sekadar dekorasi. Tab tersebut merupakan link yang dapat membawa pembaca menuju halaman label terkait sehingga widget tetap berfungsi sebagai navigasi kategori.
Ukuran Widget Tetap Ringkas
Lebar maksimum widget dibuat sekitar 350px dengan tinggi maksimum 350px. Ketika jumlah label melebihi ruang yang tersedia, daftar dapat digulir melalui scrollbar di dalam widget.
Scrollbar menggunakan warna biru lembut agar tetap menyatu dengan desain. Sementara bagian footer menggunakan gradasi biru sebagai identitas visual CodeFlare.
Ringan Tanpa Library JavaScript Tambahan
Pengambilan feed menggunakan JSONP Blogger, pemilihan artikel dikerjakan menggunakan JavaScript native, sedangkan efek pergerakan thumbnail menggunakan CSS.
Widget tidak membutuhkan jQuery, library slider, library animasi, ataupun library ikon eksternal. Selain mengurangi dependensi, pendekatan ini membuat source lebih mudah dipindahkan dan dikembangkan kembali.
Kalau ingin melihat widget native JavaScript lain yang bisa dipasang tanpa framework tambahan, buka Kumpulan Widget Blogger Keren, Responsive dan Native JavaScript.
Cocok untuk Navigasi Kategori yang Lebih Visual
Widget label seperti ini dapat menjadi alternatif ketika daftar kategori standar Blogger terasa terlalu sederhana. Pembaca tidak hanya melihat nama kategori, tetapi juga memperoleh gambaran artikel yang tersedia di dalam kategori tersebut.
Daftar tersebut tetap berasal dari data Blogger. Ketika artikel baru diterbitkan atau penggunaan label berubah, engine dapat membaca kembali data terbaru melalui feed tanpa harus memperbarui daftar kategori secara manual.
Dengan kombinasi layout dua kolom, thumbnail s256, SVG internal, feed dinamis, dan animasi CSS ringan, widget tetap memiliki karakter visual tanpa membutuhkan framework tambahan.
About CodeFlare
No comments
💬 Share Your Thoughts & Join the Hall of Fame!
Punya pendapat atau tips tentang artikel ini? Tuliskan komentar kamu sekarang! 🚀
💎 Komentar yang bermanfaat, relevan, dan positif berkesempatan tampil di CodeFlare Hall of Fame dan masuk ke Top Commentators Widget.
👉 Comment now. Share your ideas. Get noticed on codeflare.net