Membuat Daftar Isi Otomatis

Salah satu bagian yang cukup penting dalam sebuah artikel adalah daftar isi, karena dengan itu pembaca bisa melihat isi dari artikel secara global tanpa harus membaca ( sudah tentu hanya judul saja ).

Pada website juga seperti itu, dengan adanya daftar isi atau minimal label posting, kita bisa membuat pengunjung / pembaca untuk tertarik berlama - lama.oke langsungsaja........

Langkah Pertama

* Login ke akun Blogger kamu.
* Dari halaman dashboard, pilih Edit HTML.
* Pada halaman Edit HTML, centang "Expand Template Widget", cari kode ]]>
* Copykan script berikut dan letakkan di atas kode ]]> tersebut.
* Tekan Control F atau F3 untuk mencarinya.


#toc { border: 0px solid #8A4B08; background: transparent; padding:2px; width:495px; margin-top:10px;}

.toc-header-col1, .toc-header-col2,

.toc-header-col3 { background: #8A4B08; color: transparent; 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: transparent;}



Keterangan :

* Warna hijau menunjukan kode warna yang bisa kamu ganti sesuai dengan warna blog kamu.



Simpan Template.


Langkah Kedua

1. Klik Page Element
2. Klik Add Gadget

1. 
   
2. Klik plus button (+) for HTML/JavaScript. (img)
   
   
   
3. Copy and paste kode dibawah ini

<div id="toclink"><a href="javascript:showToc();">LIHAT DAFTAR ISI</a><br /><br /></div>
<script style="text/javascript" src="http://sites.google.com/site/kibagusnet/x-design/blogtoc.js"></script>
<script src="http://bikinwebprofesional.blogspot.com/feeds/posts/default?alt=json-in-script&max-results=999&callback=loadtoc"></script>

<br />

<div style="-moz-background-clip: -moz-initial; -moz-background-inline-policy: -moz-initial; -moz-background-origin: -moz-initial; -moz-border-radius-bottomleft: 0px; -moz-border-radius-bottomright: 0px; -moz-border-radius-topleft: 0px; -moz-border-radius-topright: 0px; background: transparent url(#) no-repeat scroll 0 0 ; border: 1px solid rgb(204, 204, 204); height: 150px; margin: 10px 0px; overflow: auto; padding: 10px; text-align: center; width: auto;">

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

</div>

Keterangan :

* Pasang widget tersebut diatas posting, karena daftar isi ini membutuhkan tempat yang cukup lebar, kalau kamu ingin di pasang pada tempat lain dengan lebar minim tidak menjadi masalah karena pada script ini telah aku tambah script fungsi scroll ( warna kuning ) agar bisa fleksible dengan konsekuensi scroll akan muncul karena lebar template tidak cukup.

* Ganti kode >LIHAT DAFTAR ISI< style="border: 1px solid rgb(204, 204, 204); margin: 10px 0px; padding: 10px; overflow: auto; -moz-border-radius-bottomleft: 5px; -moz-border-radius-bottomright: 5px; -moz-border-radius-topleft: 5px; -moz-border-radius-topright: 5px; background-color: rgb(221, 242, 252); height: 150px; text-align: left; width: auto;">
<div id="toclink"><a href="javascript:showToc();">LIHAT DAFTAR ISI</a><br /><br /></div>
<script style="text/javascript" src="http://sites.google.com/site/kibagusnet/x-design/blogtoc.js"></script>
<script src="http://kibagus-homedesign.blogspot.com/feeds/posts/default?alt=json-in-script&max-results=999&callback=loadtoc"></script>
"LIHAT DAFTAR ISI"



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

* Kode kedua adalah Isi dari daftar isi yang akan muncul pada saat kamu klik pada link
Oke...selamat mencoba ya...