Halaman Daftar Isi Otomatis Berdasarkan Label

Cara Membuat Halaman Daftar Isi Otomatis Berdasarkan Label di Blogger

Daftar isi otomatis di Blogger sangat membantu dalam mengorganisir konten agar lebih mudah diakses oleh pembaca. Dengan daftar isi berdasarkan label, artikel dalam blog bisa dikelompokkan secara otomatis sesuai kategori tertentu. Artikel ini akan membahas cara membuat halaman daftar isi otomatis berdasarkan label di Blogger, lengkap dengan kode dan optimasi SEO.

Mengapa Menggunakan Daftar Isi Otomatis Berdasarkan Label?

1. Memudahkan Navigasi – Pengunjung bisa langsung melihat daftar artikel dalam kategori tertentu.
2. SEO Friendly – Mempermudah pengindeksan artikel oleh mesin pencari.
3. Meningkatkan Waktu Kunjungan – Pengunjung lebih lama berada di blog karena mereka dapat menemukan lebih banyak artikel terkait.

Kelebihan Daftar Isi Otomatis Ini

1. Dilengkapi dengan tanda New! pada postingan yang terbilang baru dan cara menyettingnya pun juga mudah.
2. Menggunakan paginasi halaman yang dapat ditentukan sendiri berapa banyak postingan dalam 1 halaman.
3. Sudah berdasarkan label sehingga pengguna mudah dalam melakukan pencarian artikel sesuai kategori.
4. Sudah berurutan sesuai abjad untuk memudahkan pencarian artikel dan pengindeksan
5. Responsive

Langkah-Langkah Membuat Daftar Isi Otomatis Berdasarkan Label di Blogger

1. Buat Halaman Statis di Blogger.
2. Masuk ke dashboard Blogger.
3. Pilih Halaman > Halaman Baru.
4. Beri judul, misalnya: "Daftar Isi" agar halaman nantinya akan otomatis tersimpan sebagai /p/daftar-isi.html.
5. Pastikan saat membuat postingan ini dalam moda "Tampilan HTML"
6. Co-pas kode yang saya sertakan dibawah ke dalam postingan.

<div id="show-cat"></div>
<div id="show-post"></div>
<script type="text/javascript">
var cat_name,cat_start,cat_class,cat_home="https://www.onizukartz.my.id",cat_numb=15,cat_pre="Prev",cat_nex="Next",newDays=30,newLimit=5;function show_post2(t){var e=t.feed.openSearch$totalResults.$t,a="";a+="<ul>";var s=t.feed.entry;s.sort(function(t,e){return t.title.$t.localeCompare(e.title.$t)});for(var r=[],n=0;n<s.length&&!(isPostNew(s[n].published.$t)&&(r.push(s[n].title.$t),r.length>=newLimit));n++);for(var c=cat_start,n=0;n<cat_numb&&n<s.length;n++){for(var l=s[n],o=l.title.$t,i="",_=0;_<l.link.length;_++)if("alternate"==l.link[_].rel){i=l.link[_].href;break}a+="<li>",a+='<span style="float:left;padding:4px 4px 0 10px;min-width:19px;">'+c+".</span>",a+='<a href="'+i+'" rel="nofollow" title="'+o+'">'+o,r.includes(o)&&(a+=' <em style="color:white;background:red;font-style:italic;font-weight:bold;padding:1px 5px;font-size:.9em;border-radius:3px;">New</em>'),a+="</a>",a+="</li>",c++}a+="</ul>",a+='<div id="navi-cat">',1<cat_start&&(a+='<a href="" onclick="show_post(\''+cat_name+"','"+(cat_start-cat_numb)+"','"+cat_class+'\');return false" title="'+cat_pre+'">'+cat_pre+"</a>"),cat_start+cat_numb-1<e&&(a+='<a href="" onclick="show_post(\''+cat_name+"','"+(cat_start+cat_numb)+"','"+cat_class+'\');return false" title="'+cat_nex+'">'+cat_nex+"</a>"),a+="<span>"+cat_start,cat_start!=e&&(a+=" &ndash; "+(cat_start+s.length-1)),a+=" / "+e+"</span>",a+="</div>",document.getElementById("show-post").innerHTML=a+'<style type="text/css">.cat-'+cat_class+" a{background:#bbb!important;color:#fff!important}</style>"}function isPostNew(t){t=new Date(t);return(new Date-t)/864e5<=newDays}function show_post(t,e,a){var s=document.getElementsByTagName("head")[0],r=document.createElement("script");r.type="text/javascript",r.setAttribute("src",cat_home+"/feeds/posts/default/-/"+t+"?alt=json-in-script&start-index="+e+"&max-results="+cat_numb+"&callback=show_post2"),s.appendChild(r),cat_name=t,cat_start=parseInt(e),cat_class=a}function show_cat(t){var e=t.feed.category,a="";a+="<ul>",e.sort(function(t,e){return t.term.localeCompare(e.term)});for(var s=0;s<e.length;s++)a+='<li class="cat-'+s+'">',a+='<a href="" onclick="show_post(\''+e[s].term+"','1','"+s+'\');return false" title="',a+=e[s].term,a+='">',a+=e[s].term,a+="</a>",a+="</li>";a+="</ul>",document.getElementById("show-cat").innerHTML=a,0<e.length&&show_post(e[0].term,1,0)}document.write('<script type="text/javascript" src="'+cat_home+'/feeds/posts/default?alt=json-in-script&max-results=0&callback=show_cat"><\/script>');
</script>

Tambahkan juga di bawahnya CSS berikut.

<style scoped="scoped" type="text/css">
#show-cat{float:left;margin:0;width:20%;height:auto;overflow:auto;line-height:18px}
#show-cat ul{margin:0;border-top:5px solid #ba3c51;padding:0}
#show-cat ul li{list-style-type:none;margin:0;border-right:0 solid #ccc;border-bottom:0 solid #ccc;border-left:0 solid #ccc;padding:0}
#show-cat ul li a{display:block!important;padding:10px;border-bottom:1px solid #ccc}
#show-cat ul li a:focus{padding-left:18px;font-weight:700}
#show-cat ul li:last-child a{border-bottom:none}
#show-cat ul li a,#navi-cat a{background:linear-gradient(90deg,#cd3c3cff 0%,#91347cff 100%);color:#fff;transition:all .2s ease-in-out;text-decoration:none}
#show-cat ul li a,#navi-cat a,#navi-cat span{font-size:14px}
#show-cat ul li a:hover{background:#b8772c;color:#fff;padding-left:18px;transition:all .2s ease-in-out;font-weight:700}
#navi-cat a:hover{background:#b8772c;transition:all .2s ease-in-out;color:#fff}
#show-post{float:left;width:75%;border-top:5px solid #ba3c51;font-size:13px}
#show-post ul{padding:0;margin:0}
#show-post ul li{list-style-type:none;margin-left:0}
#show-post ul li a{padding:9px 10px;display:block;line-height:1.3em;word-wrap:break-word;text-decoration:none;color:#333}
#show-post ul li:nth-child(odd){background-color:#f9f9f9}
#show-post ul li:nth-child(even){background-color:#e9e9e9}
#show-post ul li:hover{background-color:#ddd}
#navi-cat{padding:20px 0 0;margin-left:0}
#navi-cat a{margin-right:10px;border:1px solid #ccc}
#navi-cat a,#navi-cat span{padding:5px 10px;border-radius:4px}
#navi-cat span{float:right;color:#222}
@media screen and (max-width: 768px) {
#show-cat{width:35%}
#show-post{width:59%}
}
@media screen and (max-width: 480px) {
#show-cat{width:100%;height:145px;margin:20px 0}
#show-post{width:100%}
}
</style>

7. Simpan postingan halaman daftar isi Anda dan Selesai

Demikian panduan untuk membuat daftar isi otomatis di halaman statis berdasarkan label semoga bermanfaat.