Cara Membuat Menu Dropdown di Blogger

Selamat sore sobat blogger yang berbahagia. Pada sore ini kami akan memberikan sedikit cara membuat menu dropdown di blogger. Sesuai judulnya, kali ini saya akan membuat menu navigasi yang saya pakai di blog ini atau bisa lihat sendiri pada gambar yang saya pasang diatas. Menu navigasi ini telah saya modifikasi sedemikian rupa sehingga menjadikannya keren dan elegan cocok untuk Anda semua yang memiliki Label atau Categori banyak. Bagaimana ? tertarik untuk membuatnya ? langsung saja kalau begitu kita simak dan bahas cara membuat menu dropdown di blogger bersama-sama.

1.) Baca Basmallah
2.) Masuk ke akun blogger sobat
3.) Masuk ke Dashboard > Template > Edit Html > Lanjutkan
4.) Centang tanda Expand Template Widget
5.) Lalu cari kode [[></b:skin>
6.) Jika sudah ketemu, masukkan kode dibawah ini tepat diatas kode [[></b:skin>
Kode:

menu{
    border:none;
    border:0px;
    margin:0px;
    padding:0px;
    font: 67.5% "Arial", Arial;
    font-size:14px;
    font-weight:bold;
    }
    .menu ul{
    background:#333333;
    height:35px;
    list-style:none;
    margin:0;
    padding:0;
    font-size:14px;
    font-weight:bold;
    }
    .menu li{
    float:left;
    padding:0px;
    }
    .menu li a{
    background:#333333 url("http://i47.tinypic.com/qp53sw.jpg") bottom right no-repeat;
    color:#cccccc;
    display:block;
    font-weight:normal;
    line-height:35px;
    margin:0px;
    padding:0px 25px;
    text-align:center;
    text-decoration:none;
    }
    .menu li a:hover, .menu ul li:hover a{
    background: #2580a2 url("http://i49.tinypic.com/13zbc53.jpg") bottom center no-repeat;
    color:#FFFFFF;
    text-decoration:none;
    }
    .menu li ul{
    background:#333333;
    display:none;
    height:auto;
    padding:0px;
    margin:0px;
    border:0px;
    position:absolute;
    width:225px;
    z-index:200;
    /*top:1em;
    /*left:0;*/
    }
    .menu li:hover ul{
    display:block;
    }
    .menu li li {
    background:url('http://i45.tinypic.com/nvxxqg.jpg') bottom left no-repeat;
    display:block;
    float:none;
    margin:0px;
    padding:0px;
    width:225px;
    }
    .menu li:hover li a{
    background:none;
    }
    .menu li ul a{
    display:block;
    height:35px;
    font-size:12px;
    font-style:normal;
    margin:0px;
    padding:0px 10px 0px 15px;
    text-align:left;
    }
    .menu li ul a:hover, .menu li ul li:hover a{
    background:#2580a2 url('http://i50.tinypic.com/66elwh.jpg') center left no-repeat;
    border:0px;
    color:#ffffff;
    text-decoration:none;
    }
    .menu p{
    clear:left;
    }

7.) Simpan Template
8.) Buka Tata Letak > Tambah Gadget > Html/Javascript
9.) Masukkan kode berikut di form Konten yang tersedia
Kode:

<div class="menu"><ul><li><a href="#"> Nama Link </a></li><li><a href=" # "> Nama Link </a><ul><li><a href=" # "> Nama Link </a></li><li><a href=" # "> Nama Link </a></li><li><a href=" # "> Nama Link </a></li><li><a href=" # "> Nama Link </a></li></ul></li><li><a href="#"> Nama Link </a><ul><li><a href="#"> Nama Link </a></li><li><a href="#"> Nama Link </a></li></ul></li><li><a href="#">Nama Link</a></li></ul></div>

11.) Ganti # dengan URL yang akan dituju
Ganti Nama Link dengan nama yang akan ditampilkan dalam menu.
14.) Simpan dan lihat hasilnya, Semoga apa yang sudah kami berikan kepada Anda semua dapat bermanfaat dan berguna bagia Anda dan tema-teman yang lain.

--------------------------------------------------------------------------------------------------
Sumber asli: rizaldipriantama