Cara Membuat Daftar Isi Blog Dengan Efek JQuery

Artikel ini saya buat hanya iseng-iseng saja agar nanti suatu saat ketika saya membutuh jadi tidak usah cari kemana-mana cukup di sini saja.

Sesungguhnya Trik Cara Membuat Daftar Isi Dengan Efek JQuery sudah banyak akan tetapi alangkah baiknya kita buat postingan sendiri agar File yang sekiranya menurut anda itu penting apa boleh tidak kalau kita menyimpannya di blog sendiri.

Trik ini sumbernya ada di blog temannya saya Nama Blognya "Blogger Tune Up" blog ini sudah menjadi inspirasi saya dalam mendesain blog dengan cara yang benar, Sudah banyak Tip dan Trik yang dia berikan sama temen-temen blogger. Khususnya pada saya sendiri, mari kita simak langkah-langkahnya dibawah  ini.

Langkah 1
Login ke Blogger
Langkah 2
Masuk ke "Rancangan - Edit HTML"
Langkah 3
Cari kode dibawah ini:


]]></b:skin>

Langkah 4
Masukan (copy paste) kode CSS dibawah ini diatas 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/AVvXsEh0xSqrloC6y3bGl1tvCwCdNpdjquGihYOW-PAzoZYjumzuKDDkq57nxRI_4NsACce1LRzbHoBLbv3zFWXhbuXotUn1tT2YtE2gOCJTxwsXetOkQRp7d5uE5-Qni3yds6Gee1DTEHPYzXE/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/AVvXsEgrNvZqZBhTnv0lM7s4dSPk3M6bWdY5NB4vEByXp0zmBuWm_6EV0MHfIY3KuQrm7kSariVzok53CDo0UdJjN7ksxnoG4w0VGAXjN-CrcfeCFPD5LfhDPckmjRuCdvSU_i-P_5pBBX_LFfw/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/AVvXsEgjUDkHkog680eTr_VXOSLvYlkO7Uboan4lcDn-JXt4N6gGa4hLu9-IuJIhxS0B7pjOayKot8p0xCT8DxeMEJQIg7TyDCArIG7BmcrYdIYoZKkOBpGN2fx9Vi5j-yKbDkLG06hAo6JvDq8/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);
}

Langkah 5
Cari kode dibawah ini:

</head>

Langkah 6
Masukan (copy paste) kode dibawah ini diatas kode </head>

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'/>

Langkah 7
Simpan template blogger anda...


Perhatikan Keterangan Dibawah ini :
Langkah A
Buat sebuah artikel dengan judul terserah anda (misal; Daftar Isi atau Table of Content)
Langkah B
Pindahkan mode Editor artikel ke mode Edit HTML
Langkah C
Masukan (copy paste) kode dibawah ini ke dalam artikel :

<script type="text/javascript" src="URL/dafis_accv1.js"></script>
<script src="http://budidayaikanbelut.blogspot.com/feeds/posts/summary?max-results=1000&amp;alt=json-in-script&amp;callback=loadtoc"></script>

Langkah D
Ubah URL yang saya cetak tebal dengan URL anda