Fixed Sharing Widget On Click Show Button

HTML

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script async='async' defer='defer' src='https://apis.google.com/js/platform.js?publisherid=100595159044200768359'></script>

<div class="shareclick">
     <ul> 
        <li class="main" title="شاركها الأن">
         <span class="fa-stack fa-lg">
  <i class="fa fa-square fa-stack-2x"></i>
  <i class="fa fa-share-alt fa-stack-1x fa-inverse"></i>
</span>
         </li> 
        <li class="main2" title="شاركها الأن">
            <span class="fa-stack fa-lg">
  <i class="fa fa-square fa-stack-2x"></i>
  <i class="fa fa-share-alt fa-stack-1x fa-inverse"></i>
</span>
        </li>
        <li class="fb"><a expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.url' target='_blank' title='Share to Facebook'>
            <span class="fa-stack fa-lg" title='شارك عبر فيسبوك'>
  <i class="fa fa-square fa-stack-2x"></i>
  <i class="fa fa-facebook fa-stack-1x fa-inverse"></i>
</span>
            </a></li> 
        <li class="pr">
        <a href='javascript:print(document)' title='طباعة الصفحة'>
<span class="fa-stack fa-lg" title='طباعة الصفحة'>
  <i class="fa fa-square fa-stack-2x"></i>
  <i class="fa fa-print fa-stack-1x fa-inverse"></i>
</span></a>
        </li> 
        <li class="tw"><a expr:href='"http://twitter.com/share?url=" + data:post.url' style='margin-left:10px' target='_blank' title='Share to Twitter'>
            <span class="fa-stack fa-lg" title='شلرك عبر تويتر'>
  <i class="fa fa-square fa-stack-2x"></i>
  <i class="fa fa-twitter fa-stack-1x fa-inverse"></i>
</span>
            </a></li> 
        <li class="gp"><a expr:href='"https://plus.google.com/share?url=" + data:post.url' style='margin-left:10px' target='_blank' title='Share to Google+'>
            <span class="fa-stack fa-lg" title='شارك عبر جوجل بلس'>
  <i class="fa fa-square fa-stack-2x"></i>
  <i class="fa fa-google-plus fa-stack-1x...

CSS

.shareclick{margin:0;padding:0;text-align:center;position:fixed;bottom:40px;left:10px;z-index:100000}
.shareclick ul{list-style:none;color:#555;text-align:center}
.shareclick ul a{color:#555}
.shareclick ul li{list-style:none;transition:all .3s ease-in-out}
.shareclick ul li.main,.shareclick ul li.main2{position:absolute;top:0;left:0;z-index:2;color:#181818!important;cursor:pointer;font-size:18px}
.shareclick ul li.main2{display:none}
.shareclick ul li a:hover,.shareclick ul li.main:hover,.shareclick ul li.main2:hover{color:#aaa!important;text-decoration:none}
.shareclick ul li.fb,.shareclick ul li.tw,.shareclick ul li.gp,.shareclick ul li.pr{position:absolute;top:0;left:0;opacity:0;z-index:1;transition:all .3s ease-in-out;font-size:18px}
.shareclick ul li.gp2{position:absolute;top:13px;left:0;opacity:0;z-index:1;transition:all .3s ease-in-out}
.shareclick:hover ul li.fb{color:#324b81 !important}
.shareclick:hover ul li.tw{color:#01a7de !important}
.shareclick:hover ul li.gp{color:#ba3227 !important}
.shareclick ul li.fb a{color:#324b81 !important}
.shareclick ul li.tw a{color:#01a7de !important}
.shareclick ul li.gp a{color:#ba3227 !important}

JavaScript

$(function(){$(".shareclick ul li.main").click(function(){$(".shareclick ul li.main").hide();$(".shareclick ul li.main2").show();$(".shareclick:hover ul li.fb").css({left:"55px",opacity:"1"});$(".shareclick:hover ul li.tw").css({left:"100px",opacity:"1"});$(".shareclick:hover ul li.gp").css({left:"155px",opacity:"1"});$(".shareclick:hover ul li.pr").css({left:"220px",opacity:"1"});$(".shareclick:hover ul li.gp2").css({left:"280px",opacity:"1"})});$(".shareclick ul li.main2").click(function(){$(".shareclick ul li.main").show();$(".shareclick ul li.main2").hide();$(".shareclick:hover ul li.fb,.shareclick:hover ul li.tw,.shareclick:hover ul li.gp,.shareclick:hover ul li.pr,.shareclick:hover ul li.gp2").css({left:"0",opacity:"0"})})});