fixed sosial share

Ok sobat berikut ini socips.com akan membagikan tombol fixed sosial share dengan efek show hide di blogspot. Nah tombol sosial ini sudah pernah dibagikan oleh Adhy Suryadi pemilik blog kompi ajaib. Sebelum anda memasang ini di blog, pastikan Anda sudah memasang jquery library dan  css font awesome serta js untuk google+ pada template blog Anda.

Tombol share ke berbagai sosial media akan muncul ketika ikon sharenya di klik dengan efek slide yang terlihat halus. Fixed sharing button ini menggunakan Font Awesome untuk membuat ikon social media sehingga menjadi lebih mudah daripada menggunakan image dengan css sprite. Untuk lebih jelasnya lihat demonya dibawah ini.


CSS Fixed Sharing Button

.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}

Script Fixed Sharing Button

<script async='async' defer='defer' src='https://apis.google.com/js/platform.js?publisherid=100595159044200768359'></script>
<script type="text/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"})})});
<script>

HTML Fixed Sharing Button

<div class="shareclick">
     <ul>
        <li class="main" title="Share This">
         <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="Share This">
            <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='Share to Facebook'>
  <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='Print This Blog'>
<span class="fa-stack fa-lg" title='Print This Blog'>
  <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='Share to Twitter'>
  <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='Share to Google+'>
  <i class="fa fa-square fa-stack-2x"></i>
  <i class="fa fa-google-plus fa-stack-1x fa-inverse"></i>
</span>
            </a></li>
         <li class="gp2"><span class='g-plusone' data-count='true' data-size='medium' expr:data-href='data:post.url'>
</span>  </li>
    </ul>
</div>

LIVE DEMO Fixed Sharing Button



Tombol-tombol ini tidak menggunakan js untuk tombol-tombol sharing social seperti facebook, twitter, dan google plus melainkan menggunakan url sharing dari social media tersebut. Hanya tombol +1 yang disertakan di dalamnya. Sekian dan selamat mencoba.
0 Komentar untuk "Membuat Show Hide Sharing Button di Blog"