Cara Membuat Daftar Isi Otomatis di Blogspot Berdasarkan Label Tertentu

Cara Membuat Daftar isi Otomatis Berdasarkan Label Tertentu 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. 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.

Blogger lain membaca Cara Membuat Tabs Dengan JQUERY dan CSS di Blogspot

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 mengerti 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.

Demo

Scriptnya 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:

Cara Membuat Sitemap Otomatis di Blogspot dan Responsive

• Terlebih dahulu kalian buat Laman baru untuk daftar isi tersebut
• 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>
<script src=”https://cdn.rawgit.com/BloggerSpice/Sitemap/master/sitemap.js” type=”text/javascript”></script> <script src=”/feeds/posts/summary?alt=json-in-script&amp;max-results=9999&amp;callback=loadtoc” type=”text/javascript”></script>

• Selanjutnya kalian publikasikan Laman tersebut.

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

Itulah cara membuat daftar isi otomatis untuk blog dengan platform blogspot yang juga responsive menyesuaikan perangkat yang digunakan user untuk mengakses blog.