Home » tricks » Widget » Floating Social Bookmarks with Mouseover

Floating Social Bookmarks with Mouseover

Now, I will post about Floating Social Bookmarks with Mouseover. You have seen many kinds of Social Bookmarks style. There is floating, under the post, or maybe on sidebar. So, we will add the floating Social Bookmarks. Just see the DEMO. Interested? Follow the step below, to add into your blog.

1. Log in to your blogger account
2. Go to Design --> Page Elements --> Add Gadget
3. Choose "HTML/Java Script"

<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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBg1gcOlCn9UzY0R2iYwC10URdvnf2Knn6ArjAFZmN1agFTowGRmLXWf7A3i8EEEc6HVVaAgXdCO9s3JjQbzPR6MGJXSnXaQ7BpAW1R4SpUdiiG8am2-PP1F0T24vyg4TbqTIJ7UZ_BgYq/s400/rss_64x64.png);
}
ul#navigation .facebook a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRiWtuHcYvAKI5tKxkaC_YG-RdwuEdCU0gxi04GMQRkTcF_Ku5px6GPjLJJBX35cetkAGP_YOHCDCB9IcIYicmwtKqQbQ74XV235z4dK25V1NZcUJ5TcowJtASoHsca114VXcG4OZn3bjy/s400/facebook_64x64.png);
}
ul#navigation .twitter a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOKFJrd56tb0SZK0Cbm3Ti3iVZCNbzftGXM7ePCuL2pXkcoL64-k_eG_FRV0abk0Xi1h5RUJg3sZM2p-DqNpZhmzROHRoDJPY7HFqh7h__4FtEVObALJbcGEyKlzdpwixcGdZ3HT4O332r/s400/twitter_64x64.png);
}
ul#navigation .googlebookmarks a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOVyMi8bPlAIbvypDWJM_0GJyN-qXoodq5Xs43r72OqEt0EMvk8yI8tYLzSDDHFwuYBTm7sZtCZCch5GAPNlQ1QN8xqpE15mvdkVJtP9UmMlZgN2oAIlBtSm7nNW8eZFSV5KsoqA_YmPN1/s400/google_64x64.png);
}
ul#navigation .e-mail a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3quePXpqVnNOv_BEUcwQjQKKVLyEh9jJRvu8ve7f9KmLlg6_Rl8Y9b5kdB7euyxF3812n8-98Qs83kycdoVAmmAV4XuWUyg3MXKElmhsF1KBZnPeDvS9lURaBFONxaDZOHJNL29qJlGWs/s400/yahoo_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 rel="nofollow" href="http://YOUR-BLOG.blogspot.com/atom.xml">RSS Feed</a></li>
<li class="facebook"><a rel="nofollow" href="FACEBOK-PROFILE">Facebook</a></li>
<li class="twitter"><a rel="nofollow" href="TWITTER-ACCOUNT">Twitter</a></li>
<li class="googlebookmarks"><a rel="nofollow" href="https://www.google.com/bookmarks/">Google</a></li>
<li class="e-mail"><a rel="nofollow" href="YAHOO!-ACCOUNT">Yahoo!</a></li>
</ul>

4. Then, add the code below
5. Click SAVE TEMPLATE