Membuat Daftar Isi With jQuery Accordion

Membuat daftar isi diblog hal ini sudah saya ulas sebelumnya yaitu mengenai membuat daftar isi otomatis dan manual, masih pada topik yang sama membuat daftar isi namun kali ini menggunakan jQuery Accordion. Tampilan  Daftar Isi With jQuery Accordion sangat menarik, karena link dapat bergoyang ketika disorot cursor. Sebagai contoh berikut ini saya tampilkan  Daftar Isi With jQuery Accordion




Daftar isi accordion ini memiliki efek animasi, dengan efek animasi menjadikan daftar isi terlihat rapih dan dinamis, bagi anda yang tertarik ingin memasang Daftar Isi With jQuery Accordion berikut ini langkah-langkahnya :

Membuat Daftar Isi With jQuery Accordion
1. Login keakun Blogger
2. Pilih Template » Klik Edit HTML
3. Selanjutnya anda cari kode ]]></b:skin>
4. Kemudian anda latakkan kode dibawah ini diatasnya

#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(43, 45, 200, 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: left;
}
.dafis-label:hover {
color: #F2F2F2;
}
.dafis-daf ol {
margin: 0 0 0 5px !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(32, 110, 252, 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. Selanjutnya anda cari kode </head> lalu letakkan kode dibawah ini diastasnya :

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

Note :

Apabila ditemplate anda sudah terdapat kode diatas silahkan anda melewati tahapan diatas.

6. Simpan Template

Menampilkan Daftar isi

Untuk menampilkan daftar isi diperlukan kode pemanggil dengan cara anda masuk kelaman baru » klik compose HTML » kemudian anda letakkan kode dibawah ini pada content yang tersedia

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

Note:

Kode yang saya beri warna merah silahkan anda ganti dengan URL Website/Blog anda

1000 adalah jumlah tampilan pada daftar isi

Kemudian anda publikasikan

Demikian Membuat Daftar Isi With jQuery Accordion , semoga bermanfaat!

Bagikan Artikel ini