Membuat Daftar Isi Dengan Efek jQuery Accordion

Membuat Daftar Isi Dengan Efek jQuery Accordion | Dengan memasang daftar isi atau table of content akan mempermudah pengunjung mencari artikel yang mereka cari. Pada artikel saya sebelumnya juga pernah membahas tentang cara membuat menu accordion, nah untuk postingan sekarang ini saya juga akan membahas tentang cara membuat daftar isi dengan jquery accordion.

Daftar isi atau table of content untuk para blogger biasanya menamai sitemap. Sitemap ini biasanya terletak di atas atau bisa juga di footer, tergantung anda yang akan memasangnya. Supaya tidak berlama-lama, saya mulai bagaimana cara membuat dan memasang daftar isi / sitemap pada blogspot.

Liat Demonya disini..

Berikut langkah Membuat Daftar Isi / Sitemap Dengan Efek jQuery Accordion di Blogger :
1. Masuk ke Blogger
2. Klik Design / Rancangan
3. Pilih Edit HTML
4. Backup template anda dahulu
5. Cari kode ]]></b:skin> lalu letakkan kode di bawah ini 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);
}

6. Anda cari lagi kode </head> lalu copy kode di bawah dan paste di atas kode </head>

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

Jika pada template anda sudah ada script jquery seperti di atas, maka tidak usah lagi menambahkan script jquery tersebut dengan tujuan menghindari terjadinya konflik javascript.

7. Lalu simpan / save template

8. Selanjutnya sebagai script pemanggilnya, copy paste kode di bawah ini pada postingan (halaman statis) dalam posisi HTML bukan Compose

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

Keterangan :
Silahkan ubah nama URL yang berwarna biru dengan URL blog anda

Demikianlah artikel mengenai cara membuat daftar isi / table of content dengan efek jquery accordion, selamat mencoba dengan daftar isi yang keren ini, wassalam.