Cara Membuat Menu Dropdown Tanpa Edit Html

 Cara Menu Dropdown Tanpa Edit Html

Postingan kali ini saya akan berbagi sebuah tutorial cara membuat menu dropdown horizontal tanpa edit html, langkah" nya :
1. Log in ke blog anda
2. Klik Rancangan / Layout
3. Klik Tambah gadget
4. Pilih html/javascript
5. Kopy paste scrips di bawah ini
 scrips:

    <style>
    /* ================================================================
    Editing: SysteM Of BloG
    =================================================================== */
    #menu {list-style-type:none; margin:5px; padding:0;}
    #menu li {float:left; padding:0; margin:0 1px 0 0; position:relative; width:200px; height:3em; z-index:100;}
    #menu li dl {position:absolute; top:0; left:0;padding-bottom:5px;}
    #menu li a, #menu li a:visited {text-decoration:none;}
    #menu li dd {display:none;}
    #menu li a:hover {border:0;}
    #menu li:hover dd, #menu li a:hover dd {display:block;}
    #menu li:hover dl, #menu li a:hover dl {padding-bottom:10px;}
    #menu table {border-collapse:collapse; padding:0; margin:-1px; font-size:1em;}
    #menu dl {width:  200 px; margin: 0; padding: 0; background: #c9ba65;}
    #menu dt {margin:0; padding: 5px 5px 5px 20px; font-size: 1.1em; color: #b60000; border-bottom:1px dashed darkred; border-top:1px dashed gray; text-align:center;}
    #menu .one {background: #000; border-top:5px dashed #b60000;}
    #menu .two {background: #000; border-top:5px dashed #b60000;}
    #menu .three {background: #000; border-top:5px dashed #b60000;}
    #menu .four {background: #000; border-top:5px dashed #b60000;}
    #menu .one dt {background: black;}
    #menu .two dt {background: black;}
    #menu .three dt {background: black;}
    #menu .four dt {background: black;}
    #menu dd {margin:0; padding:0; color: #000; font-size: 1em; text-align:center;}
    #menu .one dd {border-bottom:1px dashed darkred;}
    #menu .two dd {border-bottom:1px dashed darkred;}
    #menu .three dd {border-bottom:1px dashed darkred;}
    #menu .four dd {border-bottom:1px dashed darkred;}
    #menu dd.last {border-bottom:1px dashed darkred;}
    #menu dt a, #menu dt a:visited {display:block; color:green;}
    #menu dd a, #menu dd a:visited {color:darkred; text-decoration:none; display:block; padding:4px 5px 4px 20px; width: 170px ;}
    #menu .one dd a {background:black; color:green;}
    #menu .two dd a {background:black; color:green;}
    #menu .three dd a {background:black; color:green;}
    #menu .four dd a {background:black; color:green;}
    #menu .one dd a:hover {background: #665; color:#000;}
    #menu .two dd a:hover {background: #665; color:#000;}
    #menu .three dd a:hover {background: #665; color:#000;}
    #menu .four dd a:hover {background: #665; color:#000;}
    <ul id="menu"><!-- drop down menu start -->
    <li>
    <!--[if lte IE 6]><a href=" #Link "><table><tr><td><![endif]-->
    <dl class="one">
    <!-- Alter the links with your own -->
    <dt><a href="Link kepala Anda Disini">Nama Link Kepala</a></dt>
    <dd><a href= "Link Anda Disini" >Nama Link drop down</a></dd>
    <dd><a href="Link Anda Disini">Nama Link drop down</a></dd>
    <dd><a href="Link Anda Disini">Nama Link drop down</a></dd>
    <dd><a href="Link Anda Disini">Nama Link drop down</a></dd>
    <dd><a href="Link Anda Disini">Nama Link drop down</a></dd>
    <dd><a href= "Link Anda Disini" >Nama Link drop down</a></dd>
    </dl>
    <!--[if lte IE 6]></td></tr></table></a><![endif]-->
    </li>
    <li>
    <!--[if lte IE 6]><a href=" #Link "><table><tr><td><![endif]-->
    <dl class="two">
    <dt><a href="Link Anda Disini">Nama Link Kepala</a></dt>
    <dd><a href= "Link Anda Disini" >Nama Link drop down</a></dd>
    <dd><a href="Link Anda Disini">Nama Link drop down</a></dd>
    <dd><a href="Link Anda Disini">Nama Link drop down</a></dd>
    <dd><a href="Link Anda Disini">Nama Link drop down</a></dd>
    <dd><a href= "Link Anda Disini" >Nama Link drop down</a></dd>
    </dl>
    <!--[if lte IE 6]></td></tr></table></a><![endif]-->
    </li>
    <li>
    <!--[if lte IE 6]><a href=" #Link "><table><tr><td><![endif]-->
    <dl class="three">
    <dt><a href="Link Anda Disini">Nama Link Kepala</a></dt>
    <dd><a href="Link Anda Disini">Nama Link drop down</a></dd>
    <dd><a href="Link Anda Disini">Nama Link drop down</a></dd>
    <dd><a href="Link Anda Disini">Nama Link drop down</a></dd>
    <dd><a href="Link Anda Disini">Nama Link drop down</a></dd>
    <dd><a href="Link Anda Disini">Nama Link drop down</a></dd>
    <dd><a href="Link Anda Disini">Nama Link drop down</a></dd>
    </dl>
    <!--[if lte IE 6]></td></tr></table></a><![endif]-->
    </li>
    <li>
    <!--[if lte IE 6]><a href=" #Link "><table><tr><td><![endif]-->
    <dl class="four">
    <dt><a href="Link Anda Disini">Nama Link Kepala</a></dt>
    <dd><a href="Link Anda Disini">Nama Link drop down</a></dd>
    <dd><a href="Link Anda Disini">Nama Link drop down</a></dd>
    <dd><a href="Link Anda Disini">Nama Link drop down</a></dd>
    <dd><a href="Link Anda Disini">Nama Link drop down</a></dd>
    <dd><a href="Link Anda Disini">Nama Link drop down</a></dd>
    </dl>
    <!--[if lte IE 6]></td></tr></table></a><![endif]-->
    </li>
    </ul><!-- end of drop down menu -->

NB ":

•     Kode  200  adalah kode lebar, menu atas dan kode lebar menu drop down nya, sobat bisa sesuaikan dengan lebar blog masing-masing.
•     Kode  170  adalah Lebar menu drop down nya.sobat sesuaikan bila ingin merubah lebar menu atasnya.,
•     Kode  #Link  ganti dengan link, atau tidak usah anda ganti juga tidak apa2,
•     Ganti kode  "Link Anda Disini"  dengan Link yang akan anda gunakan.
•     Ganti kode  "Nama Link drop down"  dengan Nama Link Nya
•     Ganti kode  "Nama Link Kepala"  dengan Nama Link Nya juga,

Share this article :

Artikel Terkait