Cara membuat daftar isi otomatis yang bagus di blog

Cara membuat daftar isi otomatis yang bagus di blog

 Assalamualaikum warahmatullahi wabarokatuh
Malam sobat blogger, kali ini saya akan share tentang cara membuat daftar isi di blog yang bagus gan (saya juga googling dan nemu caranya di ariflaw.blogspot.. ya maksudnya otomatis gitu begitu kita posting baru, langsung masuk ke daftar isi, trus juga diurutkan sesuai label jadi teratue sob, terus juga sesuai abjad jadi enak gan ngeliatnya

Sobat bisa ngliat daftar isi saya di http://devilsabers.blogspot.com/p/blog-page_11.html 



Daftar isi itu sebenarnya banyak fungsinya, salah satunya buat navigasi, agar pengunjung juga lebih mudah menemukan artikel dalam blog kita.. 

Membuat daftar isi yang saya ajarkan berikut ini ada 2 versi, silahkan mau pilih yang mana..

oke langsung saja caranya :

1. Masuk ke account/ akun blogger anda


VERSI PERTAMA
Yang versi pertama ini anda bisa lihat pada bagian paling bawah sendiri blog saya, dan ini yang lebih saya suka dari versi kedua, sebab daftar isi bukan merupakan laman baru dan dalam bentuk html pada versi kedua. Saya sarankan gunakan yang ini saja.

 

1. Masuk ke Tata letak
2. Tambah gadget >> html java script >> lalu pastekan kode di bawah (yang warna biru dan merah bisa anda edit sesua kebutuhan)



<div style="border: 1px solid rgb(255, 255, 255); height: 400px; overflow: auto; padding: 10px; text-align: justify; width: 200px;"> <script src="http://ariflawblog.googlecode.com/files/daftar%20isi%20blog.js.js">
</script><script src="http://namabloganda.blogspot.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc">
</script>
</div>

3. Lalu simpan



VERSI KEDUA

1. Masuk ke akun blogger 
2. Lalu gunakan saja fasilitas laman blogger seperti gambar di bawah

3. Beri judul, lalu letakkan kode di bawah di bagian html, ingat! bukan yang compose. Trus kode yang warna merah diganti url blog sobat ya! Nih Kodenya :

<script src="http://ariflawblog.googlecode.com/files/daftar%20isi%20blog.js.js">
</script><script src="http://devilsabers.blogspot.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc">
</script> 

4. Kalo sudah klik pratinjau untuk melihat hasilnya, lalu publikasikan.

Selamat mencoba!