Cara membuat daftar isi blog dengan jjquery

Selamat sore sobat blogger, sore yang sangat panas disini. Untuk mengisi waktu yang kosong ini ane sharing ilmu blogging kepada sobat yaitu membuat daftar isi blog dengan tampilan jjquery. Berikut contoh screenshoot menu jjquery dari blog ane.

Gimana? 

Keren kan sobat?

Berikut langkah-langkahnya bagi yang ingin mencobanya.

1.  Login terlebih dahulu ke dasbor blogger sobat

2.  Kemudian pilih Tempalte > Edit HTML

3.  Jangan lupa ceklis Expand Widget Template

4.  Setelah itu sobat cari kode ]]></b:skin> dengan cara tekan Ctrl F lalu ketikkan kode tersebut

5.  Setelah ketemu, letakkan script berikut ini diatas kode ]]></b:skin> tadi

/* Daftar Isi With JQuery */ #dafis-acc{ font-family:"Trebuchet MS", Tahoma, Verdana, Arial, Helvetica, sans-serif; font-size:12px; color:#333; background:url(http://1.bp.blogspot.com/- Q0gQpqnpwdw/TggUQZh1y3I/AAAAAAAAANg/-9rHKcaz5JU/s320/bg5.gif) repeat-y scroll left center #E7F7FB; padding:2px 0; border:1px solid #339DC6; } .dafislabel{ background:url(http://2.bp.blogspot.com/- SlHI9wfcEy0/TggUQSS6hBI/AAAAAAAAANY/osNWdKWUfZQ/s1600/bg4.gif) repeatx scroll 0 0 #E1F4FB; font-weight:bold; line-height:1.4em; overflow:hidden; whitespace: 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(http://3.bp.blogspot.com/- x7WFTrEvdnY/TggUQNCYIkI/AAAAAAAAANQ/i8ZH9H_K_bg/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; lineheight: 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; textshadow: 0 1px 1px rgba(0,0,0,.3); }
6.  Selanjutnya cari kode </head> dan letakkan kode dibawah ini tepat diatas kode tersebut
         <script src='http://dapurtutorial8.googlecode.com/files/Scriptdaftarisi1.js'
            type='text/javascript'/>

7.  Simpan Template sobat
8.  Buat-lah sebuah postingan atau halaman dan pilih mode HTML, buat dengan judul Daftar Isi /
     Sitemap atau sesuka hati sobat.
9.  Lalu copy paste script dibawah ini
            <script type="text/javascript"
            src="http://dapurtutorial9.googlecode.com/files/Scriptdaftarisi2.txt"></script>
            <script src="http://williancessna.blogspot.com/feeds/posts/summary?maxresults=
            1000&amp;alt=json-in-script&amp;callback=loadtoc"></script>

10. Gantilah tulisan yang berwarna biru tersebut dengan url blog sobat.

Sekian dan liat hasilnya.
Semoga bermanfaat.....