Cara Membuat Daftar Isi dengan Jquery di Blog

Daftar isi pada blog sangat penting sekali karena dapat memudahkan pengunjung untuk mengetahui atau mencari artikel keseluruhan pada sebuah blog. Pada kesempatan ini kita akan membahas cara membuat daftar isi dengan efek Jquery di blog.

Kelebihan daftar isi dengan Jquery ini adalah pada tampilannya yang cukup menarik. Jika Anda ingin memasangnya di blog ikuti dan simak langkah-langkahnya berikut ini :

1. Login akun blogger Anda.
2. Pilih Template > Edit HTML > centang 'Expand Template Widget'.
3. Letakkan kode berikut 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/AVvXsEioE9euBhcps3wBYGC9_wb8XP_5KVzPEjZPYzg1iuj1RYJoQVX-bJ3jVbWxrdQNCI7Lr6RRQMt0eyB7NmIHXVzeG0LvUpRgwFxySBS2PdWXvE-eicBiAqAcsSDAzAWCfs3vdGvgeAkpws8/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/AVvXsEgzkiWw83Ovu7y7j1XPT8ojBapR7zPjIpEGYfw1sFoxndCaRNlPiIt_b2phiwQFYp7_YYL7WJOCWQjMoUPfpVcQXTqdVHT5ZBIL7jl7bj3n56QAWD4ngr8xhxusHRrWaiFMJZLaYWHOYWI/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/AVvXsEg2prQoWoMSSNpdT8xbdtzcttT0W1heEzVPnn6BxjvlrcmXik5J8fqhhZplKAo1s6lXADUNMNnT9av5xq8X6hS9KTAObfXfWJNMqCTUahr2qc5BrfI5llb-b53uWptobqxMr8_tqlbS8Hc/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. Kemudian letakkan juga kode berikut diatas kode </head>

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

5. Setelah itu Simpan template.
6. Langkah selanjutnya adalah memasang daftar isi di blog, letakkan kode dibawah ini pada HTML/JavaScript atau posting blog Anda pada mode HTML.

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

Keterangan:
Ganti kode yang berwarna merah diatas dengan alamat URL blog Anda.

Nah, sekarang blog Anda sudah terpasang daftar isi dengan efek Jquery yang menarik.