Membuat Menu Accordion

Menu Open Close yang kalau di klik maka akan keluar menu lainnya atau biasanya disebut juga dengan Accordion Menu, Menu seperti ini sangat cocok bila Sobat pasang atau simpan pada sidebar blog dan biasanya menu seperti ini digunakan untuk Menu Category, Contohnya bisa anda lihat pada gambar dibawah ini : 

Untuk membuat Menu Accordion tersebut sebagai berikut :
1. Login Ke Blogger
2. Masuk ke Menu Template
3. Setelah itu klik Edit Html, tapi jangan lupa sebaiknya backup dulu Template.
4. Dan cari kode   ]]></b:skin> , Untuk Lebih cepat  CTRL + F
5. Bila sudah ketemu maka langkah selanjutnya copy dan paste kode CSS dibawah ini tepat diatas kode ]]></b:skin>

atau bisa juga dengan memasukan Kode ke 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;
}

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

<!--======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===========-->

7. Bila sudah meletakkan kedua Kode diatas kemudian klik Save untuk menyimpan Template.



Langkah Selanjutnya yaitu penempatan menu tersebut, entah itu mau di pasang pada sidebar, Lowerbar, Footerbar terserah Sobat. Caranya masuk pada bagian TATA LETAK kemudian klik TAMBAH GADGET terus anda pilih yang HTML, setelah itu copy kode HTML dibawah ini pada element HTML tersebut dan klik Save.

Kode HTML :

---

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

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

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

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

---

DEMO

Keterangan :

Text yang berwarna BIRU adalah text Judul dari kategori dan text yang berwarna KUNING adalah Link dan HIJAU Judul Postingan, silahkan ganti sesuai dengan yang dinginkan, bila Sobat ingin memperbanyak isi dari kategori menu tersebut, tinggal memperbanyak kode seperti dibawah ini dan kemudian ganti text yang berwarna biru dan kuning sesuai keinginan.

Semoga bermanfaat. 

---

Share

Like

G+

Tweet

Tweet

---

Artikel Terkait

---

Silahkan Memberikan Komentar Jika Ada Hal Yang Kurang Dipahami Dengan Topik Yang Telah Sobat Baca. Biasakan Berkomentar Dengan:

۞ Sopan dan Bahasa Yang Mudah Dipahami.
۞ Tidak Memasukkan Link Aktif Dalam Form Komentar.
۞ Berkomentar Sesuai Artikel Atau Postingan.
۞ Berilah Informasi, Jika Script Atau Link Yang Tidak Berfungsi Dan Mati.
۞ komentar Jorok / Kasar / SARA / PORNO Anggap Sebagai SPAM.