Buat Menu Melayang (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.

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. 

Oke untuk mempersingkat waktu langsung kita menuju tutorial langsung ajah ke TKP :.

1. Login ke Blogger
2. Masuk ke menu rancangan  

3. Kemudian Tambah gadget

4. pilih html javascript
5. Copy paste kode di bawah ini

<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 .yahoo a{
background-image: url(http://i1072.photobucket.com/albums/w370/agus9111/icontexto-inside-yahoo.png);
}
ul#navigation .facebook a {
background-image: url(http://i1072.photobucket.com/albums/w370/agus9111/facebook-buttons-59-68-1.png);
}
ul#navigation .twitter a {
background-image: url(http://i1072.photobucket.com/albums/w370/agus9111/inside-twitter-128.png);
}
ul#navigation .googlebookmarks a {
background-image: url(http://i1072.photobucket.com/albums/w370/agus9111/icontexto-inside-google.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="yahoo"><a href="http://profile.yahoo.com/y/activate/</a></li>
<li class="facebook"><a href="https://www.facebook.com/Randi.Ceria?ref=tn_tnmn</a></li>
<li class="twitter"><a href="https://twitter.com/#!/randi_</a></li>
<li class="googlebookmarks"><a href="https://plus.google.com/103322892122386912813/posts</a></li>
</ul>

6. Laku Klik Simpan

NB:

- Ganti tulisan yang berwarna hijau 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

Semoga Bermanfaat :)

Sumber : http://pattah12.blogspot.com/2012/04/buat-menu-melayang-effect-mouseover.html#axzz1ufutcoMh

Baca Juga di Bawah Ini :

ATTENTION PLEACE :
Buat semua pengunjung yang ingin copy-paste diperbolehkan asal mencantumkan..
URL:
http://creatoragus.blogspot.com/

Hal ini untuk menambah rasa pertemanan agar menjadi lebih akrab dan untuk menjaga solidaritas dari para blogger sejati yang ada di indonesia..
Dan apabila terjadi kerusakan pada postingan kami misalnya kode yang salah,Gambar yang tidak valid dll.Sobat dapat menghubungi kami disini
Salam:Run_D Creators