Membuat Daftar isi jQuery Accordion diSedebar

Membuat Daftar isi jQuery Accordion diSedebar - Accordion berfungsi untuk mengelompokkan content dalam panel-panel yang terpisah, dimana pengunjung dapat membuka dan menutup panel-panel yang diinginkan dan accordioan juga dapat mengelompokkan menu-menu yang sejenis.

Accordion adalah alat musik dengan cara dimainkan dengan digantung dan memainkannya denga cara dibuka dan ditutup, Daftar isi jQuery Accordion jika dipasang pada Blog anda jika disentuh oleh kursor efek yang dihasilkan seperti alat musik tersebut dengan demikian daftar isi berikut ini akan terlihat lebih menarik jika dipasang diBlog anda. Sebagai contoh saya berikut ini saya akan tampilkan live demo :

Live Demo




Dalam pemasangan Daftar isi jQuery Accordion diSedebar tidaklah menyuliskan, cukup dengan beberapa langkah anda sudah dapat menikmati keindahan menu accordion pada Blog anda, jika anda tertarik berikut ini langkah mudahnya :

Membuat Daftar isi jQuery Accordion diSedebar 

1. Masuk kehalaman Blogger
2. Pilih Layoud/Tata Letak => Klik add Gadget
3. Pilih HTML/Javascript
4. Kemudian anda copy kode dibawah ini dan pastekan dikolom tersedia

<style type="text/css">
#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/AVvXsEhCQeXvTVAC1bOa5hUZXI4ZP7wRYALZFs73z-g8plIebY14aQDqXwAwKn-phSDC2KDrhAVuRtKMFBIWOT3Ux5y9-aNkq3_kJdDksYV-blKBSHPodQVmA879bRvpHJnbjKd-5OMGnWJcDuk/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/AVvXsEj2-YnDk3YkYcgJx9WWClhMRwnjWzepMFDqxCtZd0Zb_k2v-tfuYpAcibKISaoBFZ8Rflxs-SNsqLiuFe3i9vWUJI9HA48GbB79YTK21qo2hyphenhyphenIuHOHejjeqrC5HMUU6eFbgOtZPEFLYdUo/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/AVvXsEg3_BvL6Has43KIhVdk0pkeuyzg1qLJZ2U9UWYiCOVFEVJx3vdf6ACsGtyGPgIFhb6uBGWrypxR6-SCcd7upq75S9BJjvwFUYGgN5m6PI3OdUX7tmSnUAKdGoYqRJ49C4wyQmLxrMyN0p0/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); }
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script src="https://aakyos.googlecode.com/svn/trunk/Accordion-Sedebar.js" type="text/javascript"></script><script src="http://aak-share.blogspot.com/feeds/posts/summary?max-results=1000&amp;alt=json-in-script&amp;callback=loadtoc"></script>

5. Simpan

Note:

• Kode yang saya beri warna merah silahkan anda ganti dengan URL website/Blog anda
• Kode yang saya beri warna hijau adalah untuk menunjukan jumlah daftar isi yang akan tampil

Demikian Membuat Daftar isi jQuery Accordion diSedebar, semoga bermanfaat!

Bagikan Artikel ini