Cara Membuat Menu Atas Blog

CARA PERTAMA
1. Buka Template
2. Edit html
3. Cari kode ]]></b:skin>
4. Copy kode dibawah ini kemudian letakan diatas kode ]]></b:skin>

/* Menu Horizontal Dropdown ----------------------------------------------- */ #menuwrapperpic{background: url(http://2.bp.blogspot.com/-eVufkC686Cw/TwGo8YAlWwI/AAAAAAAAAYM/tWP7l3ENpjY/s1600/menubar.png) repeat-x;width:960px;margin:0 auto;padding:0 auto} #menuwrapper{width:960px;height:35px;margin:0 auto} .menusearch{width:300px;float:right;margin:0 auto;padding:0 auto} .clearit{clear:both;height:0;line-height:0.0;font-size:0} #menubar{width:100%} #menubar,#menubar ul{list-style:none;font-family:Arial, serif;margin:0;padding:0} #menubar a{display:block;text-decoration:none;font-size:12px;font-weight:700;text-transform:uppercase;color:#CECECF;border-right:1px solid #191919;padding:12px 10px 8px} #menubar a.trigger{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaLHzq9xPqfqbzM2IAAFkYb1oAcBrrRvplcE-UY0x3L7PTvJaMRG-dz8KYOqNy4DxZP2JRWfc6oaTCWbJnEWi7AbDhhnGOjmJqPjCty6l5NxGRxOQw-w4fXdMQ6yfhEhKi28Dl2WgEmuo/s1600/arrow_white.gif);background-repeat:no-repeat;background-position:right center;padding:12px 24px 8px 10px} #menubar li{float:left;position:static;width:auto} #menubar li ul,#menubar ul li{width:170px} #menubar 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} #menubar li ul{z-index:100;position:absolute;display:none;background:#000000;padding-bottom:5px;-moz-box-shadow:0 2px 2px rgba(0,0,0,0.6);-webkit-box-shadow:0 2px 2px rgba(0,0,0,0.6)} #menubar li:hover a,#menubar a:active,#menubar a:focus,#menubar li.hvr a{background-color:#FFFFFF;color:#5F04B4} #menubar li:hover ul,#menubar li.hvr ul{display:block} #menubar li:hover ul a,#menubar li.hvr ul a{color:#edfdfd;background-color:transparent;text-decoration:none} #menubar li ul li.hr{border-bottom:1px solid #FF0000;border-top:1px solid #FF0000;display:block;font-size:1px;height:0;line-height:0;margin:4px 0} #menubar ul a:hover{background-color:#FF0000!important;color:#fff!important;text-decoration:none}


CARA KEDUA
1. Buka Tata Letak
2. Tambahkan Gadget
3. Pilih HTML/JavaScript
4. Copy paste kode dibawah ini.

<div id='menuwrapperpic'>
<div id='menuwrapper'>
<ul id='menubar'>
<li><a href='/'><img border='#08088A' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiD0kTSEBdXxkWCkEEZOKFtFbJhUgx3ya-9Mj2xMgbB34qILAvB8ZVnN-C9qHgThhti6NfWD7MzRVCiDOXAG6qJPPNVJfqaPs4PvuDENvNB_21IiwHwArZcVk7c8Dadi1suzYMtaikCGAg/s1600/home_white.png' style='padding:0px;'/> Home</a></li>

<li><a class='trigger'>Contact Us</a>
<ul>
<li><a href='https://plus.google.com/111910615281804038101'>TENTANG ADMIN </a></li>
<li class='hr'/>
<li><a href='http://www.facebook.com/profile.php?id=100002871531006'> CONTACT ON FACEBOOK </a></li>
<li class='hr'/>
<li><a href='https://plus.google.com/111910615281804038101/posts'>CONTACT ON GOOGLE + </a></li>

</li></li></ul>
</li>
<li><a href='http://www.onelyz.co.cc/search/label/NEWS' target='new'> NEWS </a></li>

<li><a href='http://www.onelyz.co.cc/search/label/Software' target='new'> SOFTWARE </a></li>

<li><a href='http://www.onelyz.co.cc/search/label/TIPS%20N%20TRICK' target='new'> TIPS & TRICK </a></li>

Inget :
Warna merah kalian ganti dengan Url kalian dan Namanya juga anda ganti..
semoga bermanfaat..

sumber : http://zuazz.blogspot.com