Facebook Twitter Google+ Pasang Iklan

Membuat Daftar Isi Efek jQuery Accordion

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!
Setelah baca jangan lupa jempolnya..makasih..


Artikel Terkait:

Anda sedang membaca artikel tentang Membuat Daftar Isi Efek jQuery Accordion dan anda bisa menemukan artikel Membuat Daftar Isi Efek jQuery Accordion ini dengan url http://dhio89.blogspot.com/2011/09/membuat-daftar-isi-efek-jquery.html, dan terimakasih sudah membaca Membuat Daftar Isi Efek jQuery Accordion, semoga uraian dan pembahasan tentang Membuat Daftar Isi Efek jQuery Accordion Bisa Bermanfaat.

14 comments

January 07, 2012

gak ada demonya ??

January 08, 2012

Bila label diganti daftar srtikel bisa nggak gan?

January 17, 2012

thank's sob.

salam kenal,
http://softwareforcomputer7.blogspot.com

January 18, 2012

thanks infonya

January 18, 2012

thanks infonya

January 18, 2012

thanks infonya

January 18, 2012

thanks infonya

January 18, 2012

thanks infonya

January 18, 2012

thanks infonya

January 28, 2012

makasih ya gan infonya....

January 28, 2012

i like it gan

March 28, 2012

wah mantab nich sob..
htmlnya komplit juga yah..

May 27, 2012

kunjungan silaturahmi dan nyuri ilmu nya bos :)

July 05, 2012

thenkyu infonya akan segera di laksanakan.. berhasil ato ga..

Post a Comment

 
Jangan Lupa Follow Dan Like ya!
Ikuti @dhio89