Cara Memasang Dropdown Keren Di Blog Tanpa edit HTML

Postingan Kali Ini Saya tentang Dropdown menu tanapa edit Hml Dorpdown menu berfungsi sebagai pemandu Blog anda ke pada pengunjung untuk menunjukan hal hal yang penting langsung kita pasang g usah pake basa basi lagi

Pertama Login Ke www.blogger.com
Masukke bagian Tata Letak ==> addgadget ===> HTML/Javascript
Lalu Copas Code Berikut

   <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 -->

Kode 200 ada kode lebar silahkan ganti sesuai selera anda
kode 170 adalah  kode dwopdown sialahkan ganti sesuai selera anda

•     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,
•  

Sudah Mengerti atau belum jika belum langsung tanyakan

sekian postingan dari saya