Cara Membuat Menu Navigasi Horisontal Multi Level Pada Blog

Alimadura.com Cara Membuat Menu Navigasi Horisontal Multi Level Pada Blog - kali ini mau menjawab pertanyaan salah satu sobat gang tutorial yang request kemaren malam via Chat Facebook Cara Membuat Menu Navigasi Blog. Tips Trik ini beda dengan navigasi blog yang saya pake pada template blog ini. Beda? Yup. Tips trik ini yang akan di bahas merupakan membuat navigasi style drop down. Lagi-lagi blog template blog O-Om Screen shootnya bisa sobat lihat pada gambar di bawah ini :

Demo live : Here
OK. dari pada omongan jadi tambah panjang meding ke TKP saja Cara Membuat Menu Navigasi Horisontal 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>