Membuat Daftar Isi Otomatis Pada Blog

Membuat daftar isi secara otomatis pada blog kita adalah sesuatu hal yang seharusnya dilakukan, tujuannya adalah mempermudah pengunjung untuk menemukan artikel yang mereka cari, serta membuat blog kita terlihat lebih menyenagkan dan profesional. Daftar ini yang mau aku bahas ini cara kerjanya : bisa menampilkan seluruh postingan yang ada di blog dan nama nya urut berdasarkan abjad ( julul posting ) sehingga lebih mudah digunakan oleh pengunjung, caranya tidak begiru susah, nah untuk membuat nya ikuti langkah langkah berikut ini :

1. Login ke Blogger

2. Pilih menu "Layout-->Edit HTML"

3. Beri tanda centang pada kotak "Expand Widgets Template".

4. Lalu Cari kode ini   ]]></b:skin> 

5. Setelah kode no 4 ditemukan, lalu copy kode di bawah ini ... ( di atas kode no 4 )

#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. Lalu Save Template nya.

Lalu  

 1.Pilih Layout ( Tata Letak ) >> Page Element ( Elemen Halaman )
 2.Add a Gadget ( Tambah Gadget )
 3.Pilih HTML/JavaScript dan copy paste aja kode ini di dalamnya:

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

Lalu simpan dan letakkan elemen halaman yang telah dibuat tersebut tepat diatas elemen post ( posting ) biar nanti daftar isinya ada di atas postingan seperti blog ini) jika ingin meletakkannya di tempat lain juga boleh.

Lalu langkah terakhir   

1.Pilih Layout ( Tata Letak ) >> Page Element ( Elemen Halaman ) lagi
2.Add a Gadget ( Tambah Gadget )
3.Pilih HTML/JavaScript dan copy paste aja kode ini di dalamnya:

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

Lalu save dan letakkan elemen halaman tersebut ditempat yang kamu kehendaki dan nama YOURBLOG ( gantilah dengan url alamat blog kamu )

Selamat mencoba semoga berhasil sob.