Cara Membuat Menu Accordion cantik

Pada Posting kali ini saya akan membahas tentang cara membuat menu Open Close yang kalau kita klik maka akan keluar menu lainnya atau biasanya disebut juga dengan Accordion Menu, Menu seperti ini sangat cocok bila anda pasang atau simpan pada sidebar blog anda dan biasanya menu seperti ini digunakan untuk Menu Category, Contohnya bisa anda lihat pada gambar dibawah ini :

Untuk membuat Menu Accordion tersebut caranya adalah sebagai berikut :

1. Silahkan anda Login Ke Blogger dengan menggunakan account anda

2. Setelah anda login terus anda masuk ke menu Template

3. Setelah itu anda klik Edit Html tapi jangan lupa sebaiknya anda backup dulu Template anda.

4. Bila anda sudah membackup Template anda dan masuk ke Edit Html, selabjutnya pada Tab Html anda

    cari kode Seperti ini : ]]></b:skin>

5. Kalau sudah ketemu maka langkah selanjutnya anda copy dan paste kode CSS dibawah ini tepat diatas

     kode ]]></b:skin>.

 Kode CSS  :

.arrowlistmenu{ width: auto; /*width of accordion menu*/ } .arrowlistmenu .menuheader{ /*CSS class for menu headers in general (expanding or not!)*/ font: bold 14px Georgia; color: cyan; background: #181818 ; border:3px solid #1E90FF; -all-border-radius:10px 0 10px 0; -moz-border-radius:10px 0 10px 0; -webkit-border-radius:10px 0 10px 0; margin-bottom: 2px; /*bottom spacing between header and rest of content*/ text-transform: uppercase; padding: 5px 0 5px 10px; /*header text is indented 10px*/ cursor: hand; cursor: pointer; } .arrowlistmenu .openheader{ /*CSS class to apply to expandable header when it's expanded*/ border:3px solid #FF1493;background:#1E90FF;font-color:white; -all-border-radius:10px 0 10px 0; -moz-border-radius:10px 0 10px 0; -webkit-border-radius:10px 0 10px 0; } .arrowlistmenu ul{ /*CSS for UL of each sub menu*/ list-style-type: none; margin: 0; padding: 0; margin-bottom:4px; /*bottom spacing between each UL and rest of content*/ } .arrowlistmenu ul li{ padding-bottom: 1px; /*bottom spacing between menu items*/ } .arrowlistmenu ul li a{ color: red; background: url() 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: 0px dotted red; font-size: 90%; } .arrowlistmenu ul li a:visited{ color: #A70303; } .arrowlistmenu ul li a:hover{ /*hover state CSS*/ color: #A70303; background-color: #F3F3F3; }

Setelah Anda Copy semua Code diatas dan meletakkannya di atas kode ]]></b:skin>, langkah selanjutnya yaitu anda copy Code Javascript dibawah ini dan anda paste tepat dibawah kode ]]></b:skin>

Kode Javascript :

<!--======ACORDION MENU=======--> <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/> <script src='http://klick-arie.googlecode.com/files/acordion-menu.js' type='text/javascript'> /*********************************************** * Accordion Content script- (c) Dynamic Drive DHTML code library * recode by klick arie http://klickarie.blogspot.com * klick.arie ponorogo 19 may 2012 ***********************************************/ </script> <script type='text/javascript'> ddaccordion.init({ headerclass: "expandable", //Shared CSS class name of headers group that are expandable contentclass: "categoryitems", //Shared CSS class name of contents group revealtype: "click", //Reveal content when user clicks or onmouseover the header? Valid value: "click", "clickgo", or "mouseover" mouseoverdelay: 200, //if revealtype="mouseover", set delay in milliseconds before header expands onMouseover collapseprev: true, //Collapse previous content (so only one open at any time)? true/false defaultexpanded: [0], //index of content(s) open by default [index1, index2, etc]. [] denotes no content onemustopen: false, //Specify whether at least one header should be open always (so never all headers closed) animatedefault: false, //Should contents open by default be animated into view? persiststate: true, //persist state of opened contents within browser session? toggleclass: ["", "openheader"], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"] togglehtml: ["prefix", "", ""], //Additional HTML added to the header when it's collapsed and expanded, respectively ["position", "html1", "html2"] (see docs) animatespeed: "fast", //speed of animation: integer in milliseconds (ie: 200), or keywords "fast", "normal", or "slow" oninit:function(headers, expandedindices){ //custom code to run when headers have initalized //do nothing }, onopenclose:function(header, index, state, isuseractivated){ //custom code to run whenever a header is opened or closed //do nothing } }) </script> <!--=========ACORDION MENU===========-->

Bila anda meletakkan kedua Kode" diatas kemudian anda klik Save untuk menyimpan Template anda.

Langkah Selanjutnya yaitu penempatan menu tersebut, entah itu mau anda pasang pada sidebar, Lowerbar, Footerbar terserah anda. aranya yaitu anda masuk pada bagian tata Letak kemudian anda klik tambah element terus anda pilih yang HTML, setelah itu anda copy kode  XHTML dibawah ini pada element HTML tersebut terus anda klik Save.

Kode XHTML :

<div class='arrowlistmenu'>
<h3 class='menuheader expandable'>Blogger Tips</h3>
<ul class='categoryitems'>
<li><a href="Masukan Link Posting Dsb Disini" target="_blank" title="Author Comments with different style">Masukan Judul Posting Dsb Disini</a></li>
<li><a href="Masukan Link Posting Dsb Disini" target="_blank" title="Author Comments with different style">Masukan Judul Posting Dsb Disini</a></li>

</ul>
<h3 class='menuheader expandable'>Template</h3>
<ul class='categoryitems'>
<li><a href="Masukan Link Posting Dsb Disini" target="_blank" title="Author Comments with different style">Masukan Judul Posting Dsb Disini</a></li>
<li><a href="Masukan Link Posting Dsb Disini" target="_blank" title="Author Comments with different style">Masukan Judul Posting Dsb Disini</a></li>

</ul>
<h3 class='menuheader expandable'>HTML</h3>
<ul class='categoryitems'>
<li><a href="Masukan Link Posting Dsb Disini" target="_blank" title="Author Comments with different style">Masukan Judul Posting Dsb Disini</a></li>

<li><a href="Masukan Link Posting Dsb Disini" target="_blank" title="Author Comments with different style">Masukan Judul Posting Dsb Disini</a></li>

</ul>
<h3 class='menuheader expandable'>Software</h3>
<ul class='categoryitems'>
<li><a href="Masukan Link Posting Dsb Disini" target="_blank" title="Author Comments with different style">Masukan Judul Posting Dsb Disini</a></li>
<li><a href="Masukan Link Posting Dsb Disini" target="_blank" title="Author Comments with different style">Masukan Judul Posting Dsb Disini</a></li>

</ul>
</div>

Keterangan :

Text yang berwarna Kuning adalah text Judul dari kategori dan text yang berwarna biru adalah Link dan Judul Postingan anda, silahkan anda ganti sesuai dengan yang anda inginkan, bila anda ingin memperbanyak isi dari kategori mmenu tersebut, anda tinggal memperbanyak kode seperti dibawah ini dan kemudian ganti text yang berwarna biru dan kuning sesuai keinginan anda.

<li><a href="Masukan Link Posting Dsb Disini" target="_blank" title="Author Comments with different style">Masukan Judul Posting Dsb Disini</a></li>

 

Silahkan mencoba dan semoga bermanfaat.