Membuat Daftar Isi Blog

Nggak sengaja waktu surfing di internet, tiba2 aq melihat sebuah situs. Yang lebih menariknya situs tersebut menyediakan daftar isi dari keseluruhan postingannya selama ini. Lama2 aq juga penasaran, Gimana ya cara bikinnya?? dan nggak lama kemudian setelah tengok sana sini akhirnya aq menemukan juga script codenya.

Buat teman2 yang pengen membuat daftar isi Blog silahkan ikuti langkah 2 di bawah ini:

Langkah pertama :

1. Sign in di blogger
2. Klik menu Layout
3. Klik menu Edit HTML
4. Klik link Download full template, silahkan save untuk backup data
5. Copy paste kode CSS berikut di atas kode ]]></b:skin>

#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;}

Klik tombol SIMPAN TEMPLATE

Langkah kedua :

1. Klik menu Elemen Halaman
2. Klik tulisan Tambah sebuah Elemen Halaman
3. Klik tombol TAMBAHKAN KE BLOG di bawah tulisan JavaScript/HTML
4. Copy paste kode berikut ke dalam elemen yang muncul

   <div id="toc"></div>

5. Klik tombol Simpan
6. Pindahkan elemen yang baru di buat tepat di atas elemen Post
7. Klik tombol Simpan yang berada di sebelah atas
8. Klik tulisan Tambah sebuah Elemen Halaman kembali
9. Klik tombol TAMBAHKAN KE BLOG di bawah tulisan JavaScript/HTML
10. Beri judul elemen tersebut dengan yang kata yang sobat ke hendaki. Contoh : DAFTAR ISI, kemudian copy paste kode berikut ke dalam kotak elemen <div id="toclink"><a href="javascript:showToc();">Lihat Daftar Isi</a><br/><br/></div> <script style="text/javascript" src="http://home.planet.nl/~hansoosting/downloads/blogtoc.js"></script> <script src="http://YOURBLOG.blogspot.com/feeds/posts/default?alt=json-in-script&max-results=999&callback=loadtoc"></script>
11. Ganti tulisan YOURBLOG dengan nama blog sobat
12. Klik tombol Simpan
13. Pindahkan elemen yang baru di buat ke tempat yang sobat sukai (sebaiknya di simpan disebelah atas)
14. Klik tombol SIMPAN yang berada di sebelah atas
15. Selesai

Kode yang terakhir ini merupakan kode asli yang di buat oleh hans. Cara yang harus di lakukan sangatlah mudah, tinggal mengganti kode terakhir yang di pasang dengan kode di bawah ini :

<div id="toclink"><a href="javascript:showToc();"><img src="http://amen24.googlepages.com/folder.gif"/> &nbsp;&nbsp;Lihat Daftar Isi !</a><br/><br/></div> <script style="text/javascript" src="http://amen24.googlepages.com/daftarisi.js"> </script><script src="http://YOURBLOG.blogspot.com/feeds/posts/default?alt=json-in-script&max-results=999&callback=loadtoc"></script>

Jangan lupa untuk mengganti tulisan YOURBLOG dengan nama blog kamu.
Selamat mencoba ! dan Suksess