Daftar isi yang akan kita buat sekarang ini akan menggunakan efek jquery accordion, dengan efek jquery akan menampilkan efek dan bentuk yang lebih menarik. Untuk melihat bagaimana bentuk tampilan dan efek yang dihasilkan dari jquery accordion, kalian bisa meng-klik link demo dibawah ini :
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.
- Copy paste script dibawah ini pada postingan atau post page (halaman statis) dalam mode editor Edit HTML
<script type="text/javascript" src="http://hanjscript.googlecode.com/files/JqueryDaftarIsiAccording.js"></script>
<script src="http://deejayhan.blogspot.com/feeds/posts/summary?max-results=1000&alt=json-in-script&callback=loadtoc"></script>Keterangan : ganti url blog yang berwarna merah dengan url blog kalian.
Semoga bermanfaat,
Description: Membuat Daftar Isi Dengan Jquery
Rating: 4.5 4.5
