Buat Menu Melayang dengan Effect Mouseover

TNK Go-Blog on

Selasa, 05 Juni 2012

klikuntuk memperbesar

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

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://theninekazekaghe.blogspot.com/photoshop_online.html">photoshop online</a></li>
<li class="facebook"><a href="http://theninekazekaghe.blogspot.com/search/label/Download%20Mp3">Mp3 India</a></li>
<li class="twitter"><a href="http://theninekazekaghe.blogspot.com/game_online.html">Game Online</a></li>
<li class="googlebookmarks"><a href="http://theninekazekaghe.blogspot.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.

Labels: Tutorial Blog

Thanks for reading Buat Menu Melayang dengan Effect Mouseover. Please share...!