Tutorial Buat Daftar Isi Sitemap HTML Sederhana Untuk Blogspot - Verity Lane Blog

Sitemap HTML adalah halaman web yang dirancang untuk membantu pengguna dan mesin pencari menemukan dan mengakses berbagai halaman di sebuah situs web. Berbeda dengan sitemap XML yang digunakan oleh mesin pencari untuk mengindeks situs, sitemap HTML lebih fokus pada pengalaman pengguna.

Berikut adalah beberapa poin penting tentang sitemap HTML:

1. Navigasi Pengguna: Sitemap HTML biasanya berisi daftar tautan ke berbagai halaman di situs web, sering kali diatur dalam struktur hierarkis yang memudahkan pengguna untuk memahami bagaimana situs diorganisir dan menemukan halaman yang mereka cari.

2. Kemudahan Akses: Ini berguna terutama pada situs web yang besar atau kompleks, di mana navigasi standar mungkin tidak mencakup semua halaman. Dengan sitemap HTML, pengguna dapat dengan cepat melihat seluruh struktur situs.

3. SEO: Meskipun sitemap HTML bukan alat utama untuk SEO, keberadaannya dapat membantu mesin pencari dalam proses crawling dan indexing. Ini juga bisa menjadi sinyal positif bahwa situs berusaha untuk memudahkan akses informasi bagi pengunjung.

4. Desain: Biasanya, sitemap HTML disajikan dengan tampilan yang sederhana, sering kali berupa daftar atau tabel yang mencakup semua halaman penting di situs.

Secara keseluruhan, sitemap HTML berfungsi untuk meningkatkan pengalaman pengguna dengan memberikan cara yang jelas dan mudah untuk menavigasi seluruh situs web.

Screenshot penampakan sitemap HTML:

Berikut kode untuk membuat daftar isi sitemap HTML yang sederhana:

<!--HTML-->
<div id="label-select">
<label>Pilih Label :</label>
<select id="selectlabel"></select>
</div>
<div id="daftar-isi"></div>

<!--JAVASCRIPT-->
<script>
let config = { blogURL: "https://www.veritylaneblog.com/", labelDefault: "", showDate : true, orderBy : "updated"};!async function(){let{blogURL:e,orderBy:t,showDate:n,labelDefault:a}=config,l=document.getElementById("selectlabel"),r=document.getElementById("daftar-isi"),s=await fetch(e+"/feeds/posts/summary?alt=json&max-results=0"),o=await s.json();if(!s.ok){r.innerHTML='<p style="color:red">Terjadi Error.</p>';return}o.feed.category.forEach(function(e){let t=document.createElement("OPTION");t.value=encodeURIComponent(e.term),t.innerText=e.term,a===e.term&&(t.selected=!0),l.appendChild(t)});let i=await fetch(e+"/feeds/posts/summary/-/"+l.value+"?alt=json"),d=await i.json();function f(e){let t=e.feed.entry;if(!t||0===t.length){r.innerHTML="<p>No posts.</p>";return}let a="<ol>";for(let l=0;l<t.length&&t.length!==l;++l){let s=t[l],o,i=s.title.$t,d=s.updated.$t;d=(d=d.split("T")[0].split("-"))[2]+"/"+d[1]+"/"+d[0],d=n?" <span>("+d+")</span></li>":"",s.link.forEach(function(e){"alternate"===e.rel&&(o=e.href)}),a+='<li><strong><a href="'+o+'">'+i+"</a></strong>"+d}a+="</ol>",r.innerHTML=a}f(d),l.addEventListener("change",async function(){f(await (await fetch(e+"/feeds/posts/summary/-/"+l.value+"?alt=json&orderby="+t)).json())})}();
</script>

<!--CSS-->
<style>
#label-select{display:flex;flex-wrap:wrap;align-items:center;gap:10px}#label-select label{font-weight:700}#label-select select{min-width:100px;padding:5px 7px;border:1px solid rgba(37,37,37,.18);border-radius:4px;background:#f5f5f5;color:#333}#daftar-isi ol{padding:0 0 0 25px;margin:10px 0}#daftar-isi ol li{padding:6px 0}#daftar-isi ol li span{opacity:.8}
</style>

Ganti url warna hijau dengan url blog anda