Buat daftar isi blog

Apakah sobat suka membaca buku? jawaban sobat
tentunya akan beragam, ada yang akan menjawab suka dan ada juga yang
akan menjawab tidak suka. Namun saya yakin sobat pernah membaca sebuah
buku. Dalam sebuah buku ada satu bagian yang dinamakan daftar isi,
dengan adanya daftar isi buku maka akan mempermudah pembaca buku
tersebut untuk menemukan bagian-bagian isi buku yang ingin di baca.
Pertanyaan yang mungkin muncul adalah apa hubungannya antara buku dengan
blog? tak hanya sebuah buku yang bisa memuat daftar isi untuk
mempermudah para pembacanya, didalam sebuah blog pun kita bisa
melakukannya, contoh yang bisa dilihat adalah saya memuat judul-judul
artikel yang pernah saya posting di bagian footer halaman ini ataupun
ketika sobat membuka keluruhan artikel yang mau di baca maka di akhir
artikel akan muncul sederet judul-judul artikel lainnya yang menggoda
sobat untuk membacanya. Selain untuk menggoda pengunjung agar lebih
berlama-lama di blog kita, cara ini pun akan sangat mempermudah para
pembaca untuk menemukan artikel yang di rasa menarik untuk di baca. Akan
tetapi cara tersebut saya lakukan secara manual yakni saya mencatat
seluruh alamat artikel yang telah saya posting kemudian membuatkan link
ke artikel tersebut.

Teknik pembuatan daftar isi di atas bisa saja kita lakukan, akan
tetapi tentunya perlu waktu yang lama untuk mebuatnya dan tentunya
akan menyita waktu kita. Nah... yang ingin saya terangkan saat ini
adalah bagaimana cara membuat sebuah Daftar isi blog secara
otomatis. Yupppsss.. dengan hanya sekali kita membuatnya maka daftar
isi tidak usah di buat berulang-ulang namun terus bekerja secara
otomatis, teknik ini di perkenalkan oleh hans yang di muat melalui
blognya

beautiful beta. Agar tidak bingung tentang daftar isi blog
yang akan saya terangkan, silahkan alihkan perhatian sobat ke bagian
sebelah kanan atas blog ini, di sana terdapat link brtuliskan
Lihat Daftar Isi, jika sobat meng klik link tersebut maka secara
otomatis akan di perlihatkan seluruh judul artikel yang pernah saya
posting lengkap dengan tanggal serta kategori dari artikel tersebut.
Sunguh menarik bukan? jika sobat ingin melihatnya sobat bisa
mengkliknya dan jika sobat tidak ingin melihatnya sobat tinggal
mengkliknya kembali dan daftar isi pun akan di sembunyikan sehingga
tidak akan menggangu pemandangan. Tertarik untuk membuatnya?
silahkan ikuti langkah-langkah berikut :

Langkah pertama :

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

#toc { border: 0px solid #000000; background: #ffffff; padding:2px; width:495px; margin-top:10px;}<br /> <br /> .toc-header-col1, .toc-header-col2,<br /> <br /> .toc-header-col3 { background: #B5CBFA; color: #000000; padding-left: 5px; width:250px;}<br /> <br /> .toc-header-col2 { width:75px;}<br /> <br /> .toc-header-col3 { width:125px;}<br /> <br /> .toc-header-col1 a:link, .toc-header-col1 a:visited,<br /> <br /> .toc-header-col2 a:link, .toc-header-col2 a:visited, .toc-header-col3 a:link, <br /> <br /> .toc-header-col3 a:visited { font-size:100%; text-decoration:none;}<br /> <br /> .toc-header-col1 a:hover, <br /> <br /> .toc-header-col2 a:hover,<br /> <br /> .toc-header-col3 a:hover { font-size:100%; text-decoration:underline; color:#3D3F44;}<br /> <br /> .toc-entry-col1, .toc-entry-col2, .toc-entry-col3 { padding-left: 5px; font-size:100%; background:#f0f0f0;}<br />
Klik tombol SIMPAN TEMPLATE

Langkah kedua :

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

<br /> <div id="toc"></div><br />
Klik tombol Simpan
Pindahkan elemen yang baru di buat tepat di atas elemen
Post
Klik tombol Simpan yang berada di sebelah atas
Klik tulisan Tambah sebuah Elemen Halaman kembali
Klik tombol TAMBAHKAN KE BLOG di bawah tulisan
JavaScript/HTML
Beri judul elemen tersebut dengan yang kata yang sobat ke
hendaki. Contoh : DAFTAR ISI, kemudian copy paste kode berikut
ke dalam kotak elemen

<br /> <div id="toclink"><a href="javascript:showToc();">Lihat<br /> Daftar Isi</a><br/><br/></div><br /> <script style="text/javascript"<br /> src="http://home.planet.nl/~hansoosting/downloads/blogtoc.js"></script><br /> <script<br /> src="http://YOURBLOG.blogspot.com/feeds/posts/default?alt=json-in-script&max-results=999&callback=loadtoc"></script><br />
Ganti tulisan YOURBLOG
dengan nama blog sobat
Klik tombol Simpan
Pindahkan elemen yang baru di buat ke tempat yang sobat
sukai (sebaiknya di simpan disebelah atas)
Klik tombol SIMPAN yang berada di sebelah atas
Selesai

Kode yang terakhir di pasang merupakan kode asli yang di buat oleh
hans dan tentunya semua hasil dari kode tersebut berbahasa inggris,
baik itu judul , alert dan segala macamnya adalah berbahasa inggris,
jika sobat menginginkan jadi berbahasa indonesia, saya sudah
memodifikasi javascrips nya sehingga akan menjadi berbahsa indonesia
seperti milik saya. Cara yang harus di lakukan sangatlah mudah,
sobat tinggal mengganti kode terakhir yang di pasang dengan kode di
bawah ini :