IQ-DUA3: Daftar isi #2

Daftar isi #2

Daftar isi yang akan kita buat sekarang ini akan menggunakan efek jquery accordion, jika sebelumnya pernah kita bahas mengenai cara membuat daftar isi kang farhan, dengan efek jquery akan menampilkan efek dan bentuk yang lebih menarik. Script jquery accordion ini dibuat oleh teman netterku dalam dunia blog saudara Hendriono (http://modification-blog.blogspot.com). Untuk melihat bagaimana bentuk tampilan dan efek yang dihasilkan dari jquery accordion, kawan bisa meng-klik link demo dibawah ini :

Demo

Bagaimana menurut kawan? tertarik untuk membuatnya dalam blog kawan? jika tertarik kawan bisa mengikuti caranya seperti dibawah ini :

Masuk Design - Edit HTML
Jika diperlukan, kawan 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 kawan, jika sudah ada script jquery tersebut diatas, kawan 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 kawan.

Script dibawah ini adalah untuk menampilkan daftar isi, kalian bisa meletakan pada postingan, widget atau bisa memanfaat halaman sebagai media untuk menampilkannya.

Copy paste script dibawah ini pada postingan atau post page (halaman) dalam mode editor Edit HTML

<script type="text/javascript" src="http://situseo.googlecode.com/files/Table-of-Content.js"></script>
<script src="http://iq-dua3.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 kawan.

^_^ semoga bermanfaat ^_^