Panduan sukses blogger kali ini akan membahas cara membuat Menu Bar Navigation secara Horizontal. untuk melihat contoh Navigation tersebut anda bisa lihat di situs saya yang ini Kang-Jaya. nah jika anda ada yang tertarik dengan Navigation tersebut, anda bisa mengikuti langkah demi langkah di bawah ini. cara membuatnya sangat lah mudah. anda cukup mengcopy paste kode di bawah ini kemudian meletakkannya pada Edit Template yang anda miliki di blogspot.Berikut ini langkah-langkah cara menambah Menu bar Horizontal Navigation.
- Login ke blogger
- Klik Design
- Kemudian klik Edit HTML
- Setelah itu cari kode ]]></b:skin>
- Kalau sudah ketemu pastekan kode di bawah ini persis di atas kode tersebut .container {width: 860px;background:#000; margin: 0 auto;}
ul#topnav {
margin: 0; padding: 0;
float: left;
width: 860px;
list-style: none;
position: relative;
font-size: 1.2em;
background: url(.gif) repeat-x;
}
ul#topnav li {
float: left;
margin: 0; padding: 0;
border-right: 1px solid #555;
}
ul#topnav li a {
padding: 10px 15px;
display: block;
color: #f0f0f0;
text-decoration: none;
}
ul#topnav li:hover { background: #1376c9}
ul#topnav li span {
float: left;
padding: 15px 0;
position: absolute;
left: 0; top:35px;
display: none;
width: 860px;
background: #1376c9;
color: #fff;
-moz-border-radius-bottomright: 5px;
-khtml-border-radius-bottomright: 5px;
-webkit-border-bottom-right-radius: 5px;
-moz-border-radius-bottomleft: 5px;
-khtml-border-radius-bottomleft: 5px;
-webkit-border-bottom-left-radius: 5px;
}
ul#topnav li:hover span { display: block; }
ul#topnav li span a { display: inline; }
ul#topnav li span a:hover {text-decoration: underline;} - Setelah itu letakkan kode dibawah ini di bawah ]]></b:skin> <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function() {
$("ul#topnav li").hover(function() { //Hover over event on list item
$(this).css({ 'background' : '#1376c9 url(topnav_active.gif) repeat-x'}); //Add background color + image on hovered list item
$(this).find("span").show(); //Show the subnav
} , function() { //on hover out...
$(this).css({ 'background' : 'none'}); //Ditch the background
$(this).find("span").hide(); //Hide the subnav
});
});
</script> - Setelah kode diatas sudah dimasukkan dengan benar langkah berikutnya kita menambah kode di bawah ini untuk memanggil kode yang kita tambahkan tadi. copy paste kode di bawah ini di atas kode <div id='content-wrapper'> <div class='container'>
<ul id='topnav'>
<li><a href=''>Home</a></li>
<li>
<a href='#'>About</a>
<span>
<a href='#'>The Company</a>
<a href='#'>The Team</a>
<a href='#'>Careers</a>
</span>
</li>
<li>
<a href='#'>Portfolio</a>
<span>
<a href='#'>Web Design</a>
<a href='#'>Development</a>
<a href='#'>Identity</a>
<a href='#'>SEO & Internet Marketing</a>
<a href='#'>Print Design</a>
</span>
</li>
<li><a href='#'>Contact</a></li>
</ul>
</div> - Untuk kode # letakkan alamat url tujuan
- Setelah itu simpan template anda
- Sekarang lihat hasilnya.
Silahkan di modif sendiri untuk warna yang anda inginkan. semoga artikel ini bermanfaat dan salam sukses...
Postingan
