Daftar isi jelas digunakan untuk melihat apa saja yang dibahas dalam sebuah buku. Demikian pula pada blog, daftar isi di tampilkan agar pembaca mengetahui apa saja yang dibahas pada blog tersebut. dengan demikian daftar isi sangat berperan dalam keaktifan pengunjung untuk melihat isi dari blog yang kita miliki.

Pemasangan daftar isi pada blog yang diletakkan pada posisi sidebar ataupun pada footer widget tidaklah sulit. untuk lebih jelasnya silahkan ikuti langkah cara membuat daftar isi di blog berikut ini :

  • Silahkan login ke dasbor blog terlebih dahulu.
  • Klik panah kebawah seperti pada gambar yang diberi kotak merah :

  • Pilih >> Layout (Tata Letak)
  • Kemudian akan muncul halaman seperti gambar berikut ini :


  • Pilih Add Gadget (Tambah Gadget)



  • Pilih HTML/Javascript Untuk memasang Kode HTML Widget.
  • Masukkan judul yang sobat inginkan pada kolom judul, misalnya saja "Daftar Isi"
  • Copy-paste kan kode dibawah ini pada kolom yang tersedia (bukan kolom judul)
<style type='text/css'>
#dafis-acc{ font-family:"Trebuchet MS", Tahoma, Verdana, Arial, Helvetica, sans-serif; font-size:12px; color:#333; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLRASfJ_bPUJYyWowEqxHHI74BSwpBjkHYnLX_zz63dwzDTAt9pNI0em7HF-WsTy3SUQlwGNttBYEI0d7A1rxeTCylkxNFzGiaPmCK8V5AVkHN7M1n2zdBs-glvvH-fbrBc7jVIooXKAE/d/bg5.gif) repeat-y scroll left center #E7F7FB; padding:2px 0; border:1px solid #339DC6; } .dafis-label{ background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9J6BR0J3xfUHd4SSEKO5VpXBiSM2pppTqeGtbgMdqanvFKa8O0dd8yfa8T5JAQJL-sdvY9Vgboj_zDh8hZKF4JTCHwJKiuslc4gHrOB54iHMs6vlTS3iGGzuYmXCN749vUwv6US0qOe8/d/bg4.gif) repeat-x scroll 0 0 #E1F4FB; font-weight:bold; line-height:1.4em; overflow:hidden; white-space:nowrap; vertical-align: baseline; margin: 1px 3px; outline: none; cursor: pointer; text-decoration: none; padding: 2px 10px; color: #fff; text-shadow: 0 1px 1px rgba(0,0,0,.3); border:1px solid #2F94BA; } .dafis-label:hover{ background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTrzlM8u1V1-uXbwag9h6Q89AAOauxLRoxqWBCu8eHO6Ko9r0zyyy5kOexcmHYdgZVu6vupaxXqQzL148lyJbG_d7J-NUTafQHcKpBsbgHOc53IQF0blxl2l3ml21g1KBtLBL8bpsfYYs/d/bg2.gif) repeat-x scroll 0 0 #E1F4FB; color:#003366; } .dafis-daf ol{ margin:0 0 0 30px !important; padding:0 !important; } .dafis-daf ol li{ background-color:#C9E9F4; line-height:1.5em; margin:1px 3px !important; white-space:nowrap; text-align:left; border:1px solid #339DC6; } .dafis-daf ol li a{ text-decoration: none !important; color:#333 !important; display:block; padding-left:10px; } .dafis-daf ol li a:hover{ background: #7BC4DF; border-left: 5px #333 solid; padding-left: 5px; text-shadow: 0 1px 1px rgba(0,0,0,.3); }
</style>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'></script>
<script type="text/javascript" src="http://infonetmu.googlecode.com/files/Acc1.js"></script>
<script src="http://waroenkblog.blogspot.com/feeds/posts/summary?max-results=1000&amp;alt=json-in-script&amp;callback=loadtoc"></script>
  • Silahkan sobat ganti kode link berwarna merah diatas dengan link URL blog sobat.
  • Setelah sobat ganti kemudian save (simpan) pengaturan sobat dan lihat hasilnya pada homepage blog sobat.
Demikian diatas telah sobat baca bahasan saya tentang Cara membuat daftar isi di blog. semoga artikel kali ini lebih bermanfaat dari artikel sebelumnya.