Kode HTML sitemap digunakan untuk menampilkan daftar semua artikel dalam satu halaman Blogger. Dengan halaman ini, pengunjung bisa melihat seluruh postingan tanpa harus membuka satu per satu.
Hal ini sangat membantu terutama jika blog sudah memiliki banyak artikel dan ingin membuat navigasi lebih mudah.
Apa Itu Sitemap HTML di Blogger
Sitemap HTML adalah halaman yang berisi kumpulan link artikel dalam blog. Halaman ini dibuat khusus untuk pengunjung agar lebih mudah menemukan konten.
Berbeda dengan sitemap XML yang digunakan mesin pencari, sitemap HTML lebih fokus pada tampilan dan kenyamanan pengguna.
Manfaat Menggunakan Sitemap
Sitemap membantu pengunjung melihat semua artikel dalam satu tempat. Ini membuat blog lebih mudah dijelajahi.
Selain itu, sitemap juga membantu memperkuat struktur internal link sehingga artikel lebih mudah ditemukan.
Contoh Penggunaan di Blogger
Sitemap biasanya dipasang di halaman statis seperti halaman "Daftar Isi". Saat dibuka, halaman ini akan menampilkan semua judul artikel secara otomatis.
Tampilan bisa dibuat sederhana atau disesuaikan dengan kebutuhan.
Kode HTML Sitemap Blogger
Berikut kode yang bisa langsung digunakan untuk menampilkan daftar artikel secara otomatis.
<div id="sitemap-container"></div>
<script type="text/javascript">
var jumlahArtikel = 100;
function ambilData(url) {
var script = document.createElement('script');
script.src = url;
document.getElementsByTagName('head')[0].appendChild(script);
}
function tampilkanSitemap(data) {
var html = '<ul>';
for (var i = 0; i < data.feed.entry.length; i++) {
var judul = data.feed.entry[i].title.$t;
var link = '';
for (var j = 0; j < data.feed.entry[i].link.length; j++) {
if (data.feed.entry[i].link[j].rel == 'alternate') {
link = data.feed.entry[i].link[j].href;
break;
}
}
html += '<li><a href="' + link + '">' + judul + '</a></li>';
}
html += '</ul>';
document.getElementById('sitemap-container').innerHTML = html;
}
ambilData('/feeds/posts/default?alt=json-in-script&max-results=' + jumlahArtikel + '&callback=tampilkanSitemap');
</script>
Cara Memasang di Blogger
Melalui Halaman
Buat halaman baru di Blogger, lalu pilih mode HTML. Tempelkan kode di atas, kemudian publikasikan.
Menyesuaikan Jumlah Artikel
Ubah nilai jumlahArtikel sesuai kebutuhan agar semua postingan bisa ditampilkan.
Tips Tambahan
Anda bisa menambahkan tampilan sederhana agar daftar artikel lebih rapi.
#sitemap-container ul {
list-style: none;
padding: 0;
}
#sitemap-container li {
padding: 6px 0;
border-bottom: 1px solid #ddd;
}
#sitemap-container a {
text-decoration: none;
color: #333;
}
#sitemap-container a:hover {
color: #007bff;
}
CSS ini ringan dan aman digunakan di Blogger.
FAQ
Apakah kode ini aman?
Aman, karena hanya menampilkan data dari feed Blogger.
Apakah bisa menampilkan semua artikel?
Bisa, selama jumlahArtikel disesuaikan.
Apakah bisa diubah tampilannya?
Bisa, Anda bisa menambahkan CSS sesuai kebutuhan.
Kesimpulan
Sitemap HTML membantu menampilkan semua artikel dalam satu halaman. Dengan kode sederhana ini, Anda bisa membuat halaman daftar isi tanpa perlu mengubah template.
Cara ini mudah digunakan dan cocok untuk semua blog Blogger.