Menu Navigasi dengan Efek Mouse Over

Pada posting kali ini taukahbahwa.blogspot.com akan menyajikan posting tentang Menu Navigasi dengan Efek Mouse Over. Semoga dengan artikel Menu Navigasi dengan Efek Mouse Over akan menambah wawasan untuk anda pembaca setia taukahbahwa.blogspot.com

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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj183WLptMHHzaNsrpBpXg1a2BPm3p7dngA3P_gXsvokR1p_hWYUqjFX_9DiYGi96xiFDcBgpTDF22xUwR-fU_FiLGysH9U46tQSev_1kyrFAZnI5KhPUsccZ0qnFgDeq_XQKj6Lyk_mzRa/s400/rss_64x64.png);
}
ul#navigation .facebook a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQdIKgBHmNpRX_xGyx0bS3M3BCKsMxM87B6W3VFYCekIJvRyUBtJBvMabl1QLCinMMn3x_2bquapX3RdKoJoJQ2FYDEAn44bcGF4NrH2-6za6xZSHCKVjo7-nYFO-QUYw8YH2crDGsRwku/s400/facebook_64x64.png);
}
ul#navigation .twitter a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicBpj5yygmU5oykXRZtarMbA_1x5pyM7BdTOCZFmryQOE-ePcDogfGwoOrQFerc4hYYoyb4vTz1LCJ5YN1iRz-BjPN_Z3bgpXZYyb_IOOo6JudAHdF7wptvVILSbdH4chJ-OQ7Wxbl-Dki/s400/twitter_64x64.png);
}
ul#navigation .googlebookmarks a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixFyEmGmRij_OQ7m4_CvT8FqRK9WAfruRNziXinBp2eDi_T4o-AXSDdPWPA2uZbppjkZ6XdE_OUT_6BkWxFmV_o2px5giPfhorIK9EjTihUer3FwPyI27nfjofs27V4awDkChovc0kW40t/s400/google_64x64.png);
}
ul#navigation .e-mail a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVOX5m_FCHa5pEzMmOLkRb8cj2OUis3_1rM0lUwJcm_v2njGjgOrbxt1ekvjquuEuiE8MrXTMkD9i-mhCYjPIFBOXfLhYajaNZGSIpNaqvSAyp9DKGHxslLfya7HuuAQ98PUSSgr5ya1Tc/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

Dapatkan berita terupdate dan unik setiap saat hanya di taukahbahwa.blogspot.com

Homepage|http://taukahbahwa.blogspot.com