Membuat Daftar Isi dengan jQuery Efek Accordion - Kali ini kita akan membbuat halaman daftar ini di blog dengan efek Accordion jQuery .
Halaman daftar ini kadang memang diperlukan untuk memudahkan pengunjung menemukan artikel yang diminatinya dalam satu halaman . Dan keuntungan bagi pemilik blog adalah meningkatnya pageview blog jika artikel yang dimiliki sudah banyak dan beragam serta membuat si pengunjung penasaran .

Oke , mungkin itu saja penjelasannya , sekarang kita akan mulai untuk membuatnya .

Untuk demo anda bisa melihatnya dibagian bawah artikel ini .

Pertama


Masuk ke template dan simpan Css dibawahg ini tepat diatas ]]></b:skin>
Css Daftar Isi Accordion

#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);

}

Kedua


Letakkan script dibawah ini diatas kode </head> dalam template

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
Mohon diperhatikan , jika di dalam template anda sudah tertanam jQuery , biasanya di atas kode </head> atau dibawah <head> ,maka tinggalkan script diatas dan kita lewati langkah kedua ini .

Ketiga


Jika anda akan membuat halaman daftar isi , maka letakkan script dibawah ini di dalam are HTML posting .

<script type="text/javascript" src="http://situseo.googlecode.com/files/Table-of-Content.js"></script>

<script src="http://BLOG_ANDA/feeds/posts/summary?max-results=1000&amp;alt=json-in-script&amp;callback=loadtoc"></script> 

Ganti BLOG_ANDA dengan nama blog anda .
Publish dan selesai .

Demo:



Semoga bermanfaat .
resource : http://situseo.blogspot.com/2012/01/membuat-daftar-isi-dengan-efek-jquery.html