Cara Membuat Widget Social Bookmark Melayang Dengan Efek Mouseover

Cara membuat widget social bookmark melayang dengan efek mouseover. Maksud mouseover adalah sama seperti navbar yang "turun" begitu di kursor. Jika membahas masalah ini, kita akan bertemu lagi dengan social bookmark. Tetapi, menurut saya pribadi, widget ini sangat menarik karena tampilannya yang membuat para pembaca tercengang ketika melihat widget saya, dan sobat mungkin perlu mencoba widget yang satu ini. Nah, untuk contohnya, bisa dilihat di bawah sini

Langsung saja ikutin prosedur di bawah ini :
1. Login ke blogger
2. Masuk ke Rancangan >> Add Gadget >> HTML Java Script
3. Paste-kan kode di bawah ini pada gadget

<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: 0px;
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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1TDsfYqf0DDmsmyK1-IS3jImagr5JEjEZxuzsRKKbMeDB0_Mpr64g5wJQcToYPPRSyiMGhcZu5n0XEvUmMbhyphenhyphen7W23Iq9C3c-BF8KqWJLQHJ_Zp3FGyWBnFwH7M2QE0lCocscJx0i-F1Y/s1600/64x64.png);
}
ul#navigation .facebook a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHWBqWe-zh23w9Yx44Ym6fIlDpe81s520jcJsJX9kzxUnHSUCGUTpuirlm0fTyCbFmwgzuQ4JCJlfGYl6JudvTjeEofII7jhqF6w3yyquEqm2TdyXKLctTbZ0DI_LXL6BV1W_3m0tQ19o/s1600/64x64.png);
}
ul#navigation .twitter a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnF91GXrNxJvgqBkTwlXNnQx2-7_lgk0et7pkxzVmBvTtmjK3Yq6V_BOOO53YlHvyXpElV4qnyYnuXUBTnL_LKko_l8agFbuWiwGMeeZjRrNO2L_ZBgroXyzsW4YlWXiJQZJwgvOt2LM8/s1600/64x64.png);
}
ul#navigation .googlebookmarks a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYirRv-0jOlIi4ag96hZOVndBfeGbUMI8SukU8LnMVrVYEw2zjKoEh6qxYfkEIZPmgNvKF-T4EPNGIjuIi6oDWgt3RQVdMBkeeUBGYI-5eo7zqVP4R-bV10cDR0AoITczMrEWD-He1kkE/s1600/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>

<ul id="navigation">
<li class="rss"><a href="http://ALAMAT BLOG SOBAT/atom.xml">RSS Feed</a></li>
<li class="facebook"><a href="ALAMAT FACEBOOK SOBAT">Facebook</a></li>
<li class="twitter"><a href="ALAMAT TWITTER SOBAT">Twitter</a></li>
<li class="googlebookmarks"><a href="https://www.google.com/bookmarks/">Google</a></li>
</ul>

4. Jika sudah Oke, tinggal save

Nb : Untuk huruf yang bercetak biru harap ganti dengan kepunyaan sobat

• Alamat Facebook : Profil sobat, contoh : http://www.facebook.com/profile.php?id=100000130062770
• Alamat Twitter : Profil sobat juga, contoh : https://twitter.com/#!/gunkde_hoppus 

Untuk yang lainnya, ganti sesuai keinginan

Selamat Mencoba

Tweet