Cara Membuat Menu Accordion Keren

00.19 Diposting oleh Unknown

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 :

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.