Cara Membuat Menu Dropdown 2 Di Blog

Minggu, 24 Maret 2013

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/AVvXsEgPp1sIHGIsWYHkg-uQaSNMB9cYAoe5x2taDJavnfSYWvwsEdvKaMLgMDRhqbf8gQnsWAwbFj-PVd8JZxmCDAn1P-0ow4xIYEClNGpHXha0uGqERLK8ELgk72-E7g6Y0W743BR7DnkbMyCY/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/AVvXsEimSV_M3oKYXJ5CUJVNDEXKx3Cg1kam25dyIx3ELxU-mrr5aNOMqKCE1_F11Yd4-eDA1EB8v1409KpTB2V4xHnCQTRDXDuAXrXyug74uoezK0wafwcjXqx4Fm4dd5mc4qmLCZIYKpAs-g8S/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/AVvXsEi1C6jA2VfZmXaDo8Pv1yzTR4ETGouhTh1mzWHbl2Eh6CgN56E8uQXs4WSxUbBNR1eP6Yr5mi_0Ee9U0bOosjC47QbmWNZvv8y8AisWxRn7h2Oc6CMwB3bAZQpaHWCOzS5X0nYZxQZZu33q/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/AVvXsEhDkUdvyTTG1nvtySveIZF8mENyVjkLywXSFJVlvKAyKtSX_4VwIYNJWwyrcdkpARbn6gv1mf9eIfcJoc60-lKD0Xs4F7ppk2G7eeQCi1O4QBqfHGwW6QF0xC37rJp6ZRA5N4DGUiW8tIY/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=='')this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value=''' 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.