Membuat Daftar Isi Blog Dengan Efek jQuery Accordion

Text Resizer: Click for Resizer

Daftar isi sangat dibutuhkan karena dengan daftar isi dapat membuat pencarian lebih mudah dan efisien selain itu dengan adanya daftar isi juga dapat membuat blog kita semakin profesional. Selain itu Dipilihnya efek animasi accordion pada daftar isi dimaksudkan agar daftar isi blog ini terasa lebih ringkas dan tidak terlalu panjang sekaligus mudah dan rapi untuk blog serta artikel yang di susun berdasarkan Label/Kategori. Sehingga serasa seperti blog anda seperti blog profesional. Ok untuk Membuat Daftar Isi Blog Dengan Efek jQuery Accordion ikuti saja langkah-langkah berikut ini...

1.Log in dulu ke account blog anda
2.Pada dasbor masuk ke Rancangan lalu pilih Edit HTML.
3.Setelah itu cari kode berikut ini ]]></b:skin>
4.Kemudian copas kode dibawah ini dan taruh diatasnya.

#dafis-acc{
font-family:"Trebuchet MS", Tahoma, Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
color:#333;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHWrwivjJ9xro3iIQ_QL1cxMhMMZp2nOV2RPV1IywSVSXiBpfyyLna1sLSH9TCtELTWIG-UrjZfwSLnR0BGFH3oXL0n2RSuL0_Fv09O3M1HHrSpFKyc6uXNymy2DCTOOnn8CjPVKLl71M/d/bg5.gif) repeat-y scroll left center #E7F7FB;
padding:2px 0;
border:1px solid #339DC6;
}
.dafis-label{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi66oHDM31iZFsDH5iRD9uK3k3nvKA46sBe_Gey3bbq9VrUupRJCJ-HDcVIFOxu9TzO7K_NzQvHalc-UQzEl9YgWgXKYAyLulVwS_wgsl45wDn8Tf1t3dLkkzjq04fZN-66pkcC6yXXq_4/d/bg4.gif) repeat-x scroll 0 0 #E1F4FB;
font-weight:bold;
line-height:1.4em;
overflow:hidden;
white-space:nowrap;
vertical-align: baseline;
margin: 1px 3px;
outline: none;
cursor: pointer;
text-decoration: none;
padding: 2px 10px;
color: #fff;
text-shadow: 0 1px 1px rgba(0,0,0,.3);
border:1px solid #2F94BA;
}
.dafis-label:hover{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhG8ByFAsr7_hRQmB2DoWXH81vMgimweeM29_5icIJ6qDsuIIe1_wTie8lRdy8HCqC6NurZmwIFWj5wHzAHothvV1tN8YPaJaWXVmVD_Y7QvNGNwfVa-58ZjkPVTwAff3T4GpZB5RHv8k8/d/bg2.gif) repeat-x scroll 0 0 #E1F4FB;
color:#003366;
}
.dafis-daf ol{
margin:0 0 0 30px !important;
padding:0 !important;
}
.dafis-daf ol li{
background-color:#C9E9F4;
line-height:1.5em;
margin:1px 3px !important;
white-space:nowrap;
text-align:left;
border:1px solid #339DC6;
}
.dafis-daf ol li a{
text-decoration: none !important;
color:#333 !important;
display:block;
padding-left:10px;
}
.dafis-daf ol li a:hover{
background: #7BC4DF;
border-left: 5px #333 solid;
padding-left: 5px;
text-shadow: 0 1px 1px rgba(0,0,0,.3);
}

5.Selenjutnya cari kode </head>, lalu letakkan kode dibawah ini diatas kode </head>.

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

Keterangan : Jika sebelumnya sobat telah memasang scipt jQuery maka cara ini lewati saja langkah diatas

6.Kemudian Klik Simpan Template.

Langkah Selanjutnya

1.Buatlah sebuah posting blog dengan judul terserah Misal : Daftar Isi Blog Lengkap Atau Table Of Content.
2.Selanjutnya Masukkan kode di bawah ini pada postingan, caranya seperti membuat postingan seperti biasa tetapi dalam mode Edit HTML.

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

Ubah namablogsobat dengan nama blog anda

3.Selanjutnya Klik Terbitkan.

Alhamdullilah Selesai juga ...... Dengan ini blog anda mempunyai daftar isi atau table of content, semoga dengan adanya daftar isi atau table of content dapat membuat pengunjung blog betah berkunjung ke blog sobat.

Artikel Terkait:

Ditulis oleh : Arga Anggriawan | BLOG : This Is My Art
Dalam Judul : Membuat Daftar Isi Blog Dengan Efek jQuery Accordion
Dalam Kategori : jQuery
Saya hanyalah blogger pemula yang ingin belajar dan berbagi dengan sahabat, Semua artikel blog ini bersumber dari pengalaman saya dari dunia blogger.