membuat daftar isi dg efek jquery 3

Pada postingan kali ini saya akan memberikan cara membuat daftar isi dg  menggunakan efek jquery accordion,
  jika tertarik kalian bisa mengikuti caranya seperti dibawah ini :
  • Masuk Design - Edit HTML
  • Jika diperlukan, kalian membuat backup template terlebih dahulu dengan cara men-Download Full Template untuk menghindari segala kesalahan.
  • Selanjutnya cari kode ]]></b:skin> dan letakan kode css dibawah ini diatas kode ]]></b:skin>

 #dafis-acc { font-family:"Trebuchet MS", Tahoma, Verdana, Arial, Helvetica, sans-serif; font-size:14px; } .dafis-label { background: rgb(125,126,125); background: -moz-linear-gradient(top, rgba(125,126,125,1) 0%, rgba(14,14,14,1) 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(125,126,125,1)), color-stop(100%,rgba(14,14,14,1))); background: -webkit-linear-gradient(top, rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%); background: -o-linear-gradient(top, rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%); background: -ms-linear-gradient(top, rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%); background: linear-gradient(top, rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7d7e7d', endColorstr='#0e0e0e',GradientType=0 ); -webkit-border-radius: 25px; -moz-border-radius: 25px; border-radius: 25px; color: #A1A1A1; text-transform: uppercase; font-weight: bold; line-height: 2em; margin: 1px 3px; cursor: pointer; outline: medium none; overflow: hidden; padding: 2px 10px; text-decoration: none; text-align: center; } .dafis-label:hover { color: #F2F2F2; } .dafis-daf ol { margin: 0 0 0 30px !important; padding: 0 !important; } .dafis-daf ol li { background: -moz-linear-gradient(top, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0) 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.65)), color-stop(100%,rgba(0,0,0,0))); background: -webkit-linear-gradient(top, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); background: -o-linear-gradient(top, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); background: -ms-linear-gradient(top, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); background: linear-gradient(top, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#00000000',GradientType=0 ); -webkit-border-radius: 25px; -moz-border-radius: 25px; border-radius: 25px; line-height: 1.3em; margin: 1px 3px !important; text-align: left; white-space: nowrap; } .dafis-daf ol li a { color:#991188  !important; display: block; padding-top: 5px; padding-left: 10px; text-decoration: none !important; } .dafis-daf ol li a:hover { color: f2f2f2; padding-left: 5px; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3); }
  • Kemudian cari kode </head> dan letakan kode dibawah ini diatas kode </head> 
  •    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>

    Kemudian simpan.

 Langkah terakhir Copy paste script dibawah ini pada postingan atau post page (halaman statis) dalam mode editor Edit HTML

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

 KET; warna merah ganti dg nama blog anda

 SELAMAT MENCOBA SEMOGA BERHASIL