Cara Membuat Daftar Isi | Berdasarkan Kategori

Setelah di artikel sebelumnya saya telah membagikan cara membuat daftar isi berdasarkan tanggal, sekarang waktunya membagi cara membuat daftar isi atau sitemap berdasarkan kategori di blogspot. Hasilnya lebih kurang seperti gambar dibawah ini.

Bagaimana menurut anda, apakah menarik?

Daftar isi atau sitemap merupakan salah satu komponen penting dari sebuah blog atau website. Jika diibaratkan daftar isi itu adalah sebuah peta. Jika mengunjungi sebuah lokasi baru tanpa ada petunjuk sama sekali sudah pasti akan membuat anda tersesat. Lebih kurang seperti itulah analogi daftar isi dari sebuah blog. Nah bagaimana cara membuat daftar isi di blog, ikuti petunjuk berikut:

1. Login ke akun blogger anda
2. Pilih "Template" dan klik "edit HTML"
3. Cari tag ini ]]></b:skin>, gunakan Ctrl-F dalam mencari
4. Paste kode berikut sebelum tag ]]></b:skin>
   

   .judul-label{ 
   background-color:#E5ECF9; 
   font-weight:bold; 
   line-height:1.4em; 
   margin-bottom:5px; 
   overflow:hidden; 
   white-space:nowrap; 
   vertical-align: baseline; 
   margin: 0 2px; 
   outline: none; 
   cursor: pointer; 
   text-decoration: none; 
   font: 14px/100% Arial, Helvetica, sans-serif; 
   padding: .5em 2em .55em; 
   text-shadow: 0 1px 1px rgba(0,0,0,.3); 
   -webkit-border-radius: .5em; 
   -moz-border-radius: .5em; 
   border-radius: .5em; 
   -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2); 
   -moz-box-shadow: 1px 1px 4px #AAAAAA; 
   box-shadow: 0 1px 2px rgba(0,0,0,.2); 
   color: #e9e9e9; 
   border: 2px solid white !important; 
   background: #6e6e6e; 
   background: -webkit-gradient(linear, left top, left bottom, from(#888), to(#575757)); 
   background: -moz-linear-gradient(top,  #888,  #575757); 
   filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#888888', endColorstr='#575757'); 
   } 
   .data-list{ 
   line-height:1.5em; 
   margin-left:5px; 
   margin-right:5px; 
   padding-left:15px; 
   padding-right:5px; 
   white-space:nowrap; 
   text-align:left; 
   font-family:"Arial",sans-serif; 
   font-size:12px; 
   } 
   .list-ganjil{ 
   background-color:#F6F6F6; 
   } 
   .headactive{ 
       color: #fef4e9; 
       border: 2px solid white !important; 
       background: #1C8DFF; 
       background: -webkit-gradient(linear, left top, left bottom, from(#9dc2e7), to(#438cd2)); 
       background: -moz-linear-gradient(top,  #9dc2e7,  #438cd2); 
       filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#9dc2e7', endColorstr='#438cd2'); 
   }

5. Simpan tapi belum selesai ya..
6. Selanjutnya, Klik "Laman", "Laman baru" dan "Laman kosong"
   
   


7. Paste kode dibawah ini di bagian "HTML"
   
   

   <script src="http://nurulimaminfo.googlecode.com/files/daftarisiv2-pack.js">
   
   </script> 
   <script src="http://www.Diaripribadi.blogspot.com/feeds/posts/summary?max-results=1000&amp;alt=json-in-script&amp;callback=loadtoc">
   </script> 
   <script type="text/javascript">
   var accToc=true; 
   </script> 
   <script src="http://deroc.googlecode.com/files/accordion-pack.js" type="text/javascript">
   </script>

   
   Ganti Diaripribadi.blogspot dengan blog anda.
    
8. "Simpan" dan "Publish". Pekerjaan selesai!

Setelah blog anda memiliki daftar isi, tentunya mulai sekarang pengunjung blog anda tidak akan pernah tersesat lagi. Oke guys, demikianlah sedikit penjelasan mengenai cara membuat daftar isi di blogspot. Semoga membantu.