Trik Membuat Daftar Isi Dengan JQuery Di Blog

Trik Membuat Daftar Isi Dengan JQuery Di Blog. Daftar isi 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.

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

/* Daftar Isi With JQuery */ #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/AVvXsEiTiRR3BTd-bik7BpNUvEr5FDAi0-wIIZm5pJ6PTTzybrS16RHjqIIwIIEzXaIv_G3ut3md8GKJ24Vk5IyrO7-2Q1rJHEZSeObUWgG81UnNIMrUrbYBxl9NRQnOFT3DBme1XFq97Segmzc/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/AVvXsEitMw2m9VeIp_b3Wj7FaIkBtKsvs3pYu4EzuFOgmyLSptqR75wLSnstGmbPn2fgzg61ZizQ1mSFb2nH38uxtTl_isMWES8I-IRyw9igy398ttVD4V7CqFYyfI1SAkCIVHhK4WgJz-kF2Qg/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/AVvXsEjwPTMrQIla7gk8b749dxg8Gm4ecks1lSoXFjIzybCfYkvoTRrn9IS51s9XG1D_OvE6p-x9GOOj6xgeJStJbqtSZbLvnqfK8vQyzWJPs-yhtRAir7pZFvrUVUGNblACSrSQfxXJtkc98u4/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://dapurtutorial8.googlecode.com/files/Scriptdaftarisi1.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://dapurtutorial9.googlecode.com/files/Scriptdaftarisi2.txt"></script> <script src="http://badalirextor.blogspot.com/feeds/posts/summary?max-results=1000&amp;alt=json-in-script&amp;callback=loadtoc"></script>

Keterangan :
kode http://badalirextor.blogspot.com/ ganti dengan alamat blog sobat.

Demikian informasi saya tentang trik membuat daftar isi dengan JQuery di blog dan semoga bermanfaat. Jangan lupa setelah membaca informasi ini untuk menuliskan komentarnya. :)