Daftar Isi Blog Tampilan Dinamis dengan jQuery

Jika sebelumnya kita membahas daftar isi otomatis jquery navigasi maka sekarang kita coba membuat 'Daftar Isi Blog' dengan tampilan dinamis accroding dapat menggunakan jQuery seperti gambar di atas. Caranya gampang sobat Blogger, ikuti petunjuk berikut:

1. Login ke akun blogger anda
2. Pilih Entri Baru/Buat laman baru atau bisa menambahkan di Tata letak kemudian widget
3. Pilih tab Htlm di sebelah tab compose pada jendela posting jika ditempatkan dalam posting/laman. untuk widget silahkan tambahkan gadget di tata letak
4. Copy dan pastekan kode di bawah ini ke dalam posting/atau laman atau juga widget baru:

<style type='text/css'> 
#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/AVvXsEisBkQDdp-vSGO_vZuoOBsnUA9TBONPjIbQT7QyK2Bcg_cOhf0Fx4kQgyYY23k15z2mypVWMgt8wI0kclmXBh8Ev4Ifpx-BB1zugwfxa6B1u39JqBWgFrGt1kU0rAZVeN0vKdQq5x7IzH8/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/AVvXsEjG_eeuyzVyYNEDlkjm3I8i966v0KZN4rIWF857cGRMzRFoAx-dzDkoGQdvKLhdpt5C6zZCOXgSArJOJmLmx3O_vOveGSilltzJWL1mg1G0tpp2_vnUwAeL_JW5yOe3gDD_QKn7lVyirTs/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/AVvXsEiEpSruRcFF1IA4fcWKvLgNW39XPO7ZUVNqatoeib8nK-dh1g9CBt333Do-uw3ALG34u26S0p1RrOz9-Pr4Uip2v04FCfNSOzEw11E4OTduVI2GbobSRT92tdvTfuBBItRypXWdouIqQDA/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); 
} 
</style> 
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'></script> 
<script type="text/javascript" src="http://infonetmu.googlecode.com/files/Acc1.js"></script> 
<script src="http://defandaky.blogspot.com/feeds/posts/summary?max-results=1000&amp;alt=json-in-script&amp;callback=loadtoc"></script>

5. Jangan lupa ubah url blog warna biru dengan blog anda
6. Simpan/Publikasikan hasil dari kerja sobat

Semoga berguna...