Cara Membuat Menu Drop Down pada Blog

Buat siapa aja deh yang baru buat blog dan pengen membuat Menu Drop Down di blognya, ini saya punya caranya yg simple tanpa download Template..
Saya juga belajar dari para master2 yang sudah handal.. tapi masih tetep g bisa, mungkin karna template yg berbeda atau apalah,, waktu saya coba gagal terus,, akhirnya saya coba pahami kalimat demi kalimat bahasa HTML yang akhirnya edit sedikit demi sedikit bisa juga.
ini dia caranya mudah kok...

Cara Membuat Menu Drop Down pada Blog

1. Masuk akun Blogger
2. Pilih Template =>> Edit HTML
3. Lalu cari code  ]]><b:skin>
4. Kalau sudah ketemu copy code di bawah ini kemudian paste di ATAS code  ]]><b:skin>

/* Menu Horizontal Dropdown ----------------------------------------------- */ #menuwrapperpic{background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaQRbTDRuAqJX7IzjK9yeDkMCGZXhYKEpIhm93PNWpvPXuATj9S_hKChfnlFGn7HlrLZVwsYSzXGYEnS2YUYlU70SC7N4dRWHRF1NwyqXuuH67ovMKomTmfooTtnjM2aNt9JM1klILknE/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/AVvXsEhhlqYMdsWVXRej4pika0zbB7_9Crg2jtxULsQLStDFdtt6yGf2PkD3Z0pR0oYh9VgKYPMm2UkVRVBvI5eQMYdWu4zOnkp1Z6O4QvqK76f70G9cxD75p4Bk9Yl1CJVImrw74WIX4YSxwJo/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:#222;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:#222;color:#E98C0A} #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 #444;border-top:1px solid #000;display:block;font-size:1px;height:0;line-height:0;margin:4px 0} #menubar ul a:hover{background-color:#555!important;color:#fff!important;text-decoration:none}

5. Kemudian copy code dibawah ini dan paste di ATAS code </header>

<div id='menuwrapperpic'>
<div id='menuwrapper'>
<ul id='menubar'>
<li><a href='/'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3s0KhlmzHjFI-rBP1fzfWdN3BwAXsNC-RLZrAlQfKCnUO3ooiSnL6rSx9u014oP_JoHjdh3AxIvZMBnna_MCYsVWMSbzU_0FmZfVkUt5kWphRtxpY127o_TbWCBtwJ1WdzKhnlNMcetY/s1600/home_white.png' style='padding:0px;'/> Home</a></li>
<li><a href='http://www.blogger.com/profile/06961337061354681028' target='new'>Tentang Admin</a></li>
<li><a class='trigger'>Contact Us</a>
<ul>
<li><a href='https://plus.google.com/u/0/106997202037581570725' target='new'>Goggle +</a></li>
<li class='hr'/>
<li><a href='http://twitter.com/Twitter Anda' target='new'>Contact on Twitter</a></li>
<li><a href='http://www.facebook.com/Facebook anda' target='new'> Facebook</a></li>
</ul>
</li>
<li><a href='URL BLOG' target='new'>Nama Menu</a></li>
<li><a class='trigger'>Nama Menu</a>
<ul>
<li><a href='URL BLOG'>Nama Sub Menu</a></li>
<li class='hr'/>
<li><a href='URL BLOG'>Nama Sub Menu</a></li>
<li class='hr'/>
<li><a href='URL BLOG'>Nama Sub Menu</a></li>
<li class='hr'/>
</ul>
</li>
<li><a class='trigger'>Nama Menu</a>
<ul>
<li><a href='URL BLOG'>Nama Sub Menu</a></li>
<li class='hr'/>
<li><a href='URL BLOG'>Nama Sub Menu</a></li>
<li class='hr'/>
<li><a href='URL BLOG'>Nama Sub Menu</a></li>
<li class='hr'/>
<li><a href='URL BLOG'>Nama Sub Menu</a></li>
<li class='hr'/>
<li><a href='URL BLOG'>Nama Sub Menu</a></li>
<li class='hr'/>
<li><a href='URL BLOG'>Nama Sub Menu</a></li>
<li class='hr'/>
<li><a href='URL BLOG'>Nama Sub Menu</a></li>
</ul>
</li>
</ul> <div class='menusearch'>
<div style='float:right;padding:8px 8px 0 0;'>
<form action='URL BLOG/search' method='get' target=''>
<input name='sitesearch' style='display:none;' value='URL BLOG'/>
<input id='search-box' name='q' onblur='if(this.value==&apos;&apos;)this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value=&apos;&apos;;' style='width:170px;border:none;padding:4px 10px; font:italic 12px Georgia;color:#666; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisLQAMCBO_r1fmez4a6x7CRAHmS6-wunfTnbsxIRV1rzNNC4ojp4ZBEWyrTKYQ-3fxExaE0YEqOnXJEMZNFLOiSpNdbs62OX51jma3yV_ew_4g5qblDvspbjjcsXhmkMI5Bn_sS4igTaI/s1600/field-bg.gif) no-repeat;' type='text' value='Cari disini ya sob...'/><input align='top' id='search-btn' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhs35u1MLYFU9lPVmBs04TJkxZ9IouxsfVS42HnmdMgCw0BBFn0ACi7nyS2IMX-RjTL82zPvLQuqMzHyQjzHzOYRr_wuP_vsabQP3WoozHCNoZSYK9adkMG43V5zMXw4C3OJZiyV_wBd7c/s1600/bg_search.gif' type='image' value='Search'/>
</form></div></div><br class='clearit'/></div><div style='clear:both;'/></div>

6. Simpan dan selesai deh ....