Cara Membuat Daftar Isi Blog

Cara membuat dan memasang daftar isi blog secara otomatis - Selain memasang Related Posts atau Posting yang terkait atau yang berkaitan, alangkah baiknya jika kita membuat daftar isi pada blog kita di bagian sidebar atau di atas halaman posting blog. Kenapa? agar pengunjung blog kita bisa dengan mudah melihat semua isi posting yang ada di blog kita, yaitu dengan cara manual dan otomatis. Nah untuk postingan kali ini saya akan mengajak anda untuk berbagi tentang cara membuat daftar isi blog yang otomatis saja, karena untuk cara yang manual sudah saya postingkan kemarin disini.

Bagi anda yang mau memasang atau membuat daftar isi blog secara otomatis silahkan ikuti langkah berikut.

1. Langkah pertama

• Login dulu ke blog anda di www.blogger.com
  
  
• Klik Tata Letak atau Rancangan
  
  
• Lalu klik Edit HTML
  
  
• Copy kode CSS di bawah ini, dan paste diatas kode ]]></b:skin>
  
  
  
  
  #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;}
  
  
  
  
• Setelah selesai klik simpan
  

2. Langkah kedua

• Klik menu Elemen
  
  
• Klik Tambah Gadget
  
  
• Pilih HTML/java script
  
  
• Lalu masukkan kode dibawah ini
  
  <div id="toc"></div>
  <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:// NAMA BLOG ANDA .blogspot.com/feeds/posts/default?alt=json-in-script&max-results=999&callback=loadtoc"></script>
  
  
• Ganti tulisan yang berwarna merah di atas dengan nama blog anda
  
  
• Setelah itu klik Simpan
  
  
• Sekarang coba anda lihat hasilnya. Biasanya daftar isi blog nya akan jadi seperti ini