Cara Mudah Membuat Menu Drop Down di Blogger

Bagi para blogger pemula mungkin sangat ingin sekali untuk membuat menu dropdown pada blognya. Di sini akan saya kasih tau cara membuat menu ini dengan mudah sehingga akan membuat blog Anda semakin bagus, rapi, dan profesional. Yuk simak cara-caranya.

1.  Pertama silakan masuk ke akun blogger Anda.

2.  Buka Template kemudian pilih Edit html.

3. Setelah masuk ke Edit html silakan cara kode ini: ]]></b:skin>, untuk memudahkan tekan ctrl + f.

4.  Setelah kode tersebut ketemu, paste kode di bawah ini tepat di atas kode yang tadi.

/* Menu Horizontal Dropdown ----------------------------------------------- */ #menuwrapperpic{background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSg0njoaG9mr8oVopjWOMPmKQX49hC416lkTZNTD2tlDigBTxHVWw0IsH8HiZNF3M-zSeTk1eWIHGKWUWHLJ5i_KuSy4bG6aY7N3Y_cbuFpALe5wuFKxyWB8Qt-bSMQRl9tpiJfiT814U/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:Trebuchet MS, 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/AVvXsEhRmwjHBd5XwA1HwnbTYXixBG0LCSkSWmiDxl_ooR4-zI_2hUuZsWVt8_zBEBGCU-y7gINyeND4mbqh_9KYx9ucyKGm90dn4Mbaq257u1XaZVksjCxc1CAN0_zGzvkcHowqtA_ZIHfVp6Y/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:Trebuchet MS;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}

Kode yang berwarna merah adalah menunjukkan tinggi atau lebar menu, Anda bisa menggantinya sesuai keinginan.

5.  Kemudian cari kode di bawah ini.

<header>  : untuk menempatkan menu di atas nama blog
</header> : untuk menempatkan menu di bawah nama blog

6.  Pasang kode berikut tepat di atas kode <header> jika Anda ingin memasang menu di atas header, atau di bawah kode </header> jika Anda ingin memasang di bawah header.

<div id='menuwrapperpic'>
<div id='menuwrapper'>
<ul id='menubar'>
<li><a href='/'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhmvClUjSjVAHTt5t3UwpsORrtGiKcoPmE-gQZ2O5pqB-400Dm7zeCvw8AfnwmTj-hG0elndIFoCSKq8HmMGaaENOXMb-AqTrOlUvliPV02iLk9zDeuiZTNA4_C2fRmm1zlp4ydvNwnkY/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/AVvXsEg15P_7SwDLIBKcbw1XYXVHAvOhlszvpIKPgW0rt3zWEp1NoX60ykFX7dVp7ZC-d-_Fknu7PKClOrdomreyPz5wSKVFfiw-Ky8RQLsFjy8nzIQiRlEgNLNftnU_wTjwcxXBkQ5bek6ja4Q/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/AVvXsEhHOhqCB3l629195U3az-zPnFNENJ-Be2EgOBUKWTGESoCTaFTATnOPV3a5eQ-8sLCukGsGdag-dlDtHYDFIMDIkgBWmiqDsqrhI3bHCnkidOzaW0hc3qVqGlGamc8dPhIUaVveH7SsTf8/s1600/bg_search.gif' type='image' value='Search'/>
</form></div></div><br class='clearit'/></div><div style='clear:both;'/></div> 

Catatan:

Untuk URL Blog silakan Anda isi dengan alamat/link label atau alamat artikel anda.

Untuk Nama Menu Anda dapat menggantinya sesuai keinginan, misalnya Kesehatan, Teknologi, atau Berita.

Untuk Nama Sub Menu Anda dapat mengganti sendiri sesuai keinginan. Misalnya:

Teknologi
     Internet
     Jaringan
     Berita

Demikian cara membuat menu drop down kali ini. Semoga berhasil dan terima kasih atas kunjungannya.

Sumber: http://waroenkblog.blogspot.com 

PERHATIAN

Bagi anda yang ingin mengcopy artikel ini mohon masukkan

sumber artikel anda dengan memasukkan:

http://saepudinahmed.blogspot.com/2013/08/cara-mudah-membuat-menu-drop-down-di.html

Artikel selanjutnya: Blogger