Membuat Menu Dropdown Menggunakan CSS Menu Maker

Untuk membuat menu Dropdown dengan menggunakan CSS Menu Maker seperti contoh diatas, sangat mudah asal bisa sedikit memahami  kode css. Sebelumnya saya sendiri juga sangat kesulitan membuatnya, setelah lama-lama dicoba akhirnya bisa juga dan sekarang ingin berbagi ilmu dengan anda jika mau.

Langkah pertama buka situs www.cssmenumaker.com, kemudian pilih Drop Down CSS Menu setelah itu pilih contoh menu yang akan anda pakai.

Kemudian klik customize untuk mengatur link yang akan dimasukkan, setelah itu klik download.

Langkah selanjutnya, login ke blogger dan pilih Rancangan kemudian klik Edit HTML
Kemudian masukkan kode yang telah didownload seperti contoh dibawah ini,

.menu{

    border:none;

    border:0px;

    margin:0px;

    padding:0px;

    font: 67.5% "Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif;

    font-size:14px;

    font-weight:bold;

    }

.menu ul{

    background:#333333;

    height:35px;

    list-style:none;

    margin:0;

    padding:0;

    }

    .menu li{

        float:left;

        padding:0px;

        }

    .menu li a{

        background:#333333 url("images/seperator.gif") 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("images/hover.gif") 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('images/sub_sep.gif') 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('images/hover_sub.gif') center left no-repeat;

            border:0px;

            color:#ffffff;

            text-decoration:none;

            }

    .menu p{

        clear:left;

        }   

       
ditaruh diatas kode ]]></b:skin>

Setelah itu Simpan Template.

Langkah selanjutnya, klik Rancangan, kemudian klik Elemen Laman setelah itu klik Tambah Gadget dan pilih Tambah HTML/JavaScript.
Kemudian masukkan kode berikut

<style media="all" type="text/css">@import "/menu/menu_style.css";</style>

<div class="menu">

<ul>

<li><a href="" target="_self" >HOME</a>

</li>

<li><a href="" target="_self" >TUTORIAL</a>

<ul>

<li><a href="" target="_self">BLOG</a></li>

<li><a href="" target="_self">COMPUTER</a></li>

<li><a href="" target="_self">SEO</a></li>

</ul>

</li>

<li><a href="" target="_self" >DOWNLOAD</a>

<ul>

<li><a href="" target="_self">DRIVER</a></li>

<li><a href="" target="_self">SOFTWARE</a></li>

</ul>

</li>

<li><a href="" target="_self" >CONTAC</a>

</li>

</ul>

</div>

Ganti tulisan yg bercetak tebal, sesuai dengan keinginan.
kemudian klik simpan.

Baca Juga Artikel Lain Berikut ini:

* Cara Menambahkan Tampilan Jam Pada Blog
* Cara Membuat Tulisan Berkedip-kedip
* Cara Menambah Image Pada Link Download
* Membuat Tulisan Bergerak
* Cara Mengganti Template Pada Blogspot
* Cara Menambahkan Gambar Slideshow Pada Blog
* Menambahkan Dafter Isi Pada Blog
* Menambahkan Tampilan Video Kedalam Blog
* Cara Membuat Menu Dropdown Standart
* Cara Membagi Postingan Menjadi Dua Kolom
* Cara Merubah Domain Dari Blogspot Menjadi .co.cc
* Memberi Background Warna Pada Tulisan Postingan
* Cara Membuat Pop-up
* Membuat Link Dalam Gambar
* Cara Membuat Kotak Tabel Dalam Postingan
* Cara Membuat Menu Drop Down Menggunakan CSS Menu Maker
* Membuat Kolom Scroll
* Cara Membuat Share Artikel
* Cara Membuat Text Area dan Textbox Area Berfasilitas Select All
* Cara Membuat Readmore
* Cara Membuat Iklan Melayang