Cara Membuat Daftar Isi Otomatis di Blogspot

Cara Membuat Daftar Isi Otomatis di Blogspot - Menyajikan tampilan blog yang sangat menarik dan nemiliki kualitas tampilan dengan kecepatan loading yang sangat ringan, merupakan salahsatu hal yang membuat pengunjung betah berlama - lama menjelajahi blog kita.

Selain hal itu, masih banyak trik dan rahasia untuk menggaet para visitor agar tetap betah didalam blog kita. Dimulai dari penerapan konsep internal sampai dengan eksternal atau non-teknis.

Seperti yang telah diketahui, banyak para blogger berusaha menyajikan konten yang relevan untuk disuguhkan kepada pengunjungnya. Tentu hal itu akan sangat berdampak terhadap kestabilan trafik dan penghasilannya.

Oleh karena itu berikanlah pengunjung dengan tampilan yang maksimal, jangan setengah setengah. Perhatikanlah navigasi halaman, halaman pendukung, info website dan sitemap atau daftar isi. Dengan adanya daftar isi, pengunjung bisa memfilter artikel sesuai dengan keinginannya. Biasanya sitemap tersusun berdasarkan tanggal publikasi artikel, dengan tambahan kategori atau label.

Lalu Bagaimana Cara Membuat Daftar Isi Otomatis di Blogspot?

Sangat mudah sekali jika kamu mengeti bahasa html dan javascript namun jika kamu masih awam apa bisa membuatnya? tenang saja. Kali ini saya akan memberikan sintaks javascript untuk membuat daftar isi di blogger atau blogspot yang akan tersusun secara otomatis setiapkali kamu mempublikasikan artikel.

Script ini bukan asli buatan saya, saya menemukannya dari salahsatu blog di google. Tapi blognya lupa lagi, soalnya script ini sudah lama saya gunakan. Mungkin diantara kalian ada yang tau, bisa beritahukan saya melalui kolom komentar.
DemoScriptnya tidak terlalu banyak dan tidak sulit juga untuk diterapkan kedalam blog. Dan script ini juga tidak akan memberikan efek negatif bagi kecepatan loading blog kalian. Oke langkah - langkahnya sebagai berikut:

Terlebih dahulu kalian buat Laman baru.
Kemudian beri Judul Daftar Isi, Sitemap atau bisa juga yang lainnya terserah kalian.
Selanjutnya simpan script dibawah in dibagian HTML, bukan Compose ya,..

<style scoped="" type="text/css">
#bp_toc {background:#10BE73;color:#666;margin:0 auto;padding:5px;}
span.toc-note {padding:20px;margin:0 auto;display:block;text-align:center;color:#FAFAFA;font-family:'Trebuchet MS';font-weight:700;text-transform:uppercase;font-size:30px;line-height:normal;}
.toc-header-col1 {padding:10px;background-color:#f5f5f5;width:250px;}
.toc-header-col2 {padding:10px;background-color:#f5f5f5;width:75px;}
.toc-header-col3 {padding:10px;background-color:#f5f5f5;width:125px;}
.toc-header-col1 a:link, .toc-header-col1 a:visited, .toc-header-col2 a:link, .toc-header-col2 a:visited, .toc-header-col3 a:link, .toc-header-col3 a:visited {font-size:13px;
text-decoration:none;color:#aaa;font-family:'Trebuchet MS';font-weight:700;letter-spacing: 0.5px;}
.toc-header-col1 a:hover, .toc-header-col2 a:hover, .toc-header-col3 a:hover {
text-decoration:none;}
.toc-entry-col1, .toc-entry-col2, .toc-entry-col3 {background:#fdfdfd;padding:5px;padding-left:5px;font-size:89%}
.toc-entry-col1 a, .toc-entry-col2 a, .toc-entry-col3 a{color:#666;font-size:13px;}
.toc-entry-col1 a:hover, .toc-entry-col2 a:hover, .toc-entry-col3 a:hover{color:#e76e66;}
#bp_toc table {width:100%;margin:0 auto;counter-reset:rowNumber;}
.toc-entry-col1 {counter-increment:rowNumber;}
#bp_toc table tr td.toc-entry-col1:first-child::before {content: counter(rowNumber);min-width:1em;margin-right:0.5em;}
td.toc-entry-col2 {background:#fafafa;}
#comments {display:none;}
</style>

Selanjutnya kalian publikasikan Laman tersebut.

Untuk mengganti warna background, kalian bisa mengubah kode warna heksa desimal yang bercetak tebal (#10BE73) menjadi yang kalian inginkan

Demo

Label: Ngeblog, ZAMP