jQuery Sticky Social Sidebar
and other social network icon.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>jQuery Sticky Social Sidebar</title>
<script type="text/javascript" src="jquery-1.10.2.min.js"></script>
<script>
$(document).ready(function(){
$('#right').click(function(){
$('#share').animate({right: "0"}, 500);
$('#right').hide();
$('#left').show();
});
$('#left').click(function(){
$('#share').animate({right: "-295px"}, 500);
$('#left').hide();
$('#right').show();
});
});
</script>
<style>
body{ font-family:Verdana, Geneva, sans-serif; color:#000; font-size:11px; background-color:#000;}
#lessoncup{width:400px; height:auto; border:solid #CCC 0; padding:5px; margin:0 auto; margin-top:200px; font-size:24px; color:#0CF; vertical-align:text-top;}
span{ font-size:10px; color:#FC0; margin:0; padding:0;}
p{ margin:0; padding:0; line-height:17px;}
#share{ position:fixed; right:-295px; width:315px; height:40px; background-color:#CF6; top:0; overflow:hidden; cursor:pointer;}
#sharebar{width:295px; height:40px; background-color:#F90; float:right;}
#icons{ list-style:none; margin:0; padding:0;}
#icons li{ padding:5px; margin-right:2px; float:right;}
#right{ font-weight:bold; font-size:12px; margin-top:12px; margin-left:4px; width:5px; height:40px; float:left; cursor:pointer;}
#left{ font-weight:bold; font-size:12px; margin-top:12px; margin-left:4px; width:5px;height:40px; float:left;display:none;}
</style>
</head>
<body>
<div id="share">
<div id="left">></div>
<div id="right"><</div>
<div id="sharebar">
<ul id="icons">
<li><img src="you.jpg" width="30" height="30"></li>
<li><img src="p.jpg" width="30" height="30"></li>
<li><img src="in.jpg" width="30" height="30"></li>
<li><img src="ot.jpg" width="30" height="30"></li>
<li><a href="https://twitter.com/lessoncup" target="_blank" title="Lessoncup Follow me @ Twitter">
<img src="tw.jpg" width="30" height="30" border="0"></a></li>
<li><a href="http://www.facebook.com/lessoncup" target="_blank" title="Lessoncup Follow me @ Google+">
<img src="g+.jpg" width="30" height="30" border="0"></a></li>
<li><a href="https://plus.google.com/+lessoncup" target="_blank" title="Lessoncup Follow me @ Facebook">
<img src="fb.jpg" width="30" height="30" border="0"></a></li>
</ul>
</div>
</div>
<div id="lessoncup">
<p>Lessoncup Programming Blog<br/>
<span style="color:#F6F;">by Mohammad Khasim</span><br>
<span>{ jQuery, ajax, html5, css3, php, Mysql, javascript }</span></p>
</div>
</body>
</html>
