Cara Membuat Daftar Isi Blog Otomatis

Tidak hanya pada buku, tapi blog juga bisa mempunyai sebuah daftar isi. Hmm,, dengan daftar isi pengunjung blog akan mudah menemukan artikel yang akan mereka baca. Sebagai contoh, di bagian sidebar blog ini telah saya pasang daftar isinya sehingga anda bisa menjelajahi blog ini tanpa keraguan akan tersesat, hehehe… Daftar isi tersebut saya buat secara manual (klik disini untuk cara membuat daftar isi manual). Tapi untuk anda yang baru di dunia Blogger dan malas ngetik, maka di tips kali ini akan saya jelaskan cara membuat daftar isi secara otomatis. Kenapa otomatis? Karena di setiap kali kita membuat artikel maka daftar isinya akan langsung bertambah dengan sendirinya. Mau tau caranya?

Berikut Cara Membuat Daftar Isi Blog:

1. Login ke akun Blogger anda

2. Pilih Layout > Edit HTML

3. Backup dulu template anda.

4. Cari kode ]]></b:skin>, lalu paste kode berikut tepat di atasnya:

#toc { border: 0px solid #000000; background: #ffffff; padding:2px; width:495px; margin-top:10px;}
.toc-header-col1, .toc-header-col2,
.toc-header-col3 { background: #B5CBFA; color: #000000; padding-left: 5px; width:250px;}
.toc-header-col2 { width:75px;}
.toc-header-col3 { 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:100%; text-decoration:none;}
.toc-header-col1 a:hover,
.toc-header-col2 a:hover,
.toc-header-col3 a:hover { font-size:100%; text-decoration:underline; color:#3D3F44;}
.toc-entry-col1, .toc-entry-col2, .toc-entry-col3 { padding-left: 5px; font-size:100%; background:#f0f0f0;}

5. Klik Save Template

6. Selanjutnya, pilih menu Page Elements

7. Tambahkan Page Elements dengan HTML/Javascript

8. Paste kode <div id="toc"></div> ke dalam kotak content, lalu klik Save

9. Pindahkan element tersebut ke atas element post

10. Tambahkan Page Elements dengan HTML/Javascript. Beri judul yang anda inginkan, lalu paste kode berikut ke dalam kotak content:

Kode untuk tampilan berbahasa Inggris:

<div id="toclink"><a href="javascript:showToc();">Daftar Isi</a><br/><br/></div><script style="text/javascript" src="http://tipsbloggerzacky.googlecode.com/files/blogtoc.js"></script><script src="http://NAMABLOGANDA.blogspot.com/feeds/posts/default?alt=json-in-script&max-results=999&callback=loadtoc"></script>

Kode untuk tampilan berbahasa Indonesia:

<div id="toclink"><a href="javascript:showToc();">Daftar Isi</a><br/><br/></div><script style="text/javascript" src="http://tipsbloggerzacky.googlecode.com/files/daftarisi.js"></script><script src="http://NAMABLOGANDA.blogspot.com/feeds/posts/default?alt=json-in-script&max-results=999&callback=loadtoc"></script>

Ganti tulisan NAMABLOGANDA dengan alamat blog anda.

11. Terakhir, klik Save untuk menyimpan element baru tersebut.

Selamat mencoba..

Jangan lupa kasih komentar ya…