Membuat Daftar Isi Dengan Efek jQuery Accordion

Daftar isi atau table of content yang biasa kita sebut dengansitemap, merupakan fasilitas yang penting dan sangat berguna terutama untuk pengunjung blog untuk bisa lebih mudah menelusuri isi dari suatu blog, dengan tampilan yang elegant dan efek yang lembut menjadikan daftar isi bisa menjadi pilihan untuk melengkapi blog kalian.

Daftar isi yang akan saya share sekarang ini akan menggunakan efek jquery accordion, dengan efek jquery akan menampilkan efek yang lembut dan css akan membentuk tampilan yang lebih menarik. Script jquery accordion ini dibuat oleh teman netterku dalam dunia blog saudara Hendriono, sedangkan saya hanya memodifikasi bagian css untuk bentuk tampilannya. Untuk melihat bagaimana bentuk tampilan dan efek yang dihasilkan dari jquery accordion, kalian bisa meng-klik link demo dibawah ini :

Demo Daftar Isi JQuery

Bagaimana menurut kalian? tertarik untuk membuatnya dalam blog kalian? 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: #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);
}

• 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'/>

Penting!!! periksa dalam tag head template kalian, jika sudah ada script jquery tersebut diatas, kalian tidak perlu menambahkan script jquery tersebut (cukup satu saja script jquery)dimaksudkan untuk menghidari konflik script, karena script yang dibuat berdasar perintah javascript termasuk jquery sebagai turunan javascript, rentan terjadi bentrok antar script.

• Save template kalian.

Script dibawah ini adalah untuk menampilkan daftar isi, kalian bisa meletakan padapostingan, widget atau bisa memanfaat halaman statis sebagai media untuk menampilkannya, untuk cara menggunakan halaman statis, kalian bisa membacanya pada Cara Membuat Halaman Statis.

• 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://situseo.blogspot.com/feeds/posts/summary?max-results=1000&amp;alt=json-in-script&amp;callback=loadtoc"></script>

Keterangan : ganti url blog yang berwarna merah dengan url blog kalian.

Semoga bermanfaat,