Cara Membuat Menu Horizontal Dropdown Muantep

Cara Membuat Menu Horizontal Dropdown Muantep - Poetra Pakumis | Kali ini saya akan mengshare Cara Membuat MenuHorizontal Dropdown Muantep. Menu dropdown ini sama dengan menu dropdown yang ada pada template Johny Movie Prett berikut Screenshotnya :

Berikut Cara Membuat Menu Horizontal Dropdown Muantep :

1. Login akun blogger sobat seperti biasanya.

2. Masuk ke Template - Edit HTML (Jagan lupa centang Expand Widget Templates).

3. Cari kode ]]></b:skin> lalu letakan kode di bawah ini tepat di atas kode ]]></b:skin>.

.menu,.menu ul,.menu li,.menu a{border:none;outline:none;margin:0 auto;padding:0;z-index:999}.menu{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhd0JAn5iABrhKjAEIWLC7ZnA7VjtMMimPM_9KEU8d6WrK8xrLradz_eBDrEhKCBdZzNbSumwqRqAqp4qWULIzxtgVFcVPaTFhpIOj3ka5qX1P6kfiyV_UAsr0gq6GYj1w0uQ52btTucnJa/s1600/menu-overlay.png) no-repeat center top;width:970px;height:45px;}.menu li{position:relative;list-style:none;float:left;display:block;height:45px}.menu li a{display:block;text-decoration:none;font-family:Oswald;font-weight:400;font-size:16px;color:#e7e7df;text-shadow:-1px -1px #1f2626;-webkit-transition:color .2s ease-in-out;-moz-transition:color .2s ease-in-out;-o-transition:color .2s ease-in-out;-ms-transition:color .2s ease-in-out;transition:color .2s ease-in-out;margin:0;padding:10px 28px  14px 10px}.menu li:first-child a{padding:10px 22px 8px 10px}.menu li:hover > a{color:#fec700}.menu ul{position:absolute;top:47px;left:0;opacity:0;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOV3Gxgk-M69oOavDphKaFhOTGH4Cv9LtMtBZ-l29LxtWFRekbRGU-E0EYHqdil3osoLaFyspM44HcUIB9l-oqvWoFDdlQpiigYoDMDmnI4owGkEiVrw8KyU5uxDdsRgctfQmLXZcvaBkX/s1600/bg-trans.png);-webkit-border-radius:5px;-moz-border-radius5px;border-radius:5px;border:1px solid #333;-webkit-transition:opacity .25s ease .1s;-moz-transition:opacity .25s ease .1s;-o-transition:opacity .25s ease .1s;-ms-transition:opacity .25s ease .1s;transition:opacity .25s ease .1s}.menu li:hover > ul{opacity:1}.menu ul li{height:0;overflow:hidden;-webkit-transition:height .25s ease .1s;-moz-transition:height .25s ease .1s;-o-transition:height .25s ease .1s;-ms-transition:height .25s ease .1s;transition:height .25s ease .1s;padding:0}.menu li:hover > ul li{height:30px;overflow:visible;padding:0}.menu ul li a{color:#ccc;font:14px Arial;width:120px;margin:0;padding:6px 0 6px 30px;text-shadow:none;}.menu ul li:first-child a{padding:6px 14px  6px 30px}.menu ul li:last-child a{border:none}.menu a.trigger{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQeT2ARBIaVyiWTDdOq8erO6dm6fssv05_C48mGMn75xJuU8gP9Xax4G6Pc243KMhYlai0mYpLSCwkeJdPC4EJH8ZcV1vfkisVXiSgGJvTDK4DYSQ8WUsfiGHwBifdeS6c4bjKwIErj5sL/s1600/arrow.png) no-repeat 6px center}.menusearch{width:240px;float:right;margin:0 auto;padding:0 auto}.searchform {margin-top:0px;display: inline-block;zoom: 1;*display: inline;padding:0;background: rgba(0,0,0,.4);-moz-border-radius:4px;-webkit-border-radius:4px;border-radius:4px; -moz-box-shadow: 0 1px 0 rgba(255,255,255,.2), 0 2px 1px rgba(0,0,0,.9) inset;-webkit-box-shadow: 0 1px 0 rgba(255,255,255,.2), 0 2px 1px rgba(0,0,0,.9) inset;box-shadow: 0 1px 0 rgba(255,255,255,.2), 0 2px 1px rgba(0,0,0,.9) inset;width:240px;height:30px; overflow:hidden}.searchform input {font:italic 12px Arial;color:#aaa;line-height:30px;height:30px;padding:0;margin:0;}.searchform .searchfield {background:transparent;padding:0 0 0 6px;margin:0;width: 195px;height:30px;border:0px;outline: none;line-height:30px;}.searchform .searchbutton {border:none;margin:0;padding:0;font-size:12px;height:30px;width:30px;}

4. Setelah cara diatas dilakukan silahkan sobat cari kode <header> jika kode tersebut ada 2 silahkan pilih yang ke 2 lalu taruh kode di bawah ini tepat di bawah kode <header>.

<ul class='menu'>
<li><a href='/'><img alt='home' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh73yplIx96iXCRzjleYKDVgUJikyV5J-bY8dcdc-TNCCiKHJSDuDJMvqSExZpv6FAW1NjDc9sdWU2lrNP1UE5eTQTKx3qjsW8gJBcfF19Euzi-9p2iyZFc95BnmP9gGvFwJy0W4bKcNJw/s1600/home.gif' style='padding:0px;'/></a></li>
<li><a href='#'>Menu 1</a></li>
<li><a href='#'>Drop Menu 1</a>
<ul>
<li><a class='trigger' href='#'>Sub Menu 1</a></li>
<li><a class='trigger' href='#'>Sub Menu 2</a></li>
<li><a class='trigger' href='#'>Sub Menu 3</a></li>
</ul>
</li>
<li><a href='#'>Drop Menu 2</a>
<ul>
<li><a class='trigger' href='#'>Sub Menu 1</a></li>
<li><a class='trigger' href='#'>Sub Menu 2</a></li>
<li><a class='trigger' href='#'>Sub Menu 3</a></li>
</ul>
</li>
<li><a href='#'>Menu 2</a></li>
<li><a href='#'>Menu 3</a></li>
<div class='menusearch'>
<div style='float:right;padding:8px 8px 0 0;'>
<form action='/search' class='searchform' method='get'>
<input class='searchfield' id='q' name='q' onblur='if(this.value==&apos;&apos;)this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value=&apos;&apos;' type='text' value='Search movies....'/>
</form>
</div></div>
</ul>

 Note :
Kode berwarna merah itu adalah URL yang akan di tuju, silahkan sobat ganti dengan URL yang sobat inginkan.
sedangkan kode berwarna  biru adalah judulnya, silahkan sobat seusaikan dengan keinginan sobat.

Nah,sekian artikel tentang Cara Membuat Menu Horizontal Dropdown Muantep semoga artikel yang saya tulis bermanfaat

Jika anda menyukai artikel Cara Membuat Menu Horizontal Dropdown Muantep dan ingin memosting artikel ini.

Bila Anda menjumpai BROKEN LINK atau LINK YANG RUSAK, silahkan berkomentar di bawah postingan pada kotak komentar yang disediakan.