Opera Seo – Tempat Berbagi Ilmu, dibawah adalah teknik Kesehatan yang saya bagikan
Cara bikin Menu Horizontal Dropdown Muantep
Cara bikin Menu Horizontal Dropdown Muantep – Poetra Pakumis | kini saya akan mengberbagi Cara bikin MenuHorizontal Dropdown Muantep. Menu dropdown ini sama juga menu dropdown yang ada pada template Johny Movie Prett selanjutnya Screenshotnya :
selanjutnya Cara bikin Menu Horizontal Dropdown Muantep :
1. Login account situs atau blogger sahabat layaknya umumnya.
2. Masuk ke Template – Edit HTML (Jagan lupa centang Expand Widget Templates).
3. Cari kode ]]></b:skin> lalu letakan kode di bawah ini tepat diatas 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(http://1.bp.situs atau blogspot.com/-RKeA7RtDhGQ/UTXCF1U1UjI/AAAAAAAACZk/OQPyswqU2nM/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(http://2.bp.situs atau blogspot.com/-f3Vp4InLREM/UTCD2hlRMLI/AAAAAAAACVk/z0ZcpjH_4Wg/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(http://2.bp.situs atau blogspot.com/-WBhUKiFI8E8/UTVmAKT8haI/AAAAAAAACZU/glvtpzkh6bA/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. sesudah cara diatas dikerjakan silahkan sahabat 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=’http://1.bp.situs atau blogspot.com/-wqzYVSTa638/UQrc7C0UP3I/AAAAAAAABGU/TgbAOmzXLAs/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 mempunyai warna merah itu ialah URL yang akan di tuju, silahkan sahabat ganti URL yang sahabat inginkan.namun kode mempunyai warna biru ialah judulnya, silahkan sahabat sesudahkan kemauan sahabat.
Nah,sekian artikel tentang Cara bikin Menu Horizontal Dropdown Muantep semoga artikel yang saya catat berguna
Apa bila Anda mendapatkan BROKEN LINK silahkan bersaran pada tempat yang sudah disiapkan.
Terima kasih telah berkunjung, semoga artikel Cara bikin Menu Horizontal Dropdown Muantep bermanfaat.
0 comments:
Post a Comment