Cara Mudah Membuat Widget Menu Accordion

Cara Membuat Widget Menu Accordion. Sobat Blogger, Bagi anda yang suka menghias blog, saya ada saran untuk anda tentang membuat menu widget untuk blog anda, widget Menu ini memiliki desain yang sangat bagus untuk di pandang mata dan bisa lebih bergaya. terutama untuk meninggalkan kesan yang baik pada pengunjung blog Anda. Desain dapat dengan mudah disesuaikan. Anda dapat mengubah warna menu dan desain sesuai dengan gaya blog Anda sendiri, widget yang juga ringan. mudah untuk diakses dan tidak mempengaruhi loading blog Anda.

Struktur menu Accordion ini sangat unik. widget ini juga dapat di terapkan dalam sidebar yang sangat kecil di blog Anda. jadi apakah anda berniat untuk menggunakannya?

1. Cara Membuat Widget Menu :
2. Buka akun blog Anda.
3. Pilih tata letak
4. Klik add gadget di menu tata letak.
5. Pilih HTML / JavaScript widget dari daftar.
6. Dalam HTML / JavaScript, pastekan kode dibawah dan simpan widget.

Code Menu Widget Accordion :

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" >$(document).ready(function(){
    $('li.title a').click(function(e){
        var dropDown = $(this).parent().next();
        $('.downlistie').not(dropDown).slideUp('slow');
        dropDown.slideToggle('slow');
        e.preventDefault();
    })
});</script>
<style>
ul.container{
    width:275px;
    padding:5px;
}
li.accoi-menu{
list-style:none;
    padding:1px;
    width:100%;}
li.title
{
border-radius:5px;
background:#333333;
list-style:none;
padding:5px;
}
li.title a{
color:#ffffff;
    display:block;
 padding:5px;
    font:14px georgia, verdana;
    overflow:hidden;
        position:relative;
    width:100%;
     text-decoration:none;
}
.downlistie{
list-style:none;
    display:none;
    padding-top:5px;
    width:100%;
}
.downlistie li{
   list-style:none;
border-left:1px solid #dcdcdc;
border-right:1px solid #dcdcdc;
border-bottom:1px solid #dcdcdc;
border-radius:5px;
    margin:5px ;
    padding:4px 10px;  
}
.downlistie li:hover {
background:orange;
}
.downlistie li a{
{
font:14px georgia, verdana;
text-decoration:none;
color:#333333;
}
.downlistie li a:hover {
text-decoration:none;
color:#333333;
}
</style>
<ul class="container">
          <li class="accoi-menu">
              <ul>
                <li class="title"><a href="#" >Blogger</a></li>          
                <li class="downlistie">
                    <ul>
    <li><a  href="#" >Templates</a></li>
    <li><a  href="#">Widgets</a></li>
    <li><a href="#">Guides</a></li>
                    </ul></li></ul></li>
 
    <li class="accoi-menu">
       
              <ul>
                <li class="title"><a href="#" >Wordpress</a></li>
                <li class="downlistie">
                    <ul>
    <li><a href="#" >Themes</a></li>
    <li><a href="#">Plugins</a></li>
    <li><a href="#">Guides</a></li>              
                 </ul></li></ul></li>
 <li class="accoi-menu">
              <ul>
                <li class="title"><a href="#" >Freebies</a></li>
                <li class="downlistie">
                    <ul>
    <li><a href="#" >Blogger templates</a></li>
    <li><a href="#">Wordpress Themes</a></li>
    <li><a href="#">Plugins</a></li>
    <li><a href="#">Scripts</a></li>
         </ul></li></ul></li>
 <li class="accoi-menu">
              <ul>
                <li class="title"><a href="#" >Services</a></li>
                <li class="downlistie">
                    <ul>
    <li><a href="#" >Website Design</a></li>
    <li><a href="#">Blogger</a></li>
    <li><a href="#">Wordpress</a></li>
    <li><a href="#">Custom Templates</a></li>                
                 </ul></li></ul></li>

 <li class="accoi-menu">
          <ul>
                <li class="title"><a href="#" >About us</a></li>
                  <li class="downlistie">
                    <ul>
    <li><a href="#" >About us</a></li>
    <li><a href="#">Contact us</a></li>
     <li><a href="#">Disclaimer</a></li>
    <li><a href="#">Privacy policy</a></li>
              </ul></li></ul></li>
    </ul>

Menyesuaikan widget Accordion

• Perhatikan kode yang saya tandai biru background: # 333333; untuk mengubah warna latar belakang dari judul utama dalam menu. Anda bisa menyesuaikannya menurut slera anda.
• Perhatikan yang saya tandai orange background: orange; untuk mengubah warna item mouse hover
• Untuk semua kode  href = "#" ganti # dengan link Anda.

Tweet