Membuat Menu Horisontal dengan CSS dan jQuery

Banyak website-website yang terkenal menggunakan jQuery untuk membuat menu horisontalnya agar terkesan lebih elegan. Sekarang kita akan mengaplikasikannya pada blogspot. Tutorial ini diambil dari TNB dan sebagai original demo .
Demo 1    |      Demo 2

Langkah-langkahnya sebagai berikut

Langkah 1
Buatlah sebuah Button menu dengan Photoshop dengan ukuran 80px  x  40px
sebagai contoh adalah image berikut :







Langkah 2
CSS dan jQuery
Buka template blogger pilih Edit HTML
Copy dan paste kode berikut ini sebelum ]]></b:skin>

<style type='text/css'>

.container {
width: 520px;
height: 100px;
position: absolute;
top: 10%; left: 60%;
margin: 0px 0 0 -80px;
overflow: hidden;
}
img {border: none;}
ul#topnav {
margin: 10px 0 20px;
padding: 0;
list-style: none;
font-size: 1.0em;
clear: both;
float: left;
width: 520px;
}
ul#topnav li{
margin: 0;
padding: 0;
overflow: hidden;
float: left;
height:40px;
}
ul#topnav a, ul#topnav span {
padding: 10px 10px;
float: left;
text-decoration: none;
color: #444;
text-transform: capitalize;
clear: both;
height: 20px;
line-height: 20px;
background: #1d1d1d;
}
ul#topnav a { color: #7bc441; }
ul#topnav span {
display: none;
}

ul#topnav.v2 span{
background: url(http://i43.tinypic.com/24cumja.png) repeat-x left top;
}
ul#topnav.v2 a{
color: #555;
background: url(http://i43.tinypic.com/24cumja.png) repeat-x left bottom;
}
</style>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js' type='text/javascript'></script>
<script type='text/javascript'>


$(document).ready(function() {


$("#topnav li").prepend("<span></span>"); //Throws an empty span tag right before the a tag

$("#topnav li").each(function() { //For each list item...
var linkText = $(this).find("a").html(); //Find the text inside of the a tag
$(this).find("span").show().html(linkText); //Add the text in the span tag
});

$("#topnav li").hover(function() { //On hover...
$(this).find("span").stop().animate({
marginTop: "-40" //Find the span tag and move it up 40 pixels
}, 250);
} , function() { //On hover out...
$(this).find("span").stop().animate({
marginTop: "0" //Move the span back to its original state (0px)
}, 250);
});


});
</script>
<style>

Untuk warna merah adalah alamat Url dari image. kamu bisa mengganti dengan yang lain.

Langkah 3
Applikasi Pada menu
Cari kode berikut : <div id='header-wrapper'>....</div>

Kalau sudah ketemu copy dan paste kode berikut setelah kode yang diatas tadi.

<div class='container'>

<ul class='v2' id='topnav'>
<li><a href='#'>Home</a></li>
<li><a href='#'>Services</a></li>
<li><a href='#'>Portfolio</a></li>
<li><a href='#'>Blog</a></li>
<li><a href='#'>About</a></li>
<li><a href='#'>Contact</a></li>
</ul>

</div>

Anda juga bisa melihat sreenshoot dibawah ini


Untuk "container" bisa disetting/ disesuaikan dengan template blogger Anda
.container {
width: 520px;
height: 100px;
position: absolute;
top: 10%; left: 60%;
margin: 0px 0 0 -80px;
overflow: hidden;
}

Finish.

Demo 1    |      Demo 2