menu accordion kece banget

Hallo shobat blogger,untuk pertemuan kali ini kumpulan tutorial modifikasi blog kembali akan berbagi tutorial blog , kita akan membahas tentang menu accordion kece bangetdan semoga artikel ini bermanfaat buat sobat yang mampir di blog ini, jika berkenan setelah membaca artikel ini sobat bisa meluangkan untuk meninggalkan jejak pada kotak komentar dan Insya Alloh saya akan berkunjung balik ke blog/web sobat sebagai tanda terima kasih saya atas kunjungannya

Sobat Blogger setelah sebelumnya kumpulan tutorial modifikasi blog membuat menu accordion top banget ,sebagai alternatif pilihan jika sobat ingin menggunakan nya berikut akan saya buat satu lagi menu accordion yang saya kira tidak kalah kece seperti menu accordin sebelumnya.oke buat sobat yang penasaran pingin lihat demonya silahkan disini

Setelah melihat Demo dan contoh screenshot di atas berikut adalah cara membuatnya  :

1. Loggin ke blogger
2. setelah masuk ke dasboard pilih Edit Html (jangan lupa download lengkap template )
3. Cari kode ]]></b:skin> taruh kode Css di bawah  tepat di atas kode ]]></b:skin> berikut kode nya

   .arrowlistmenu{ width: 180px; /*width of accordion menu*/ } .arrowlistmenu .menuheader{ /*CSS class for menu headers in general (expanding or not!)*/ font: bold 14px Arial; color: white; background: black url(http://mahfidzmayanto.googlecode.com/files/titlebar.png) repeat-x center left; margin-bottom: 10px; /*bottom spacing between header and rest of content*/ text-transform: uppercase; padding: 4px 0 4px 10px; /*header text is indented 10px*/ cursor: hand; cursor: pointer; } .arrowlistmenu .openheader{ /*CSS class to apply to expandable header when it's expanded*/ background-image: url(http://mahfidzmayanto.googlecode.com/files/titlebar-active.png); } .arrowlistmenu ul{ /*CSS for UL of each sub menu*/ list-style-type: none; margin: 0; padding: 0; margin-bottom: 8px; /*bottom spacing between each UL and rest of content*/ } .arrowlistmenu ul li{ padding-bottom: 2px; /*bottom spacing between menu items*/ } .arrowlistmenu ul li a{ color: #A70303; background: url(arrowbullet.png) no-repeat center left; /*custom bullet list image*/ display: block; padding: 2px 0; padding-left: 19px; /*link text is indented 19px*/ text-decoration: none; font-weight: bold; border-bottom: 1px solid #dadada; font-size: 90%; } .arrowlistmenu ul li a:visited{ color: #A70303; } .arrowlistmenu ul li a:hover{ /*hover state CSS*/ color: #A70303; background-color: #F3F3F3; }

4. selanjutnya cari kode </body> lalu taruh kode Jquery  di bawah ini  tepat di atas kode </body>

   <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script type="text/javascript" src="http://mahfidzmayanto.googlecode.com/files/ddaccordion.js"></script> <script type="text/javascript" src=" http://mahfidzmayanto.googlecode.com/files/accordionkecebgt.js"> </script>

5. Untuk yang terakhir silahkan sobat Taruh kode HTML berikut di mana sobat ingin tempatkan di postingan atau sidebar.

<div class="arrowlistmenu"> <h3 class="menuheader expandable">CSS Library</h3> <ul class="categoryitems"> <li><a href="#">Horizontal CSS Menus</a></li> <li><a href="#">Vertical CSS Menus</a></li> <li><a href="#">Image CSS</a></li> <li><a href="#">Form CSS</a></li> <li><a href="#">DIVs and containers</a></li> <li><a href="#">Links & Buttons</a></li> <li><a href="#">Other</a></li> <li><a href="#">Browse All</a></li> </ul> <h3 class="menuheader expandable">CSS Drive</h3> <ul class="categoryitems"> <li><a href="#">CSS Gallery</a></li> <li><a href="#">Menu Gallery</a></li> <li><a href="#">Web Design News</a></li> <li><a href="#">CSS Examples</a></li> <li><a href="#">CSS Compressor</a></li> <li><a href="#">CSS Forums</a></li> </ul> <h3 class="menuheader expandable">JavaScript Kit</h3> <ul class="categoryitems"> <li><a href="#" >Free JavaScripts</a></li> <li><a href="#">JavaScript tutorials</a></li> <li><a href="#">JavaScript Reference</a></li> <li><a href="#">DOM Reference</a></li> <li><a href="#">DHTML & CSS</a></li> </ul> <h3 class="menuheader" style="cursor: default">FeedBack</h3>

Semoga tutorial tentang cara membuat menu accordion kece banget di atas menjadi menu alternatif yang bisa sobat gunakan di blog semoga bermanfaat Semoga semua tutorial tentang menu accordion kece banget di atas bermanfaat buat sobat semua Wassalam