Cara Membuat Daftar Isi Blogger Berdasarkan Label Otomatis

 

Cara Membuat Daftar Isi Blog Berdasarkan Label Blogger Secara Otomatis

Memiliki blog dengan banyak artikel tentu membutuhkan navigasi yang baik agar pengunjung dapat menemukan konten yang mereka cari dengan mudah. Salah satu cara terbaik untuk meningkatkan pengalaman pengguna adalah dengan membuat daftar isi blog berdasarkan label.

Pada platform Blogger, daftar isi berdasarkan label dapat dibuat secara otomatis menggunakan script sederhana. Dengan fitur ini, semua artikel yang memiliki label tertentu akan muncul secara rapi dalam sebuah halaman khusus.

Selain membantu pembaca menjelajahi blog, daftar isi berdasarkan label juga dapat memberikan manfaat SEO karena membuat struktur website menjadi lebih jelas bagi mesin pencari seperti Google.

Dalam artikel ini, kita akan membahas cara membuat daftar isi blog berdasarkan label Blogger secara otomatis, mulai dari pembuatan halaman, pemasangan kode, hingga optimasi agar lebih SEO friendly.

Mengapa Membuat Daftar Isi Blogger Berdasarkan Label?

Membuat daftar isi berdasarkan label bukan hanya untuk mempercantik tampilan blog. Ada beberapa manfaat penting yang bisa didapatkan.

1. Mempermudah Pengunjung Menemukan Artikel

Ketika jumlah artikel semakin banyak, pengunjung mungkin kesulitan menemukan konten tertentu.

Dengan daftar isi berdasarkan label, mereka dapat langsung memilih kategori yang sesuai dengan kebutuhan.

Misalnya pembaca ingin mencari artikel tentang SEO, mereka cukup membuka label SEO tanpa harus melihat semua postingan.

2. Meningkatkan User Experience Blog

Google semakin memperhatikan pengalaman pengguna dalam menentukan kualitas sebuah website.

Navigasi yang jelas membuat pengunjung:

• lebih lama berada di blog
• membuka lebih banyak halaman
• lebih mudah menemukan informasi

Hal ini dapat memberikan sinyal positif untuk SEO.

3. Membantu Struktur SEO Blog

Daftar isi berdasarkan label membantu mesin pencari memahami hubungan antarartikel di dalam blog.

Struktur seperti:

Homepage → Label → Artikel

membuat blog memiliki susunan yang lebih terorganisir.

4. Membuat Blog Terlihat Profesional

Blog yang memiliki halaman daftar isi biasanya terlihat lebih serius dan terpercaya.

Pengunjung dapat melihat seluruh koleksi artikel yang tersedia dengan tampilan yang lebih rapi.

Cara Membuat Daftar Isi Blog Berdasarkan Label Blogger

Ikuti langkah langkah sebagai berikut ya geng :

1. Masuk ke Blogger.com

2. Pada Menu Blogger , Pilih Halaman Page

3.Jika Compose View , bisa di ubahkan terlebih dahulu untuk HTML View

Lalu Masukan Kode Sebagai berikut

<style>

p.labels a{color: #242424; text-transform: uppercase;font-size: 15px;}

a.post-titles {}

ol li{list-style-type:decimal;line-height:25px;}

</style>

<script>

//<![CDATA[

var postTitle=new Array();var postUrl=new Array();var postLabels=new Array();var postRecent=new Array();function sitemaplabel(a){function b(){if("entry" in a.feed){var d=a.feed.entry.length;numberfeed=d;ii=0;for(var h=0;h<d;h++){var n=a.feed.entry[h];var e=n.title.$t;var j;for(var g=0;g<n.link.length;g++){if(n.link[g].rel=="alternate"){j=n.link[g].href;break}}var o="";for(var g=0;g<n.link.length;g++){if(n.link[g].rel=="enclosure"){o=n.link[g].href;break}}var c="";if("category" in n){for(var g=0;g<n.category.length;g++){c=n.category[g].term;var f=c.lastIndexOf(";");if(f!=-1){c=c.substring(0,f)}postLabels[ii]=c;postTitle[ii]=e;postUrl[ii]=j;if(h<10){postRecent[ii]=true}else{postRecent[ii]=false}ii=ii+1}}}}}b();sortBy="titleasc";sortPosts(sortBy);sortlabel();tocLoaded=true;displayToc2()}function sortPosts(d){function c(e,g){var f=postTitle[e];postTitle[e]=postTitle[g];postTitle[g]=f;var f=postUrl[e];postUrl[e]=postUrl[g];postUrl[g]=f;var f=postLabels[e];postLabels[e]=postLabels[g];postLabels[g]=f;var f=postRecent[e];postRecent[e]=postRecent[g];postRecent[g]=f}for(var b=0;b<postTitle.length-1;b++){for(var a=b+1;a<postTitle.length;a++){if(d=="orderlabel"){if(postLabels[b]>postLabels[a]){c(b,a)}}}}}function sortlabel(){sortBy="orderlabel";sortPosts(sortBy);var a=0;var b=0;while(b<postTitle.length){temp1=postLabels[b];firsti=a;do{a=a+1}while(postLabels[a]==temp1);b=a;sortPosts2(firsti,a);if(b>postTitle.length){break}}}function sortPosts2(d,c){function e(f,h){var g=postTitle[f];postTitle[f]=postTitle[h];postTitle[h]=g;var g=postUrl[f];postUrl[f]=postUrl[h];postUrl[h]=g;var g=postLabels[f];postLabels[f]=postLabels[h];postLabels[h]=g;var g=postRecent[f];postRecent[f]=postRecent[h];postRecent[h]=g}for(var b=d;b<c-1;b++){for(var a=b+1;a<c;a++){if(postTitle[b]>postTitle[a]){e(b,a)}}}}function displayToc(a){var l=0;var h="";var e="Post Title";var c="Category";var j="";if(postFilter!=""){j="Click to view all"};if(l==postTitle.length)var b=document.getElementById("toc");b.innerHTML=f+h}function displayToc2(){var a=0;var b=0;while(b<postTitle.length){temp1=postLabels[b];document.write("<p/>");document.write('<p class="labels"><a href="/search/label/'+temp1+'">'+temp1+"</a></p><ol>");firsti=a;do{document.write("<li>");document.write('<a class="post-titles" href="'+postUrl[a]+'">'+postTitle[a]+"</a>");if(postRecent[a]==true){document.write(' - <strong><span style="color: rgb(255, 0, 0);">Baru!</span></strong>')}document.write("</li>");a=a+1}while(postLabels[a]==temp1);b=a;document.write("</ol>");sortPosts2(firsti,a);if(b>postTitle.length){break}}};

//]]>

</script>

<script src="https://www.narasimichael.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=sitemaplabel"></script>

4. Setelah habis masukkan kode , save / Update untuk halaman page nya.

Note : 

untuk url https://www.narasimichael.com , bisa di ganti dengan url anda sendiri

Terakhir update: August 07, 2026

Location:

Michael Handy seseorang yang ingin terus belajar dan tidak takut untuk salah dan keinginan kuat untuk menjadi orang yang sukses

Share :