Keren menu melayang drop down di blog.

Baiklah pada kesempatan yang sempit ini saya akan memeberikan cara bagaimana membuat menu melayang drop down di blog.


Cara memasang menu ini sangatlah mudah

1. copy kode berikut :

 <!-- Menu Melayang diandiki blogspot -->

 <style type='text/css'>

#top-wrapper{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdXIZBfY8zvq19BpvUt2-FhfbAKPRB3Rwa0QQT55gBtBUIjsE0yb2wfDONIgDbaM7c0nEyuO70Ripc5psX5jVBVTixhBf8m9S6XOakhBzIqbi7ADO8-dFAmED8YV4ZK5A8dIgaDb2l10cI/s1600/menutop.png) repeat-x;width:100%;margin:0 auto;padding:0 auto;-moz-box-shadow:0 3px 3px 3px rgba(0,0,0,0.4);-webkit-box-shadow:0 3px 3px 3px rgba(0,0,0,0.4);border-bottom:1px solid #444;border-top:3px solid #f1c822}
#topbar{width:980px;height:40px;margin:0 auto}
#top{width:100%}
#top,#top ul{list-style:none;font-family:Arial, serif;margin:0;padding:0}
#top a{display:block;text-decoration:none;font:normal 11px Arial;text-transform:none;color:#CECECF;border-right:1px solid #484747;border-left:1px solid #191919;padding:7px 40px 7px}
#top a.arrow{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWVNX8Qv15-m3HkyARmGSnKgAw115pANhTKqsO8xIrpbISxt7D2wt_5-hgpwKIguj4d7XXMP4ga2h0Yb1rEYRiFdC5FaF7E-iyRpQim8D2iNodG8Rn2IFXtiryLypkqYEGQ6Aj42Po8Kw/s1600/arrow_white.gif);background-repeat:no-repeat;background-position:right center;padding:7px 30px 7px 20px}
#top li{float:left;position:static;width:auto}
#top li ul,#top ul li{width:170px}
#top ul li a{text-align:left;color:#fff;font-size:12px;font-weight:400;text-transform:none;font-family:Arial;border:none;padding:5px 10px}
#top li ul{z-index:100;position:absolute;display:none;background:#222;padding-bottom:0px;-moz-box-shadow:0 2px 2px rgba(0,0,0,0.4);-webkit-box-shadow:0 2px 2px rgba(0,0,0,0.4)}
#top li:hover a,#top a:active,#top a:focus,#top li.hvr a{background-color:#222;color:#fff}
#top li:hover ul,#top li.hvr ul{display:block}
#top li:hover ul a,#top li.hvr ul a{color:#edfdfd;background-color:transparent;text-decoration:none}
#top li ul li.hr{border-bottom:1px solid #333;border-top:1px solid #000;display:block;font-size:1px;height:0;line-height:0;margin:0px 0}
#top ul a:hover{background-color:#555!important;color:#fff!important;text-decoration:none}
#top a span,#top a.arrow span{font:bold 12px Arial;color:#888;display:block;line-height:16px;text-transform:uppercase;text-shadow: 1px 2px 2px #000}
#top li:hover a span,#top li:hover a.arrow span{color:#f1c822}

.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden}
.clearfix{display:inline-block}
#inner{padding-top:40px;}
#fixed {position:fixed;top:0;left:0;width:100%;height:40px;z-index:999;}
#fixedinner{text-align:center;background:transparent;height:40px;position:relative;z-index:999;}
* html, * html body{overflow-y:hidden;height:100%;}
* html #fixedinner{margin-right:-143px;voice-family: "\"}\""; voice-family:inherit; }
* html #fixedinner{margin-right:17px;}
* html #fixed {position:absolute;}

</style>


    <div id='fixed'>
    <div id='fixedinner'>
    <div id='top-wrapper'>
    <div id='topbar'>
    <ul id='top'>
    <li><a href='/'><span>Welcome</span>Homepage</a></li>
    <li><a href='http://emb-a.blogspot.com/2013/04/membuat-menu-drop-down-melayang-diatas.html'><span>This is</span>pasang widget</a></li>

    <li><a class='arrow' href='#'><span>Menu 1</span>Keterangan Disini</a>
    <ul>
    <li><a href='#'>Sub menu 1</a></li>
    <li class='hr'/>
    <li><a href='#'>Sub menu 2</a></li>
    <li class='hr'/>
    <li><a href='#'>Sub menu 3</a></li>
    <li class='hr'/>
    <li><a href='#'>Sub menu 4</a></li>
    </li></li></li></ul>
    </li>

    <li><a class='arrow' href='#'><span>Menu 2</span>Keterangan Disini</a>
    <ul>
    <li><a href='#'>Sub menu 1</a></li>
    <li class='hr'/>
    <li><a href='#'>Sub menu 2</a></li>
    <li class='hr'/>
    <li><a href='#'>Sub menu 3</a></li>
    <li class='hr'/>
    <li><a href='#'>Sub menu 4</a></li>
    </li></li></li></ul>
    </li>

    <li><a class='arrow' href='#'><span>Menu 3</span>Keterangan Disini</a>
    <ul>
    <li><a href='#'>Sub menu 1</a></li>
    <li class='hr'/>
    <li><a href='#'>Sub menu 2</a></li>
    <li class='hr'/>
    <li><a href='#'>Sub menu 3</a></li>
    <li class='hr'/>
    <li><a href='#'>Sub menu 4</a></li>
    <li class='hr'/>
    <li><a href='#'>Sub menu 5</a></li>
    </li></li></li></li></ul>
    </li>


    <br class='clearit'/>
    </ul></div>
    <div style='clear:both;'/>
    </div>
    </div></div></div>

 <!-- Menu melayang bro di blogger/blogspot -->

Ket:

• Warna Biru bisa anda tukar untuk mengatur, bingkai / border
• Warna Hijau bisa ditukar untuk mengatur warna menu ketika di sentuh kusor mouse
• # (pagar) bisa anda ganti dengan URL
• menu dan sub menu bisa anda ganti dengan nama menu

2. Pergi ke tata letak -->  Tambah gadget --> simpan

3. selesai

Itulah 3 cara mudah menambahkan menu melayang drop down