Cara buat Daftar isi berbentuk tabel

Kali ini saya akan membagikan turtorial cara membuat daftar isi berbentuk tabel kepada sobat, daftar isi ini di lengkapi dengan menu dropdown yang membuat pengunjung lebih mudah untuk menemukan artikel yang di perlukannya.
Selain menu dropdown, daftar isi ini juga menggunakan scroll.. yang pasti sangatlah bagus untuk di pasang di gadget maupun di tampilan posting.

Rex Screen Shoot:

ini merupakan gambar ketika daftar isi tersebut masih loading label sobat....
penasarankan akan hasilnya???
nah klo yang di bawah ini, sudah selesai loading...

Rex Screen Shoot:

gmn? kerenkan?... yaudah lasg saja saya buat tortorialnya....
Untuk membuat daftar isi blog otomatis seperti di atas, kode yang digunakan adalah sebagai berikut :
1. Log in blog sobat
2. Masuk ke Dasbor > Tata Letak > Tambah Gadget > HTML/Javascript

<center>
<div style="-moz-box-shadow: inset 4px 4px 4px #404040; -webkit-box-shadow: inset 2px 2px 2px #404040; background: #ffff00; border: 10px double #000000; box-shadow: inset 2px 2px 2px #404040; color: black; float: center; font: normal 13px verdana; height: 350px; margin: 10px auto; overflow: auto; padding: 10px; text-align: left; text-shadow: 1px 1px 2px #fff; width: 320px;">
<div id="cl_option">
Masih loading mas bro/mba sis... sabar ya... </div>
<div id="cl_content_list">
</div>
<script type="text/javascript">
var jumlah_kata_dalam_ringkasan =200;
</script>
<script src="https://sites.google.com/site/bloggerbugisdotkom/javascript/Dafatar_isi_Biasa_Bloggerbugis.js" type="text/javascript">
</script>
<script src="http://www.rexroom.blogspot.com/feeds/posts/default?alt=json-in-script&callback=onLoadFeed&max-results=500" type="text/javascript">
</script>
<div style="color: black; float: right; font: normal 10px verdana; padding: 5px 0px; text-align: right; text-shadow: 1px 1px 1px #000;">
Widget by <a href="http://rexroom.blogspot.com/2012/10/cara-buat-daftar-isi-berbentuk-tabel.html">Great Works Of Art</a></div>
</div>
</center>

Kode di atas bisa di edit untuk menyesuaikan tampilannya dengan tema blog anda.
Perhatikan kode yang

#ffff00 adalah kode warna background ( Warna Latar Belakang ) yaitu Kuning. Ganti kode tersebut dengan kode warna yang anda inginkan untuk mengganti warna background widget Daftar isi

320 adalah Kode lebar widget. Ganti dengan angka yang lebih besar untuk membuat widgetnya lebih lebar atau ganti dengan angka yang lebih kecil untuk membuat widgetnya lebih sempit.

black adalah warna tulisan hitam. Silahkan ganti dengan warna yang anda inginkan. Adapun warna Link yang ada di dalam widget, tergantung dari pengaturan CSS template anda.

10 adalah kode ketebalan garis pinggir widget, yaitu garis pinggir ganda ( double ) dengan ketebalan 10 piksel ( 10px ) . Ganti dengan angka 10 yang lebih besar atau lebih kecil. Untuk membuat hanya 1 garis pinggir, ganti double dengan solid, untuk membuat garis pinggir putus - putus, ganti dengan dashed

#000000 adalah kode warna garis pinggir, ganti dengan kode warna yang anda inginkan.

Masih loading mas bro/mba sis... sabar ya... adalah kalimat yang di tampilkan jika widgetnya belum terbuka karena halaman masih loading. Silahkan ganti dengan kalimat yang anda inginkan.

500 adalah jumlah maksimal judul artikel yang akan di tampilkan di dalam widget daftar isi otomatis. Ganti dengan angka yang lebih besar atau lebih kecil.

Yang terakhir dan paling penting adalah kode www.rexroom.blogspot.com Ganti kode tersebut dengan URL / Alamat blog anda

<center > dan </center> digunakan jika sobat menggunakan daftar isi di halaman postingan

Untuk meliha contoh yang bisa anda klik silahkan kesini

Save dan silahkan di coba.....