Blog Geisha

Banyak tutorial tentang memasang menu navigasi horizontal dengan berbagai bentuk dan berbagai design yang menarik. Bentuk navigasi pada postingan kali ini sama seperti yang dimiliki oleh blog O-om, blog yang membahas tutorial blogger, seo, dll. Pastinya banyak yang ingin memiliki template seperti blog tersebut karena, seo dan menarik. Saya akan berbagi setengan dari template tersebut yaitu navigasinya yang simple dan dinamis, berbeda dengan navigasi ini ditambahi dengan menu dropdown,

• Login ke Blogger anda,
• Silahkan menuju "Template" lalu "Edit HTML",
• Jangan lupa centang "Expand Widgets Template",
• Gunakan ctrl-F untuk mencari kode di bawah ini,

]]></b:skin>

• Selanjutnya letakan kode CSS di bawah ini sebelum/diatas kode yang sudah anda temukan,

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

<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='#'>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://koisine.blogspot.com'>Belajar Blogger</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>