Membuat menu dropdown keren

Nah sobat kali ini saya akan membagikan turtorial membuat menu dropdown keren seperti yang ada pada blog ini...
Sebelumnya saya sudah pernah post menu drop down lainnya...
sebagai referensi silahkan lihat disini....
Dropdown 1
Dropdown 2
Tinggal tergantung sobat untuk memilih yang mana...

Jika sobat tertarik dengan menu dropdown yang ini, silahkan ikuti turtorial berikut ini....
1. Login ke BLOG sobat...
2. Masuk ke Template > Edit HTML > centang Expand Template Widget
3. Search ]]></b:skin> (gunakan ctrl + f untuk mempercepat pencarian) dan pastekan script berikut ini tepat di atasnya

/* Horyzontal Droupdown menu
----------------------------------------------- */
#top-wrapper{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjA-I5Enh_hyAjEsAJdy1SbQunvhuDYIGECHYWab_XNZ8oNGvW4aAH7zUHV7Zx3drWCtX4d2FX0UTs8A0ta2KNXd2p75NoGqiUj6Pg7Cey1BeG-x8HpPc7HQD-NaY_1yrWbuTqVG56riZD7/s1600/menutop.png) repeat-x;width:100%;margin:0 auto;padding:0 auto;-moz-box-shadow:0 3px 3px 3px rgba(0,0,0,0.4);-webkit-box-shadow:0 3px 3px 3px rgba(0,0,0,0.4);border-bottom:1px solid #444;border-top:3px solid #f1c822}
#topbar{width:980px;height:40px;margin:0 auto}
#top{width:100%}
#top,#top ul{list-style:none;font-family:Arial, serif;margin:0;padding:0}
#top a{display:block;text-decoration:none;font:normal 11px Arial;text-transform:none;color:#CECECF;border-right:1px solid #484747;border-left:1px solid #191919;padding:7px 10px 7px}
#top a.arrow{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgNBUNSBfWyXrL2FDe0pZ92CAhXMejsfVxWh7xnmCfUwin04YC0VEB9D4c604xyitbONba1wrnBq1pZwOSyTx4Lc7HjXzoOW513YfO-w6LamA9ApgzSlbGSeWcs0Gm4_W1tf4r0VxTJmk/s1600/arrow_white.gif);background-repeat:no-repeat;background-position:right center;padding:7px 24px 7px 10px}
#top li{float:left;position:static;width:auto}
#top li ul,#top ul li{width:170px}
#top 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}
#top li ul{z-index:100;position:absolute;display:none;background:#222;padding-bottom:0px;-moz-box-shadow:0 2px 2px rgba(0,0,0,0.4);-webkit-box-shadow:0 2px 2px rgba(0,0,0,0.4)}
#top li:hover a,#top a:active,#top a:focus,#top li.hvr a{background-color:#222;color:#fff}
#top li:hover ul,#top li.hvr ul{display:block}
#top li:hover ul a,#top li.hvr ul a{color:#edfdfd;background-color:transparent;text-decoration:none}
#top li ul li.hr{border-bottom:1px solid #333;border-top:1px solid #000;display:block;font-size:1px;height:0;line-height:0;margin:0px 0}
#top ul a:hover{background-color:#555!important;color:#fff!important;text-decoration:none}
#top a span,#top a.arrow span{font:bold 12px Arial;color:#888;display:block;line-height:16px;text-transform:uppercase;text-shadow: 1px 2px 2px #000}
#top li:hover a span,#top li:hover a.arrow span{color:#f1c822}

.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden}
.clearfix{display:inline-block}
#inner{padding-top:40px;}
#fixed {position:fixed;top:0;left:0;width:100%;height:40px;z-index:999;}
#fixedinner{text-align:center;background:transparent;height:40px;position:relative;z-index:999;}
* html, * html body{overflow-y:hidden;height:100%;}
* html #fixedinner{margin-right:-143px;voice-family: "\"}\""; voice-family:inherit; }
* html #fixedinner{margin-right:17px;}
* html #fixed {position:absolute;}

980px  adalah lebar dari menu tersebut

4. Search <div class='header-outer'> (gunakan ctrl + f untuk mempercepat pencarian) dan pastekan script berikut ini tepat di bawahya

<div id='fixed'>
<div id='fixedinner'>
<div id='top-wrapper'>
<div id='topbar'>
<ul id='top'>
<li><a href='/'><span>Welcome</span>Homepage</a></li>
<li><a href='http://rexroom.blogspot.com/2012/10/the-owner.html'><span>This is</span>About Me</a></li>
<li><a href='http://rexroom.blogspot.com/2012/10/aplikasi_5.html'><span>Aplikasi</span>free Download</a></li>

<li><a class='arrow' href='#'><span>Turtorial</span>Belajar Ngeblog</a>
<ul>
<li><a href='http://rexroom.blogspot.com/2012/12/tentang-blogger.html'>Tentang Blogger</a></li>
<li class='hr'/>
<li><a href='http://rexroom.blogspot.com/2012/12/tips-n-tricks.html'>Tips N Tricks</a></li>
<li class='hr'/>
<li><a href='http://rexroom.blogspot.com/2012/12/aksesoris-blog.html'>Aksesoris BLog</a></li>
</ul>
</li>

<li><a href='http://rexroom.blogspot.com/2012/10/wow.html'><span>wOw</span>Top 10</a></li>

<li><a class='arrow' href='#'><span>Tukar Link</span>Komunitas Link</a>
<ul>
<li><a href='http://rexroom.blogspot.com/2012/10/link-komunitas.html'>Banner Link</a></li>
<li class='hr'/>
<li><a href='http://rexroom.blogspot.com/2012/12/text-link.html'>Text Link</a></li>
</ul>
</li>

<li><a href='http://rexroom.blogspot.com/2012/10/daftar-isi.html'><span>INDEX</span>Daftar isi BLog</a></li>

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

Ubah sesuai kebutuhan sobat....

5. Save dan lihat hasilnya...

Related Post: