Optycon-Tutorial Blog: Membuat Daftar Isi

Pernahkah kawan membaca buku? Dalam buku itu pasti ada daftar isinya.Nah... yang ingin saya terangkan saat ini adalah bagaimana cara membuat sebuah Daftar isi blog secara otomatis. Yahuiii......dengan hanya sekali kita membuatnya maka daftar isi tidak usah di buat berulang-ulang namun terus bekerja secara otomatis. Tertarik untuk membuatnya? silahkan ikuti langkah-langkah berikut :

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 ]]>

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

6. 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 kawan 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 kawan

12. Klik tombol Simpan

13. Pindahkan elemen yang baru di buat ke tempat yang kawan senangi (sebaiknya di simpan disebelah atas)

14. Klik tombol SIMPAN yang berada di sebelah atas

15. Selesai

Kode yang terakhir di pasang merupakan kode yang berbahasa inggris, jika kawan menginginkan jadi berbahasa indonesia. Cara yang harus di lakukan sangatlah mudah, kawan ganti saja 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" /> 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