Membuat Daftar Isi Efek jQuery Accordion

Tweet

Pada kesempatan ini saya mahu share tentang bagaimana membuat Daftar Isi Efek jQuery Accordion. Karna kemarin ada salah satu sobat blogger yang menanyakan, sebenarnya saya tidak tahu tapi kebetulan di brangkas masih tersimpan KODE HTMLnya ^_^, karna dulu pernah menggunakan Daftar Isi Efek jQuery Accordion dan ini juga saya ambil dari googling kalau tidak salah 3bulan yg lalu tapi sudah saya rombak tampilannya.

Sepertinya sobat sudah tahu apa itu daftar isi dan mungkin sobat juga sudah tahu betapa pentingnya daftar isi ini, karna daftar isi memudahkan pengunjung agar dapat membaca artikel-artikel kita. nah, agar membuat tampilan daftar isi lebih cantik sobat bisa menggunakan Efek jQuery Accordion karna tampilannya yang rapi ini cocok untuk sobat yang ingin blog nya tampil lebih profesional.

Oke langsung ajah tidak usah bertele-tele lagi yuk mari ikuti langkah-langkah Membuat Daftar Isi Efek jQuery Accordion di bawah ini

► Login ke blogspot
► Design/Rancangan
► Edit HTML
► Kemudian letakan kode dibawah ini di atas kode ]]></b:skin>

>>>

#dafis-acc{
font-family:"Trebuchet MS", Tahoma, Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
color:#333;
background:#ffffff;
}
.dafis-label{
background:#ffffff;
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: #268;
text-shadow: 0 1px 1px rgba(0,0,0,.3);
border:1px solid #ffffff;
}
.dafis-label:hover{
color:#000000;
}
.dafis-daf ol{
margin:0 0 0 30px !important;
padding:0 !important;
}
.dafis-daf ol li{
background-color:#ffffff;
line-height:1.5em;
margin:1px 3px !important;
white-space:nowrap;
text-align:left;
border:1px solid #ffffff;
}
.dafis-daf ol li a{
text-decoration: none !important;
color:#333 !important;
display:block;
padding-left:0px;
}
.dafis-daf ol li a:hover{
border-left: 0px #000 solid;
padding-left: 0px;
text-shadow: 0 1px 1px rgba(0,0,0,.3);
}

► Lalu letakkan kode di bawah ini diatas kode </head>

>>>

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

► Jika sudah, simpan template
► Lalu selanjutnya Klik Design/Rancangan
► Add Widget ►► HTML/JavaScript
► Copy Paste Kode di bawah ini

>>>

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

Ket: ganti yang bertulisan tebal dengan alamat blog sobat

Akhirnya selesai juga Membuat Daftar Isi Efek jQuery Accordion dan semoga pada bisa semua jika ada yang gagal silahkan bertanya, insaallah saya akan menjawab dan menjelaskannya, itu juga kalau bisa hehehe kan ane juga masih nuwbie jadi tidak semua pertanyaan bisa di jawab!