Membuat Menu Navigasi yang Unik dan Lucu | SYLA

Cara Membuat Menu Navigasi Horizontal Multi Level Pada Blog Ala O-Om – postingan kali ini akan sedikit share tentang Tips trik blog kali ini yang akan di bahas merupakan membuat navigasi style drop down. Navigasi ini terinspirasi dari salah satu master blogger indonesia yaitu O-Om. Screen shootnya bisa sobat lihat pada gambar di bawah ini :

blog-ala-o-om.html/navigasi-blog-ala-o-om” rel=”attachment wp-att-197″>naviagsi : Here

Tips Blog kali ini Membuat Menu Navigasi Horizontal Multi Level

OK. dari pada omongan jadi tambah panjang meding ke TKP saja Cara Membuat Menu Navigasi Horizontal Multi Level Pada Blog

• Masuk ke akun blogger, Klik Rancangan -> Edit HTML
• Silahkan letakkan kode di bawah ini tepat di atas kode ]]></b:skin>

/*-- (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}

• Kemudian cari kode <div id=’wrap2′> dan letakkan kode di bawah ini tepat dibawahnya atau diatasnya (tergantung selera sobat)

<div id='nav-element'>
<div class='widget-content'>
<div id='nav'>
<div id='nav-left'>
<ul>
&lt;li&gt;&lt;a href=&quot;/&quot;&gt;&lt;img src=&quot;http://img409.imageshack.us/img409/2696/depanikon.png&quot; style=&quot;padding: 0px;&quot; border=&quot;0&quot;&gt;&lt;/a&gt;&lt;/li&gt;
<li><a href='#'>Tips Trik</a><ul>
<li><a href='http://sandydoank12.blogspot.com/search/label/Tips%20Blog?max-results=500'>Blog</a>
<ul>
<li><a href='http://sandydoank12.blogspot.com/search/label/SEO?max-results=500'>SEO</a></li>
<li><a href='#'>Optimasi</a></li>
</ul>
</li>
<li><a href='#'>Komputer</a></li>
<li><a href='#'>Internet</a></li>
</ul></li>
<li><a href='http://linkmediafire2u.blogspot.com/'>Free Operatiing System</a></li>
<li><a href='http://sandydoank12.blogspot.com/'>Gang Tutorial</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 == &quot;&quot;) {this.value = &quot;search font..&quot;;}' onfocus='if (this.value == &quot;search font..&quot;) {this.value = &quot;&quot;}' 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>

• Terakhir kata Selesai dan silahkan Klik Save Template

OK. Sampai disini dulu Cara Membuat Menu Navigasi Horizontal Multi Level Pada Blog, semoga bermanfaat dan selamat mencoba
Terimakasih telah berkunjung, Tutorial Blog kali ini semoga Bermanfa’at.

Sumber : http://gokbm.org/cara-membuat-menu-navigasi-horizontal-multi-level-pada-blog-ala-o-om.html