Pasang Navigasi Horizontal ala O-om dot com ~ HMC l Informasi Komputer, Jaringan And Software

Pada postingan kali ini saya akan membahas cara "Pasang Navigasi Horizontal ala O-om dot com".

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,

Langsung saya tutorialnya,

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}

Selanjutnya gunakan ctrl-F untuk mencari kode di bawah ini,

<div id='outer-wrapper'><div id='wrap2'>

Silahkan anda letakan kode di bawah ini tepat dibawah/sesudah kode yang sudah sobat temukan,


<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>

Note : Sesuaikan dengan blog anda,
Tanda # : Silahkan kalian isikan dengan alamat/link sesuai dengan blog anda,
Kata Page : Silahkan kalian tulis nama/judul sesuai dengan alamat/link yang ada pada blog anda,