Cara memasang widget floating social bookmark efek mouseover

Di liburan ini saya akan menerbitkan post tentang "Cara memasang widget social bookmark efek mouseover". Di widget ini letaknya di atas dan bila mouse di arahkan ke widget tersebut akan keluar widgetnya itulah yang dimaksud dengan efek mouseover. Kita telah banyak menjumpai widget ini di berbagai situs. Namun designnya yang berbeda - beda. Jika ingin tau lebih jelas lagi silahkan lihat demonya Disini. Sobat ingin tau cara memasang widget ini? Langsung saja kita ke TeeKaaPee:

1. Login pada blog sobat
2. Tata Letak
3. Tambah Gadget
4. Html / Javascript
5. Copy kode di bawah ini dan pasang di blog sobat

<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: 90px;
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/AVvXsEjOIdgRWh1JQRwPk6mtXTO0Hs00XqbqiVx3ia47mnD-Yeuow2pV0JOEPbkXqvASd6TkLqVBz94ugmWgFnLDFeoEOoKRZy3kKbXpx673PFwEmkc9PZAnRwP3Z_ucxhoXQmpD9StAwtCnGNNd/s400/rss_64x64.png);
}
ul#navigation .facebook a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMgdf6OoIMaCR9DeJBBA4p7zfgqCbFQRF_6obahcx-RCgOi7ewr4R5sHElgrR1Px1cbPZS0mxnTGX9rLQobZBmALnYd64HqgfkZs2H20mK6JJ2V4BMjQ-LbkpjPZ9xHVRF7TBwUR_LoQCg/s400/facebook_64x64.png);
}
ul#navigation .twitter a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjobc6-v4CrbGAy4bzL_ex1PZrPoNpoS3u4X4QBMnZjjqGu9EVgU2Iv6DoCLhJgzxacyImeffSjyB4L-8qvALf5wNvzHHOAU4uY89-jZ2bSHiO8hkWfgxJY4GW5AAmjTF170GTLzZQE5dzG/s400/twitter_64x64.png);
}
ul#navigation .googlebookmarks a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZqgK1n74a6KOYUSiSxDpQl8EXPCxuLBfHJe1BtwW-Rou5EfT-RNlWaYenfUg_0Dt97maV4M1viwdiS9qflKehvKHikJBcfyb1VqM81eKq-5dIMeDt_iiUndOSuyYj-29TqL4zSGpoxUIm/s400/google_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>

<br />
<ul id="navigation">
<li class="rss"><a href="http://Blog Kamu.blogspot.com/atom.xml">RSS Feed</a></li>
<li class="facebook"><a href="http://Ganti Dengan Url Akun Facebook Kamu">Facebook</a></li>
<li class="twitter"><a href="http://Ganti Dengan Url Akun Twitter Kamu">Twitter</a></li>
<li class="googlebookmarks"><a href="https://www.google.com/bookmarks/">Google</a></li>
</ul>

6. Simpan widget dengan tanpa judul

Selamat Mencoba!!!