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.

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:

  • 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

WAJIB DIKETAHUI : Iklan yang tampil pada halaman situs ini sepenuhnya diatur oleh pihak google, kami hanya menyediakan slot kosong. Jadi apabila ada iklan yang kurang berkenan atau menyinggung perasaan anda harap informasikan kepada kami melalui formulir kontak web ini untuk selanjutnya akan kami sampaikan ke pihak Google

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

2 Komentar

  1. Kebetulan dong Gan,, Scriptnya masih work kok,,

  2. wah kebetulan ini yang saya cari gan ty