Jika Anda memiliki blog dengan puluhan bahkan ratusan kategori (label) postingan seperti blog ini, Anda mungkin menyadari bahwa widget Label bawaan Blogger bisa memakan banyak tempat di sidebar. Tampilan cloud standar sering kali membuat halaman blog terlihat panjang dan kurang rapi.
Kabar baiknya, kami baru saja menemukan solusi modern dan minimalis: Widget Kategori Accordion Kustom! Widget ini hanya menampilkan satu baris judul yang ringkas. Daftar kategori yang banyak itu baru akan muncul ketika pembaca mengkliknya. Ini membuat sidebar Anda tetap bersih, ringkas, dan profesional.
Tertarik untuk mencobanya? Ikuti panduan lengkap di bawah ini!
Kenapa Harus Menggunakan Widget Accordion Ini?
Hemat Tempat: Widget menyusut menjadi satu baris kecil, ideal untuk blog dengan banyak label.
Tampilan Modern: Menggunakan desain pill (badge membulat) dengan efek hover yang halus.
Anti Bentrok: Kode CSS dirancang secara terisolasi, sehingga tidak akan merusak tampilan tema blog Anda yang lain.
Meningkatkan UX: Pembaca mendapatkan instruksi yang jelas dan pengalaman navigasi yang lebih teratur.
Langkah-Langkah Pemasangan Widget Kategori Kustom
Karena kode ini adalah kombinasi dari HTML, CSS, dan JavaScript, cara termudah memasangnya di Blogger adalah melalui Gadget HTML/JavaScript.
1. Salin Kode Widget
Seluruh kode widget accordion berada dalam satu file yang sudah dioptimalkan dan diisolasi. Salin seluruh kode yang ada di bingkai di bawah ini:
📌 KODE WIDGET KATEGORI ACCORDION BLOGGER
Di bawah ini adalah kode lengkap untuk widget accordion. Pastikan Anda menyalin semuanya dan menempelkannya ke Gadget HTML/JavaScript Anda.
<div class='mtmji-label-widget'>
<style>
/* CSS yang disematkan di sini akan memprioritaskan gaya pada widget */
/* Kontainer Utama Widget */
.mtmji-label-widget {
/* Menghilangkan margin dan padding umum agar widget ringkas */
padding: 0;
margin: 0;
background: #ffffff;
border-radius: 12px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
overflow: hidden;
font-family: 'Inter', sans-serif; /* Menggunakan font Inter (perlu link di template utama) */
line-height: 1.5; /* Kerapihan teks */
}
/* Header yang bisa diklik (Tombol Accordion) */
.mtmji-widget-header {
display: flex;
flex-direction: column; /* Mengubah arah untuk menempatkan subtitle di bawah judul */
align-items: flex-start; /* Membuat konten rata kiri */
padding: 15px 20px;
background-color: #1e3a8a; /* Warna biru utama */
color: #ffffff;
cursor: pointer;
transition: background-color 0.3s ease;
border-radius: 12px 12px 0 0;
}
.mtmji-widget-header:hover {
background-color: #152c6f;
}
/* Judul utama */
.mtmji-main-title {
font-size: 18px;
font-weight: 700; /* Dibuat lebih tebal */
display: flex;
justify-content: space-between;
width: 100%; /* Memastikan judul dan panah sejajar */
align-items: center;
}
/* Subtitle/Instruksi (Copywriting) */
.mtmji-subtitle {
font-size: 12px;
font-weight: 500; /* Sedikit lebih tebal dari sebelumnya */
opacity: 0.9;
margin-top: 5px;
}
/* Ikon panah (Unicode) */
.mtmji-arrow {
font-size: 1.2em;
transition: transform 0.3s ease;
display: inline-block;
}
/* Memutar panah saat terbuka */
.mtmji-widget-header.active .mtmji-arrow {
transform: rotate(180deg);
}
/* Kontainer Label (Bagian yang dibuka/ditutup) */
#mtmji-label-cloud-container {
max-height: 0;
overflow: hidden;
transition: max-height 0.4s ease-out;
padding: 0 20px;
background-color: #f9f9f9;
}
/* Wadah untuk item label */
#mtmji-label-cloud {
padding: 15px 0 20px 0;
display: flex;
flex-wrap: wrap;
gap: 8px;
}
/* Gaya item label (Badge Pill) */
.mtmji-label-item {
display: inline-block;
padding: 6px 12px;
border-radius: 16px;
font-size: 13px;
font-weight: 500;
text-decoration: none;
transition: all 0.3s ease;
text-align: center;
/* Skema warna netral dan ringkas */
background-color: #eef2ff;
color: #4338ca;
border: 1px solid #c7d2fe;
}
/* Hover effect item label */
.mtmji-label-item:hover {
background-color: #4338ca;
color: #ffffff;
box-shadow: 0 3px 6px rgba(67, 56, 202, 0.2);
transform: translateY(-1px);
}
/* Styling pesan info/loading */
.mtmji-info-message {
color: #6b7280;
padding: 10px;
background-color: #f3f4f6;
border-radius: 8px;
text-align: center;
font-size: 14px;
}
</style>
<div class='mtmji-widget-header' onclick='mtmjiToggleLabels()'>
<div class="mtmji-main-title">
<span>Jelajahi Semua Kategori Artikel</span>
<span class="mtmji-arrow">▼</span> </div>
<span class="mtmji-subtitle">Temukan ratusan artikel informatif kami berdasarkan topik favorit Anda.</span>
</div>
<div id='mtmji-label-cloud-container'>
<div id='mtmji-label-cloud'>
<p class="mtmji-info-message">Memuat label...</p>
</div>
</div>
</div>
<script>
// Fungsi utama untuk memuat dan menampilkan label
function mtmjiDisplayModernLabels(json) {
// Menggunakan ID dengan prefix unik
const labelCloud = document.getElementById('mtmji-label-cloud');
let labelHtml = '';
if (json.feed.category && json.feed.category.length > 0) {
json.feed.category.forEach(category => {
const labelName = category.term;
// Membuat URL label yang benar untuk Blogger
const labelUrl = `https://mts-mji.blogspot.com/search/label/${encodeURIComponent(labelName)}`;
// Filter label
if (labelName.toLowerCase() !== 'uncategorized' && labelName.toLowerCase() !== 'tanpa label') {
labelHtml += `<a href='${labelUrl}' class='mtmji-label-item' role="button">${labelName}</a>`;
}
});
labelCloud.innerHTML = labelHtml;
} else {
labelCloud.innerHTML = '<p class="mtmji-info-message">Tidak ada label yang ditemukan di blog Anda.</p>';
}
}
// Fungsi untuk mengaktifkan/menonaktifkan (toggle) tampilan label (fungsi Accordion)
function mtmjiToggleLabels() {
// Menggunakan ID dan kelas dengan prefix unik
const container = document.getElementById('mtmji-label-cloud-container');
const header = document.querySelector('.mtmji-widget-header');
if (container.style.maxHeight === '0px' || container.style.maxHeight === '') {
// Buka: Set max-height ke scrollHeight (untuk menampung semua konten)
// Ditambah 30px untuk menampung padding bawah
container.style.maxHeight = container.scrollHeight + 30 + 'px';
header.classList.add('active');
} else {
// Tutup: Set max-height kembali ke 0
container.style.maxHeight = '0px';
header.classList.remove('active');
}
}
// --- PENTING: Memuat data label nyata dari feed Blogger Anda ---
// URL BLOG ANDA: https://mts-mji.blogspot.com/
</script>
<script src='https://mts-mji.blogspot.com/feeds/posts/default?alt=json-in-script&max-results=0&callback=mtmjiDisplayModernLabels'></script>
2. Tempelkan ke Gadget HTML/JavaScript
Buka Dasbor Blogger.
Buka menu Tata Letak (Layout).
Di sidebar (atau area widget pilihan Anda), klik Tambahkan Gadget.
Pilih jenis gadget HTML/JavaScript.
Kosongkan kolom Judul. (Widget ini sudah memiliki judul kustom di dalam kodenya).
Tempelkan SELURUH kode yang Anda salin dari bingkai di atas ke dalam kotak Konten.
Klik Simpan.
3. Simpan Tata Letak
Jangan lupa klik tombol Simpan pada halaman Tata Letak Blogger Anda untuk menerapkan perubahan di blog.
Tips dan Kustomisasi Tambahan (Opsional)
Jika Anda ingin mengubah warna widget agar lebih sesuai dengan tema blog Anda, cukup cari dan ubah kode warna berikut di bagian <style>:
Warna Header Utama: Cari
#1e3a8a(biru tua) dan ganti dengan kode warna yang Anda inginkan (misalnya, merah#B91C1Catau hijau#065F46).Warna Badge (Latar Belakang): Cari
#eef2ff(biru sangat muda) dan ganti dengan warna terang lainnya.Warna Badge (Teks & Hover): Cari
#4338ca(ungu/biru) dan ganti dengan warna aksen utama blog Anda.
Selamat berbagi pengetahuan dan meningkatkan navigasi blog Anda! 🚀
