Apa Anda Mau Tahu Cara Membuat Menu Navigasi Horisontal di Blog ~ Ikan-Rocks

Selasa, 27 Desember 2011

Apa Anda Mau Tahu Cara Membuat Menu Navigasi Horisontal di Blog

13.16 Ikan-Rocks No comments

Tutorial Cara Membuat Menu Navigasi Horisontal di Blog

Menu Navigasi pada blog merupakan elemen yang perlu diperhatikan di dalam sebuah blog yang mementingkan penampilan dan style untuk setiap detilnya. Ada bermacam-macam bentuk menu navigasi di dalam sebuah blog itu, ada menu navigasi horizontal, menu navigasi vertikal atau yang lainya. Umumnya, para blogger menggunakan fungsi menu navigasi horizontal untuk dipasang di blognya. Pada artikel tutorial kali ini saya akan membahas tentang petunjuk pemasangan menu navigasi ini pada template blog blogger maupun wordpress.org.

Pada tutorial kali ini, saya kan membahas tentang menu navigasi horizontal, langsung saja yak!

Style Nav : O-OM template

Untuk Blogger.com

Login di Blogger
Rancangan » Edit HTML » Expand Template Widget
Cari ]]></b:skin>
Letakan kode CSS berikut, diatasnya

#nav {
background:url(“http://3.bp.blogspot.com/_C6KkooKXCEw/TICgsEwQ6VI/AAAAAAAAGzc/uKEKlKRK6mY/s1600/topmenu-c.png”) no-repeat scroll 0 0 #FFFFFF;
clear:both;
height:32px;
margin:0 auto;
padding:4px 0 0;
}
#nav-left {
display:inline;
float:left;
padding-left:6px;
padding-top:1px;
width:660px;
}
#nav-right {
display:inline;
float:right;
padding-right:15px;
padding-top:3px;
width:200px;
}
#nav ul {
font:bold 1em Verdana,Arial,Helvetica,sans-serif;
margin:0;
overflow:hidden;
padding-left:0;
position:relative;
}
#nav ul li {
float:left;
list-style:none outside none;
}
#nav ul li a, #nav ul li a:visited {
color:#FFFFFF;
display:block;
margin:1px 4px;
padding:4px;
text-decoration:none;
}
#nav ul li a:hover {
-moz-border-radius:3px 3px 3px 3px;
background-color:#999999;
color:#FFFFFF;
margin:1px 4px;
padding:4px;
}
#nav ul li a.current, #nav ul li a.current:visited, #nav ul li a.current:hover {
-moz-border-radius:3px 3px 3px 3px;
background-color:#999999;
color:#FFFFFF;
margin:1px 3px;
padding:4px;
}

Untuk meletakanya di dalam template, cari kode : <div id=”header-wrapper”>
kalau tidak ada, coba pakailah add-ons mozilla FIREBUG! untuk mempermudahnya
Setelah itu, pastekan kode HTML berikut di bawah kode tadi. Ini kode HTML-nya :

<div id=”nav”>
<div id=”nav-left”>
<ul>
<li><a href=”#“><img border=”0″ style=”padding: 0px;” src=”http://2.bp.blogspot.com/_C6KkooKXCEw/TIKt4PnR_DI/AAAAAAAAG1M/fYAOYZ43bys/s200/icon-home.png”></a></li>
<li><a href=”#“>About Me</a></li>
<li><a href=”#“>Archives</a></li>
<li><a href=”#“>Contact</a></li>
<li><a href=”#“>Help Me</a></li>
<li><a href=”#“>Guest Book</a></li>
<li><a href=”#“>Testimonials</a></li>
<li><a href=”#“>Top Post</a></li>
</ul>
<script language=”javascript”>setPage()</script>
</div>
<div id=”nav-right”>
<div id=”tsrc-m”>
<div id=”src-m”>
<form name=”searchform” method=”get” id=”searchform” action=”/search”>
<input type=”text” value=”Cari artikel..” onfocus=”if (this.value == "Cari artikel..") {this.value = ""}” onblur=”if (this.value == "") {this.value = "Cari artikel..";}” name=”q” id=”s-m” class=”keyword”>
<input type=”image” style=”border: 0pt none; vertical-align: top; padding-top: 3px;” src=”https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiG0XFyEeE9tQhCm2n3tQK0jzHsweh35IuvNI4DBfViUfeNhBsZHU-8QhzlP4Uw0JLRj1yJVQ95zaQzGbCZOBdlnPW1WdHT74wm_iydGPaggduv4BkbsXkQIqTHn0Ft3HQEZcz5lboEyA/s200/search-c.png”>
</form>
</div>
</div>
</div>
</div>