Menu Navigasi Horizontal Ala Oom dot com - Kalau dulu 4-jie udah pernah share cara membuat menu vertikal dengan icon sekarang 4-jie bakalan share cara membuat Menu Navigasi Horizontal Ala Oom dot com. Kalau bisa dibilang, Menu navigasi horizontal ini mirip dengan punya oom dot com, hanya dropdown dan background menu yang membedakan. 4-Jie juga sengaja posting tutorial ini karena banyaknya permintaan dari rekan blogger seperjuangan setanah air :D. Bukan hanya menu navigasi saja yang akan kita buat, namun kotak pencarian/search box nya juga bakalan kita pasang. Supaya kompak antara menu navigasi dan kotak pencariannya. Untuk itu, buat yang gag sabar silahkan baca tutorial dibawah ini :
1. Masuk ke blogger.com
2. Pilih Rancangan --> Edit HTML, Cari kode ]]></b:skin> dan masukkan kode CSS berikut ini diatas kode tersebut
/*-- (Menu/Nav) --*/ #nav-element{width:900px; margin:0; padding:0px 0 0px 0; float:center} #nav{background:#424242; height:32px; padding:4px 0 0; margin-bottom:0px; clear:both; margin:0 auto; -webkit-border-radius: 7px;-moz-border-radius: 7px; border-radius: 7px;} #nav-left{float:left; display:inline; width:660px; padding-left:6px; padding-top:1px} #nav-right{float:right; display:inline; width:200px; padding-top:3px; padding-right:15px} #nav ul{float:left;list-style:none;margin:0;padding:0;font:1.0em Verdana,Arial,Helvetica,sans-serif;font-weight:bold} #nav li{list-style:none;margin:0;padding:0} #nav li a,#nav li a:link,#nav li a:visited{display:block; color:#fff; margin:1px 4px; padding:4px 4px; text-decoration:none;} #nav ul li a.current, #nav ul li a.current:visited, #nav ul li a.current:hover{color:#fff; background-color:#999; margin:1px 3px; padding:4px 4px; border-radius:3px 3px; -moz-border-radius:3px 3px 3px 3px; -khtml-border-radius:3px 3px 3px 3px; -webkit-border-radius:3px 3px 3px 3px; border-radius:3px 3px 3px 3px} #nav li a:hover,#nav li a:active{background-color:#222; color:#fff; background-color:#999; margin:1px 4px; padding:4px 4px; border-radius:3px 3px; -moz-border-radius:3px 3px 3px 3px; -khtml-border-radius:3px 3px 3px 3px; -webkit-border-radius:3px 3px 3px 3px; border-radius:3px 3px 3px 3px;text-decoration:none} #nav li li a,#nav li li a:link,#nav li li a:visited{background:transparent;color:#fff;font-size:12px;text-transform:none;float:none;margin:1px 4px; padding:4px 4px; border-radius:3px 3px; -moz-border-radius:3px 3px 3px 3px; -khtml-border-radius:3px 3px 3px 3px; -webkit-border-radius:3px 3px 3px 3px; border-radius:3px 3px 3px 3px;} #nav li li a:hover,#nav li li a:active{background-color:#222; color:#fff; background-color:#999; margin:1px 4px; padding:4px 4px; border-radius:3px 3px; -moz-border-radius:3px 3px 3px 3px; -khtml-border-radius:3px 3px 3px 3px; -webkit-border-radius:3px 3px 3px 3px; border-radius:3px 3px 3px 3px;} #nav li{float:left;padding:0} #nav li ul{z-index:9999; position:absolute; left:-999em; height:auto; width:167px; background: #424242;margin:0px; padding:4px; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px;} #nav li ul a{width:156px;margin-bottom:2px;} #nav li ul ul{margin:-32px 0 0 171px} #nav li:hover ul ul,#nav li:hover ul ul ul,#nav li.sfhover ul ul,#nav li.sfhover ul ul ul{left:-999em} #nav li:hover ul,#nav li li:hover ul,#nav li li li:hover ul,#nav li.sfhover ul,#nav li li.sfhover ul,#nav li li li.sfhover ul{left:auto} #nav li:hover,#nav li.sfhover{position:static}
Jika sudah, cari kode <div id='outer-wrapper'><div id='wrap2'> (Supaya lebih gampang, gunakan fitur pencarian dengan cara tekan tombol F3). Jika sudah ketemu,letakkan kode berikut ini tepat diatas/dibawah kode yang dicari :
<div id='nav-element'> <div class='widget-content'> <div id='nav'> <div id='nav-left'> <ul> <li><a href="/"><img src="http://img409.imageshack.us/img409/2696/depanikon.png" style="padding: 0px;" border="0"></a></li> <li><a href='#'>Page</a><ul> <li><a href='#'>Page</a> <ul> <li><a href='#'>Page</a></li> <li><a href='#'>Page</a></li> </ul> </li> <li><a href='#'>Page</a></li> <li><a href='#'>Page</a></li> </ul></li> <li><a href='http://4-jie.blogspot.com/'>Tips Trik Blogging</a></li> </ul> <script language='javascript'>setPage()</script> </div> <div id='nav-right'> <div id='tsrc-m'> <div id='src-m'> <form action='/search' id='searchform' method='get' name='searchform'> <input class='keyword' id='s-m' name='q' onblur='if (this.value == "") {this.value = "search font..";}' onfocus='if (this.value == "search font..") {this.value = ""}' type='text' value='search font..'/> <input src='http://img140.imageshack.us/img140/1651/cariikon.png' style='border: 0pt none ; vertical-align: top; padding-top:3px' type='image'/> </form> </div> </div> </div> </div> </div> </div>
3. SELESAI, SIMPAN
Sekian tutorial blogspot hari ini, pastinya tinggalkan komentar mu ya :)
dari 4-jie
