Menu Navigasi dengan Efek Mouse Over

Sobat, Menu Navigasi bisa membuat blog sobat terlihat lebih cantik, apalagi dengan menambahkan efek mouse over. Efek Mouse Over kali ini adalah apabila Cursor Mouse berada pada menu tersebut, maka menu navigasi tersebut akan tergeser keluar secara otomatis. Liat screen shootnya :

Ok,, buat bikin menu Navigasi tersebut :

• Login Blogger
• Tambahkan Gadget baru dan Pilih HTML/Javascript
• Masukkan Kode dibawah :

<style>
ul#navigation {
position: fixed;
margin: 0px;
padding: 0px;
top: 0px;
right: 0px;
list-style: none;
z-index:999999;
width:721px;
}
ul#navigation li {
width: 103px;
display:inline;
float:left;
border:0;
}
ul#navigation li a {
display: block;
float:left;
margin-top: -2px;
width: 100px;
height: 25px;
background-color:#eeeeee;
background-repeat:no-repeat;
background-position:50% 10px;
border:1px solid #BDDCEF;
-moz-border-radius:0px 0px 10px 10px;
-webkit-border-bottom-right-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-khtml-border-bottom-right-radius: 10px;
-khtml-border-bottom-left-radius: 10px;
text-decoration:none;
text-align:center;
padding-top:80px;
opacity: 0.96;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
}
ul#navigation li a:hover{
background-color:#CAE3F2;
}
ul#navigation li a span{
letter-spacing:2px;
font-size:11px;
color:#60ACD8;
font-family:trebuchet-ms, arial, tahoma, Sans-Serif;
font-weight:bold;
text-shadow: 0 -1px 1px #fff;
}
ul#navigation .rss a{
background-image: url(http://2.bp.blogspot.com/_znjmv4LDwck/Sj_axehjkOI/AAAAAAAAA9c/nk9FGYOz-X4/s400/rss_64x64.png);
}
ul#navigation .facebook a {
background-image: url(http://4.bp.blogspot.com/_znjmv4LDwck/Sj_bXRRRXzI/AAAAAAAAA98/HIXOZAkEyqY/s400/facebook_64x64.png);
}
ul#navigation .twitter a {
background-image: url(http://1.bp.blogspot.com/_znjmv4LDwck/Sj_cLDgz2cI/AAAAAAAAA-E/Nc04OTHnR48/s400/twitter_64x64.png);
}
ul#navigation .googlebookmarks a {
background-image: url(http://1.bp.blogspot.com/_znjmv4LDwck/Sj_ak6NscZI/AAAAAAAAA9M/rqTYrs6mybg/s400/google_64x64.png);
}
ul#navigation .e-mail a {
background-image: url(http://2.bp.blogspot.com/_znjmv4LDwck/Sj_asJdgxzI/AAAAAAAAA9U/Qjz2LuzIaPE/s400/yahoo_64x64.png);
}
</style>
<script src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.js" type="text/javascript">
</script>
<script type="text/javascript">
$(function() {
var d=300;
$('#navigation a').each(function(){
$(this).stop().animate({
'marginTop':'-80px'
},d+=150);
});
$('#navigation > li').hover(
function () {
$('a',$(this)).stop().animate({
'marginTop':'-2px'
},200);
},
function () {
$('a',$(this)).stop().animate({
'marginTop':'-80px'
},200);
}
);
});
</script>
<ul id="navigation">
<li class="rss"><a href="http://blogger-kerinci.blogspot.com">RSS Feed</a></li>
<li class="facebook"><a href="FACEBOK-PROFILE">Facebook</a></li>
<li class="twitter"><a href="TWITTER-ACCOUNT">Twitter</a></li>
<li class="googlebookmarks"><a href="https://www.google.com/bookmarks/">Google</a></li>
<li class="e-mail"><a href="YAHOO!-ACCOUNT">Yahoo!</a></li>
</ul>

Eidt kode diatas sesuai kebutuhan :). Kemudian simpan..! 

Dan sobat udah berhasil bikin Menu Navigasi dengan efek Mouse Over

Anda sedang membaca artikel tentang Menu Navigasi dengan Efek Mouse Over dan anda bisa menemukan artikel Menu Navigasi dengan Efek Mouse Over ini dengan url http://blogger-kerinci.blogspot.com/2011/12/menu-navigasi-dengan-efek-mouse-over.html,anda boleh menyebar luaskannya atau mengcopy paste-nya jika artikel Menu Navigasi dengan Efek Mouse Over ini sangat bermanfaat bagi teman-teman anda,namun jangan lupa untuk meletakkan link Menu Navigasi dengan Efek Mouse Over sebagai sumbernya.