Cara Membuat Daftar Isi Blog Dengan JQuery

Langkah-langkah Membuat Daftar Isi Blog Dengan JQuery sebagai 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/AVvXsEhvd3NWDhjU3Z_StQoYj60TXbvQngk8-2zYJdDEHOchyphenhyphenrKN8BnlR6knZTxhmCoHXUkEU6pnpuIbcGBsqj2rQ64QAN50mlq-DMQos06hScQpAyzim_QQWWDEQ4g6ypJ7BNkcPS0p-gPHoWo/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/AVvXsEh9XvvNa096m0TVn2VGLUCerJfgmGWsLPaSuUrYa3fhBHWPxiEMEdNljzyaGTrKIl2DRknhesltdj-G-spEM5T30ufvjjidWZtOVGqP95inSYc7uyY4RwdRhims1IIETp6w9gj8oBwnxm8/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/AVvXsEiR1z7aNvXspWRRYI-jctsqIKaP0edzwb0d3jFcTZZaftlcLJKzn7MyCBadhzP2_N1wpoCNvj304IhtfQe02_QBujEbQulyVJEup8IjDP7GknBDjLjZOof2czHh1X9oats4NaWYhyFELmw/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://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.