Cara Membuat Daftar Isi Blog Dengan JQuery

Daftar isi pada blog merupakan salah satu fasilitas tambahan yang kita pasang pada blog dengan tujuan untuk memudahkan pengunjung blog dalam mencari informasi-informasi yang ada pada blog bersangkutan. Selain untuk maksud tersebut, daftar isi juga bisa memberikan penilaian tersendiri dari para pengunjung terhadap pengaturan-pengaturan tata letak informasi pada blog tersebut.

Share With Agung Talaga sebelumnya sudah pernah share artikel tentang tips memasang daftar isi pada blog. Sedikit saya review mungkin tentang artikel tersebut. Cara memasang daftar isi pada blog sebelumnya, lebih pas menurut saya jika dipasang pada sidebar blog dan cara pemasangannyapun cukup sederhana. Kalau berkenan untuk mengunjunginya, langsung saja ke artikel tersebut. Untuk daftar isi yang akan saya share pada postingan kali ini berbeda dengan sebelumnya. Sebagai gambaran awal dari dafta isi yang akan saya infokan pada postingan ini, silakan lihat daftar isi blog ini. Cara membuatnya pun menurutku tidak terlalu sulit juga. Untuk itu silakan praktekkan langkah-langkah berikut :

1. Silakan login ke akun blogger anda. Pada halaman akun blogger, silakan klik nama blognya.
2. Pada halaman overview silakan pilih menu template kemudian klik edit HTML dan klik lagi Proceed lalu aktifkan pilihan Expand Widget Template.
3. Pada halaman edit HTML blog anda, silakan cari kode ]]></b:skin> atau silakan tekan tombol ctrl + f untuk memudahkan pencarian kode. Kemudian copy kode di bawah ini dan letakkan di atas kode ]]></b:skin>.

#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/AVvXsEgmfTNSKvTm3mQtMReePDCTUbONgjwImyJN2QyyymSMmzhwa23kjzgsdeSt6wC6KacEgQYamSBR3XkLreFyeGPXHr75rU1HNdznpzV5E-bIEisy6StDe84SEPvblf2WxlGsQGwCaW_LJTY/s320/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/AVvXsEh1Mwvm8K4NVAEtT4gwWI5jd320ek1Otee5IrKTYIkTi6gzlisxuuR4u1Iz19iS0eDZ44uxjcLGzJLoJ498RV8NPLx7GKpP5kcSSi0OdMXCwGslrXV5-xbK6bxlKzKG5TWWeRQxbcOIC9g/s1600/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/AVvXsEij49MulWSwFRZtyT_U9x6Mk3YtApaPKPHnhvYQwASB1nJJG_EdVQwyJfB8KnSpXlrTxatb2m1LyXhx13-9lvVPjrC7awA3OXR6figUBP4s8Z8STrBh0zONISGcTrYVu22yIuDi8Lgn2Kk/s320/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); }

 4. Langkah selanjutnya silakan cari kode </head> lalu letakkan kode di bawah ini tepat di atas kode </head>.

<script src='http://share-with-agung-talaga.googlecode.com/files/daftar-isi-jquery.js' type='text/javascript'/>

5. Kemudian simpan templatenya dan close halaman edit HTML tersebut
6. Langkah terakhir, silakan buat postingan baru dan copy paste kode di bawah ini pada bagian mode HTML postingan baru Anda tersebut. Untuk judulnya, terserah Anda mau kasih judul apa.

<script type="text/javascript" src="http://share-with-agung-talaga.googlecode.com/files/daftar-isi-jquery3.txt"></script> <script src="http://agungtalaga.blogspot.com/feeds/posts/summary?max-results=1000&amp;alt=json-in-script&amp;callback=loadtoc"></script>

Keterangan :
kode http://agungtalaga.blogspot.com/ ganti dengan alamat blog Anda.

Demikian informasi saya tentang cara membuat daftar isi Blog dengan JQuery dan semoga bermanfaat. Jangan lupa setelah membaca informasi ini untuk menuliskan komentarnya.