Cara Membuat Daftar Isi Secara Otomatis di Blogspot

Cara Membuat Daftar Isi Secara Otomatis di Blogspot - Menyajikan tampilan blog yang sangat menarik dan memiliki kualitas tampilan dengan kecepatan loading yang sangat ringan, merupakan suatu hal yang membuat pengunjung merasa betah berlama - lama berselancar di blog kita. Selain hal demikian, 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 sebab itu berikanlah sajian kepada pengunjung dengan tampilan yang maksimal, jangan setengah setengah. Perhatikanlah navigasi halaman blog Anda, halaman pendukung, info website dan sitemap serta 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 yang telah Anda sediakan sebelumnya.
Kemudian Bagaimana Cara Membuat Daftar Isi Secara Otomatis di Blogspot?
Jika Anda mengerti bahasa html dan javascript, akan terasa sangat mudah sekali, namun jika Anda masih awam, kira-kira bisakah Anda membuatnya? Tenang saja. Kali ini saya akan memberikan sintaks javascript untuk membuat daftar isi di blogger atau blogspot yang akan tersusun secara otomatis setiap kali Anda mempublikasikan sebuah artikel.

Script tersebut tidak terlalu banyak, dan juga tidak sulit untuk diterapkan ke blog Anda. Serta script ini juga tidak akan memberikan efek negatif bagi kecepatan loading blog kalian. Nah, perhatikan langkah-langkahnya sebagai berikut :

Terlebih dahulu Anda buat Laman baru pada dashboard blog Anda.
Lalu beri Judul "Daftar Isi" (tanpa tanda petik), "Sitemap" atau bisa juga yang lainnya sesuka hati Anda.
Kemudian 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>
<br />

<div id="bp_toc" style="max-height: 100%;">
</div>

<script src="https://cdn.rawgit.com/BloggerSpice/Sitemap/master/sitemap.js" type="text/javascript"></script>
<script src="/feeds/posts/summary?alt=json-in-script&max-results=9999&callback=loadtoc" type="text/javascript"></script>

Dan langkah selanjutnya Anda hanya mengklik publikasikan pada laman yang Anda isi dengan script tadi.

NB : Untuk mengganti warna background, Anda bisa mengubah kode warna heksa desimal ini #10BE73 menjadi warna yang Anda inginkan.

Ilmu dan Cara

Cara Membuat Daftar Isi Secara Otomatis di Blogspot

free

Artikel Terkait