membuat menu navigasi blog

Tombol menu navigasi sangat penting untuk sebuah blog,karena dengan tombol menu navigasi selain untuk mempercantik blog kita,ini juga untuk mempermudah para pengunjung memilih menu yang ada di blog kita.Pada postingan kali ini saya akan coba menampilkan 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