Buat Menu Melayang dengan Effect Mouseover

Salam sejahtera saya sampaikan pada sobat semua semoga dalam kondisi sehat dan luarbiasa. Di suasana yang cerah ini saya bermaksut untuk membahas sedikit mengenai trik blogger yaitu cara membuat menu melayang dengan effect mouseover. Untuk menanggapi pertanyaan dari sobat hebat Pattah's Blog yang menanyakan hal tersebut.

klikuntuk memperbesar

pertanyaan dari sobat Ryan Gani

Sebenarnya cara ini saya dapat dari sobat sesama blogger, dimana yang dia bahas adalah widget sosial bookmark dengan sentuhan mouseover. Lantas sendikit saya modifikasi untuk mendapatkan hasil yang saya inginkan. Uke untuk mempersingkat waktu langsung kita menuju tutorial.

1. Login ke Blogger
2. Masuk ke menu rancangan => Tambah gadget => pilih html javascript
3. Copy paste kode di bawah ini => lalu save

<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://i1188.photobucket.com/albums/z403/pattah121/photoshop-1.png);
}
ul#navigation .facebook a {
background-image: url(http://i1188.photobucket.com/albums/z403/pattah121/musik-1.png);
}
ul#navigation .twitter a {
background-image: url(http://i1188.photobucket.com/albums/z403/pattah121/game-1.png);
}
ul#navigation .googlebookmarks a {
background-image: url(http://i1188.photobucket.com/albums/z403/pattah121/buku.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://pattah.16mb.com/photoshop_online.html">photoshop online</a></li>
<li class="facebook"><a href="http://pattah12.blogspot.com/search/label/Download%20Mp3">Mp3 India</a></li>
<li class="twitter"><a href="http://pattah.16mb.com/game_online.html">Game Online</a></li>
<li class="googlebookmarks"><a href="http://pattah.16mb.com/tv_online.html">TV Online</a></li>
</ul>

NB:

- Ganti tulisan yang berwarna biru dengan link gambar yang sebelumnya gambar tersebut sudah di upload di hosting atau media penyimpan online macam photobucket atau yang lain.

- Ganti tulisan yang berwarna merah dengan link target atau link blog sobat

Cukup sekian postingan saya mengenai Buat Menu Melayang dengan Effect Mouseover , Semoga bisa bermanfaat.

• Twitter
• Facebook
• Google
• Tumblr
• Pinterest