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.

widget melayang
klikuntuk memperbesar


pertanyaan
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.
Previous
Next Post »

26 Komentar

Write Komentar
Goek Info
AUTHOR
April 9, 2012 at 6:21 AM delete

Wah keren bang, patut untuk dicoba

Reply
avatar
Unknown
AUTHOR
April 9, 2012 at 10:05 AM delete

@Adie Konoe Poetra Dyanaz
nkasih bang silahkan bang, moga bermanfaat aja bang :)

Reply
avatar
ubaybingokil
AUTHOR
April 9, 2012 at 1:05 PM delete

sehhhh...mantap....????


dengan cepatnya menerima rquest sahabat karibb :)

happy blogging

Reply
avatar
Unknown
AUTHOR
April 9, 2012 at 1:32 PM delete

baguzz nih,,,
kapan2 saya coba dech ,,,

wilujeng ngeblog

Reply
avatar
duniasharing
AUTHOR
April 9, 2012 at 1:54 PM delete

mantep bang hehhe...
ntr di coba sama DS makasih bang

salam dna suport dari [DS]

Reply
avatar
Unknown
AUTHOR
April 9, 2012 at 10:54 PM delete

@ubaybingokil
hhehehhe...permintaan mu adalah harapan ku, hahahhhayyy

Reply
avatar
Unknown
AUTHOR
April 9, 2012 at 10:54 PM delete

@Kang Asep
hehehhe... iya bang, moga bisa mempercantik tampilan blog yang sudah bagus, hahhahayyy

Reply
avatar
Unknown
AUTHOR
April 9, 2012 at 10:55 PM delete

@duniasharing
sama2 bang, moga bisa menjadi manfaat :)

Reply
avatar
Farhan Fauzan
AUTHOR
April 10, 2012 at 7:35 AM delete

hahayyy....emang mantap nih tutor melayangnya mas... makin mak nyus aja bang pattah....
makasih bang

Reply
avatar
Unknown
AUTHOR
April 10, 2012 at 12:53 PM delete

@Kang Farhan
mksih bang, hehhehe... moga bisa bermanfaat aja bang :)

Reply
avatar
SR11
AUTHOR
April 10, 2012 at 8:22 PM delete

Bagus nih gan. tapi kayanya kalo saya pakai di blog. bakal nambah berat nih. hehe

Reply
avatar
santoso
AUTHOR
April 10, 2012 at 9:00 PM delete

wah ,, bagus tu gan ..
bisa di coba di blog saya.
trim's atas infonya gan ..

ditunggu kunjungan baliknya gan ..

signature:
santoso
Karismea

Reply
avatar
Unknown
AUTHOR
April 11, 2012 at 2:03 PM delete

@SR11
kayaknya g terlalu dech bang, kalau sebelumnya ukuran gambarnya di perhatikan/ di optimize, ahahhahhayyy

Reply
avatar
Unknown
AUTHOR
April 11, 2012 at 2:03 PM delete

@santoso
sama2 bang moga bermanfaat :)

Reply
avatar
breaKING'z
AUTHOR
April 20, 2012 at 2:59 PM delete

bang, cara buat menu dibawah header gitu gimana ya? masih beginner nih :D tlg dibantu yaa thx

Reply
avatar
April 21, 2012 at 5:12 PM delete

@breaKING'z
tunggu untuk postingan selanjutnya ya bang :)

Reply
avatar
madurock
AUTHOR
May 12, 2012 at 4:04 AM delete

makasi banyak,,, numpang copy ya,,,

Reply
avatar
Unknown
AUTHOR
May 12, 2012 at 9:56 PM delete

@madurock
sma2 bang, moga bermanfaat bang :)

Reply
avatar
IRNP
AUTHOR
June 2, 2012 at 1:36 AM delete

Gak Kelihatan warna Merah atau Biru semuanya warna Biru Laut Mudahhh

Reply
avatar
Unknown
AUTHOR
June 2, 2012 at 12:59 PM delete

@The Winkers
coba di scrool ke bawah sob ntar disana ada tulisn warna merah dan biru yang perlu di sesuaikan degan blog sobat :)

Reply
avatar
Unknown
AUTHOR
June 14, 2012 at 9:00 PM delete

kak keren bgt :)
mampir ya di blog jelek ane :D

http://oo.id-fb.com

Reply
avatar
Unknown
AUTHOR
June 14, 2012 at 9:57 PM delete

@cakmansays
mksih sob, moga bermanfaat

Reply
avatar
June 16, 2012 at 7:35 AM delete

Makasih Gan infonya menfaat banget.....

Reply
avatar

Jadilah pembaca yang bermartabat dengan memberikan komentar yang santun,indah di pandang dan sesuai dengan norma yang baik serta sesuai dengan apa yang ada di postingan.
Kriteria Komentar yang di tampilkan:
1. Bukan Komentar Spam
2. Komentar tidak sesuai dengan isi artikel
3. Menyisipkan Link/url baik itu blog/web pada komentar EmoticonEmoticon