Menyediakan halaman daftar isi atau sitemap khusus merupakan langkah strategis untuk meningkatkan kenyamanan pengunjung blog Anda. Dengan adanya struktur navigasi yang mengelompokkan artikel berdasarkan label atau kategori, pembaca tidak akan kesulitan mencari informasi spesifik yang mereka butuhkan. Hal ini secara otomatis akan memperbaiki pengalaman pengguna (UX) dan berdampak positif pada nilai SEO blog, karena durasi kunjungan pembaca berpotensi menjadi lebih lama.
Langkah Mudah Memasang Daftar Isi Otomatis dan Rapi di Blogger
Anda tidak membutuhkan keahlian coding tingkat lanjut untuk membuat sitemap yang fungsional. Cukup terapkan langkah-langkah praktis berikut, dan halaman daftar isi Anda akan langsung bekerja mengumpulkan seluruh artikel secara otomatis:
- Masuk terlebih dahulu ke dashboard akun Blogger Anda.
- Arahkan kursor ke panel menu sebelah kiri, pilih Halaman (Pages), kemudian klik tombol Halaman Baru (New Page).
- Ketikkan judul halaman sesuai keinginan Anda, contohnya "Daftar Isi", "Sitemap", atau "Index Artikel".
- Langkah paling penting: Ubah mode penulisan dari Tampilan Menulis (Compose view) ke Tampilan HTML (HTML view). Jika langkah ini dilewatkan, kode script hanya akan muncul sebagai teks biasa di halaman Anda.
- Salin seluruh rangkaian kode (CSS dan JavaScript) di bawah ini, lalu tempelkan (paste) ke dalam kotak editor HTML tersebut.
Kode HTML, CSS, dan Script Daftar Isi
Berikut adalah barisan kode yang telah dioptimasi agar memuat data dengan cepat (fast loading) dan menyusun daftar artikel berdasarkan urutan label yang ada di blog Anda:
<!-- Gaya Tampilan (CSS) Daftar Isi -->
<style type="text/css">
#sitemap-wrapper {
background: #ffffff;
border: 1px solid #e3e3e3;
border-radius: 5px;
padding: 20px;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
line-height: 1.6;
}
.sitemap-title {
font-size: 18px;
font-weight: bold;
color: #222;
border-bottom: 2px solid #0056b3;
padding-bottom: 8px;
margin-bottom: 15px;
}
.label-group {
margin-top: 20px;
font-size: 16px;
font-weight: 600;
color: #444;
text-transform: capitalize;
background: #f8f9fa;
padding: 5px 10px;
border-left: 3px solid #0056b3;
}
.post-list {
list-style: none;
margin: 10px 0 0 0;
padding: 0;
}
.post-list li {
padding: 5px 0 5px 15px;
position: relative;
border-bottom: 1px dashed #eee;
}
.post-list li::before {
content: "\2022";
color: #0056b3;
font-weight: bold;
position: absolute;
left: 0;
}
.post-list li a {
text-decoration: none;
color: #0056b3;
transition: all 0.3s;
}
.post-list li a:hover {
color: #ff5722;
text-decoration: underline;
}
</style>
<!-- Area Tampil Daftar Isi -->
<div id="sitemap-wrapper">
<div class="sitemap-title">Kumpulan Artikel Blog</div>
<div id="sitemap-content">Sedang memuat artikel...</div>
</div>
<!-- Script Pemanggil Data Artikel -->
<script type="text/javascript">
function buildSitemap(json) {
var contentArea = document.getElementById('sitemap-content');
var entries = json.feed.entry;
var htmlString = '';
if (!entries || entries.length === 0) {
contentArea.innerHTML = '<p>Belum ada artikel yang diterbitkan.</p>';
return;
}
var labelCollections = {};
// Proses pengelompokan data berdasarkan label
for (var i = 0; i < entries.length; i++) {
var entry = entries[i];
var postTitle = entry.title.$t;
var postUrl = '';
var postLabel = 'Tanpa Label';
for (var j = 0; j < entry.link.length; j++) {
if (entry.link[j].rel === 'alternate') {
postUrl = entry.link[j].href;
break;
}
}
if (entry.category && entry.category.length > 0) {
postLabel = entry.category[0].term;
}
if (!labelCollections[postLabel]) {
labelCollections[postLabel] = [];
}
labelCollections[postLabel].push({ title: postTitle, link: postUrl });
}
// Membangun struktur HTML dari data yang sudah dikelompokkan
for (var labelName in labelCollections) {
htmlString += '<div class="label-group">' + labelName + '</div>';
htmlString += '<ul class="post-list">';
var postItems = labelCollections[labelName];
for (var k = 0; k < postItems.length; k++) {
htmlString += '<li><a href="' + postItems[k].link + '">' + postItems[k].title + '</a></li>';
}
htmlString += '</ul>';
}
contentArea.innerHTML = htmlString;
}
</script>
<script src="/feeds/posts/default?alt=json-in-script&max-results=500&callback=buildSitemap" type="text/javascript"></script>
- Terakhir, setelah memastikan semua kode masuk dengan benar, klik tombol Publikasikan (Publish) di pojok kanan atas layar Anda.
Selesai! Sekarang Anda bisa membuka halaman tersebut untuk melihat hasilnya. Halaman ini akan secara otomatis memperbarui dirinya sendiri setiap kali Anda menerbitkan artikel baru. Susunan kode ini sudah dirancang dengan struktur yang bersih agar tetap selaras dengan prinsip-prinsip SEO teknis, sehingga performa loading halaman blog Anda tetap optimal.