Pada tutorial kali ini, saya kan membahas tentang menu navigasi horizontal, langsung saja yak!
1. Masuk ke blogger
2. Rancangan » Edit HTML » Expand Template Widget
3. Cari ]]></b:skin>
4. Letakkan kode tersebut 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;
}
5. Untuk meletakanya di dalam template, cari kode : <div id=”header-wrapper”>
kalau tidak ada, coba pakailah add-ons mozilla FIREBUG! untuk mempermudahnya
6. 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/AVvXsEjzFPVIiXFTJtyT7Ai3SAwJ6gGl2VBzhbM4wYWFFIAZ6jHZJfsuyawnzfNDQM_uEkAO0leH3k_ebw2AWcWe6k89pKAI_3vnTuN2xT6neMeuIbVVHojllFNiwJNgNgB-0UihmQWewnkasis/s200/search-c.png”>
</form>
</div>
</div>
</div>
</div>
7. Simpan & Give Comment
