Membuat Daftar Isi Dengan Jquery Accordiaon

Salam hangat semuanya,jumpa lagi bareng hansmjlkcommunity,kali ini saya akan sedikit mengulas tentang cara Membuat Daftar Isi Jquery Accordion Keren Abis,meletakan daftar isi pada blog sangat penting guna memberi kemudahan kepada pengunjung untuk mengetahui isi artikel dari blog sobat,dengan tampilan yang dinamis daftar isi jquery ini memberikan kenyamanan baik kepada pengunjung atau kepada pemilik blog.

DEMO

untuk sobat yang mau coba coba silahkan ikuti tutorialnya di bawah ini.

1. Pastikan sobat sudah login ke akun blog sobat.
2. Pilih menu Template / Rancangan kemudian Edit HTML.
3. Cari kode ]]></b:skin> (gunakan CTRL+F)
4. Letakan Kode CSS di bawah ini,tepat di atas 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: #333333 !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);
}

5. kemudian cari kode </head> dan letakan script di bawah tepat di atas kode </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/

jquery.min.js' type='text/javascript'/>

6. Kemudian copy scrip di bawah ini dan letakan pada postingan bagian HTML,widget,atau halaman statis.

Ganti Tulisan yang berwarna merah dengan URL blog sobat.

7. Setelah semuanya di lakukan kemudian pratinjau terlebih dahulu lalu save.

Gimana mudah kan......silahkan buat yang minat coba saja langsung semoga berhasil.