Membuat Menu Dropdown di blog yang sederhana ~ F2

Banyak sekali jenis Menu dropdown yang temen blogger share,namun disini saya akan share menu dropdown yang mungkin sederhana yang bisa anda gunakan di blog anda,dan menu dropdown ini sangat simple dan juga gampang dalam penerapannya sehingga anda tidak perlu memerlukan ke ahlian khusus dalam penerapan kode tersebut,dan cara penerapan kode tersebut adalah sebagai berikut

Seperti biasa silahkan anda masuk ke blogger anda
kemudian silahkan anda pilih templatenya
Setelah itu masuk ke edit html
dan silahkan anda cari kode ]]></b:skin> dan letakan kode berikut sebelum kode tersebut

#menuwrapperpic{background:#333;width:600px;margin:10px auto;padding:0 auto} #menuwrapper{width:600px;height:35px;margin:10px auto}
#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:10px;font-weight:700;text-transform:uppercase;color:#CECECF;border-right:1px solid #191919;padding:12px 10px 8px} #menubar a.text-style{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEia_BaXxeIeYn2-oJ_LSiZ1u9YZA63LwHmLmg5pgnACZdTHnUq7B8BFhFlc9kzWVAsuLOtznx5PugiFTX1yeBw8KQFAvk7uEd80Notr9OHLfORmsDlAY8HshZVXTi8FrGR8lZf4JlN2Szc/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:130px} #menubar ul li a{text-align:left;color:#333;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:#FFBF00;border-width: 1px;
border-style: solid;
border-color: #FCA #F90 #F90;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:#454545;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-width: 1px;
border-style: solid;
border-color: #FCA #F90 #F90;display:block;font-size:1px;height:0;line-height:0;margin:0px 0} #menubar ul a:hover{background-color:#fff!important;color:#333!important;text-decoration:none} 
#nav{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZuoLQOP_XLv7_htSX15qke1GTCQR6TWpyuKSXeaoqvQOTYPUKPXgKMBE-b83igMzJk4kZQJEgKDR5oYSwzugOJoXM3b5OqDzPS5zJw18FBLN3eYVBBN-k5ClbmAUeRvEP1U_G3-6ZWE0/s1600/main-menu-bg.png);background-repeat:repeat-x;height:50px;border-bottom:5px solid #00A849;padding-left:10px}
#nav ul{height:50px;margin:0;padding:0}
#nav li{position:relative;display:inline-block;float:left;border:1px solid #222;border-width:0 0 0 1px;height:40px;margin-top:5px}
#nav .menu li:hover &gt; a{background-color:rgba(0,0,0,0.28);}
#nav li a{display:block;line-height:45px;height:35px;text-decoration:none;color:#00A849;padding:0 15px;text-shadow:0 2px 2px black;border-left:1px solid #383838}
#nav li:last-child a{border-right:0 none}
#nav li a:hover{color:#fff}
#nav ul.submenu li{float:none;width:100%;margin:0;border-bottom:2px solid #333;border-top:1px solid #383838;border-left:0 none;height:30px}
#nav ul.submenu{display:none;padding:0;position:absolute;top:42px;width:180px;z-index:99;float:left;background:#2D2D2D!important;-webkit-box-shadow:0 3px 4px 1px rgba(0,0,0,0.2);box-shadow:0 3px 4px 1px rgba(0,0,0,0.2);-webkit-border-bottom-right-radius:3px;-webkit-border-bottom-left-radius:3px;-moz-border-bottom-right-radius:3px;-moz-border-bottom-left-radius:3px;border-bottom-right-radius:3px;border-bottom-left-radius:3px;height:auto}
#nav ul.submenu.hidden{display:block;-khtml-opacity:0;-moz-opacity:0;opacity:0;visibility:hidden;-webkit-transition:all 0.5s ease 0s;-o-transition:all 0.5s ease 0s;transition:all 0.5s ease 0s;-moz-transition:all 0.5s ease 0s}
#nav li:hover ul.submenu.hidden{-khtml-opacity:1;-moz-opacity:1;opacity:1;visibility:visible}
#nav ul.submenu li:first-child{border-top:0 none}
#nav ul.submenu a{height:30px;line-height:1em;padding:7px 10px}
#nav ul.submenu a:hover{padding-left:15px}
#nav li.mhome{border:0;margin-top:0;height:52px}
#nav li.mhome a{height:52px;border-left:0 none;text-indent:-9999px;width:35px;background-color:#00A849;background-image:url(&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlddb3xzdjG1Hhd8vBvGPCYKli_-78gEloXUsy3L-6nNVZh2ebXxsDkq8UyoarsCp50o721KjZENhj1vzkbAqmWrJ2v5D_SeagrDSK73rLRJQWeQzBWYKTW05jZ2Eop_-Q0bzlhV-nitk/s1600/home+(1).png&#39;);background-repeat:no-repeat;background-position:50% 9px}

Dan di bawah ini adalah kode htmlnya yang perlu anda letakan

<div id='menuwrapperpic'>
<div id='menuwrapper'>
<ul id='menubar'>
<div class='dido'>
<li><a class='text-style'>Sidebars</a>
<ul>
<li><a href='http://blogertemplate9.blogspot.com/search/label/1 Sidebar Kiri' target=''>1 Left Sidebar</a></li>
<li class='hr'/>
<li><a href='http://blogertemplate9.blogspot.com/search/label/1 Sidebar Kanan' target='new'>1 Right Sidebar</a></li>
<li class='hr'/>
<li><a href='http://blogertemplate9.blogspot.com/search/label/2 Sidebar kiri' target='new'>2 Left Sidebar</a></li>
<li class='hr'/>
<li><a href='http://blogertemplate9.blogspot.com/search/label/2 Sidebar kanan' target='new'>2 Right Sidebar</a></li>
<li class='hr'/>
<li><a href='http://blogertemplate9.blogspot.com/search/label/Left and Right' target='new'>Left and Right</a></li>
</ul>
</li>
  </div>
<li><a class='text-style'>Columns</a>
<ul>
<li><a href='http://blogertemplate9.blogspot.com/search/label/1 Kolom' target='new'>1 Column</a></li>
<li class='hr'/>
<li><a href='http://blogertemplate9.blogspot.com/search/label/2 Kolom' target='new'>2 Column</a></li>
<li class='hr'/>
<li><a href='http://blogertemplate9.blogspot.com/search/label/3 Kolom' target='new'>3 Column</a></li>
<li class='hr'/>
<li><a href='http://blogertemplate9.blogspot.com/search/label/4 Kolom' target='new'>4 Column</a></li>
</ul>
</li>
<li><a class='text-style'>Styles</a>
<ul>
<li><a href='http://blogertemplate9.blogspot.com/search/label/Elegant' target='new'>Elegant</a></li>
<li class='hr'/>
<li><a href='http://blogertemplate9.blogspot.com/search/label/Free Premium' target='new'>Free Premium</a></li>
<li class='hr'/>
<li><a href='http://blogertemplate9.blogspot.com/search/label/Floral' target='new'>Floral</a></li>
<li class='hr'/>
<li><a href='http://blogertemplate9.blogspot.com/search/label/Gallery' target='new'>Gallery</a></li>
<li class='hr'/>
<li><a href='http://blogertemplate9.blogspot.com/search/label/Magazine' target='new'>Magazine</a></li>
<li class='hr'/>
<li><a href='http://blogertemplate9.blogspot.com/search/label/Simple' target='new'>Simple</a></li>
</ul>
</li>
<li><a class='text-style'>Colors</a>
<ul>
<li><a href='http://blogertemplate9.blogspot.com/search/label/Brown' target='new'>Brown</a></li>
<li class='hr'/>
<li><a href='http://blogertemplate9.blogspot.com/search/label/Hitam' target='new'>Black</a></li>
<li class='hr'/>
<li><a href='http://blogertemplate9.blogspot.com/search/label/Merah' target='new'>Red</a></li>
<li class='hr'/>
<li><a href='http://blogertemplate9.blogspot.com/search/label/Biru' target='new'>Blue</a></li>
<li class='hr'/>
<li><a href='http://blogertemplate9.blogspot.com/search/label/Hijau' target='new'>Green</a></li>
<li class='hr'/>
<li><a href='http://blogertemplate9.blogspot.com/search/label/Gray' target='new'>Gray</a></li>
</ul>
</li>
<li><a class='text-style'>Topics</a>
<ul>
<li><a href='http://mazinubersahabat.blogspot.com/'>Sub Menu 1</a></li>
<li class='hr'/>
<li><a href='http://mazinubersahabat.blogspot.com/'>Sub Menu 2</a></li>
<li class='hr'/>
<li><a href='http://mazinubersahabat.blogspot.com/'>Sub Menu 3</a></li>
<li class='hr'/>
</ul>
</li>
<li><a class='text-style'>Features</a>
<ul>
<li><a href='http://mazinubersahabat.blogspot.com/'>Blog 1</a></li>
<li class='hr'/>
<li><a href='http://mazinubersahabat.blogspot.com/'>Blog 2</a></li>
<li class='hr'/>
<li><a href='http://mazinubersahabat.blogspot.com/'>Blog 3</a></li>
<li class='hr'/>
<li><a href='http://mazinubersahabat.blogspot.com/'>Blog 4</a></li>
</ul>
</li>
<li><a class='text-style'>Width</a>
<ul>
<li><a href='http://mazinubersahabat.blogspot.com/'>Blog 1</a></li>
<li class='hr'/>
<li><a href='http://mazinubersahabat.blogspot.com/'>Blog 2</a></li>
<li class='hr'/>
<li><a href='http://mazinubersahabat.blogspot.com/'>Blog 3</a></li>
<li class='hr'/>
<li><a href='http://blogertemplate9.blogspot.com/search/label/1 Sidebar Kiri'>Blog 4</a></li>
</ul>
</li>
</ul>

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

Nah itulah cara pembuatan menu dropdown,semoga artikel ini bisa membantu anda semua.

File download Mp3 Full Album kami compres menggunakan rar dan disimpan melalui hosting 4shared.com dan mediafire.com, file rar tidak menggunakan Password. How To Download