Cara Membuat Drop Down Menu Pada Blog

Menu horizontal drop down adalah menu yang biasanya berada tepat dibawah judul blog atau dibawah header, adapun cara membuatnya adalah sebagai berikut:

 1. Login ke blog dulu
2. Pilih Rancangan - Edit HTML - centang Expand Template Widget
3. Cari kode ]]></b:skin> kemudian copy kode dibawah ini tepat diatas ]]></b:skin>

/* Menu Horizontal Dropdown ----------------------------------------------- */ #menuwrapperpic{background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnq9y6al5y19IHy65_UBZTmD9XDplZ9XD2ZE_B9fY_xXD0U1oXJ6838AmphAZicW4Rj-FQk7s0iuoefGNZ3Y6yf_bCVmrSnOdxJbBA2scK42IqsjAI7LlvloC_InZ1FtoBzBuh_OkJJsD5/s800/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:#fff;border-right:1px solid #000000;padding:12px 10px 8px} #menubar a.trigger{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgeWwWIS3PK3Vs3Z4gh-i929DqSm3kayaqmygVVpRzzeHTMLGrVcl7GWlKRO8YSlh2sSf8XVim6UgHVDLsHgeEnnXtgqLEK-KwsL5eOXlIb_npAi9bNEPqhyphenhyphenc8fw03t5fiwT01ND5ohd4/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:#00ff00;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:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrbgvwgsrsOhQ9jmOwHeQzcuDGQ0GIi7D8IdlJW_2PBp0glzdm4EZpT5QeZJQRkQSnvQi-lYwZk-RfSiZw9dHbyq4w1uDpdf9VREdrdo-MmOgabmRG5tGFr5KnPSdXAJVdDeOIexgRRMHN/s800/menubar.png)repeat-x;;color:#ff0000} #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 #fff;border-top:1px solid #000;display:block;font-size:1px;height:0;line-height:0;margin:4px 0} #menubar ul a:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmtP5KPKxqqVs8XHkRzcFwiIjotA4pOp3emiYK94XEAGexX0Ci0rNQjBiQyeJ4-n4pGJOqXulLdpVFDywMJ2CwUWeMyiB8W8xwsEd79ryESnm9wdU84gP5kWEhNW3Fq9jCFpu_lRmW4Z1O/s800/menubaru.png)repeat-x;!important;color:#00ff00!important;text-decoration:none}

4. Selanjutnya sobat blogger cari kode berikut:
<header> : untuk menempatkan menu di atas nama blog
</header> : untuk menempatkan menu di bawah nama blog
Copy kode di bawah ini dan letakkan tepat di atas kode <header> atau di bawah kode </header>

<div id='menuwrapperpic'>
<div id='menuwrapper'>
<ul id='menubar'>
<li><a href='/'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmb85AirbzVZC7VSWT6uEOL3qaM7kCO5hTnE-ulGgEgSt-LRFlzNo2eRlaUmLCjQeb0KpXO4LnXrci7PoT2RFlx2jGxHX1Bx0Hav6rcRmB-X56O9Rhkvck0TXvCwI0z6wUYBKO2FR1oZg/s1600/home_white.png' style='padding:0px;'/> Home</a></li>
<li><a href='http://siembah.com/arti-forex-adalah' target='_new'>About Forex</a></li>
<li><a class='trigger'>Analisa Forex</a>
<ul>
<li><a href='http://www.beritaforex.com/' target='new'>Analisa Fundamental</a></li>
<li><a href='http://www.seputarforex.com/analisa/forex/' target='new'>Analyze Pair Currency</a></li>
<li><a href='http://www.fxstreet.com/forex-studies/' target='new'>Flash Forex Chart</a></li>
<li><a href='http://www.beritaforex.com/' target='new'>Forex News</a></li>
<li><a href='http://www.fxstreet.com/rates-charts/usdollar-index/?version=1' target='new'>US Dollar Index</a></li>
</ul>
</li>
<li><a class='trigger'>Belajar Forex</a>
<ul>
<li><a href='http://siembah.com/belajar-analisa-teknikal-forex' target='new'>Cara Analisa Teknikal</a></li>
<li><a href='http://profitbesar.com/mengunduh/' target='new'>Expert Advisor</a></li>
<li><a href='http://www.forexmt4.com/mt_yahoo/#MTF%20Indicators/' target='new'>Indicators</a></li>
<li><a href='http://instaforex.com/id/forex_technical_indicators.php' target='new'>Technical Indicator</a></li>
</ul>
</li>
<li><a class='trigger'>Forex Tools</a>
<ul>
<li><a href='http://www.forexfactory.com/calendar.php' target='new'>Economic Calender</a></li>
<li><a href='http://www.fxstreet.com/rates-charts/live-charts/' target='new'>Live Chart Windows</a></li>
<li><a href='http://onetradefx.blogspot.com/p/pivot-kalkulator.html' target='new'>Pivot Calculator</a></li>
<li><a href='http://instaforex.com/id/forex_calculator.php' target='new'>Trader Calculator</a></li>
</ul>
</li>
<li><a href='http://onetradefx.blogspot.com/p/mt5-news.html' target='new'>Prediction</a></li>
</ul> <div class='menusearch'>
<div style='float:right;padding:8px 8px 0 0;'>
</div></div><br class='clearit'/></div><div style='clear:both;'/></div>

Demikianlah Cara Membuat Menu Horizontal Drop Down Di Atas Header Atau Di Bawah Header, semoga bermanfaat