Share Button UI Slide Toggle

DEMO

Sebagai komponen pembentuknya adalah sebagai berikut :

CSS

Code:

.widgetshare{font:bold 12px/20px Tahoma!important;background:#34495e;color:#fff;padding:10px}
.widgetshare a{font:bold 12px/20px Tahoma!important;text-decoration:none!important;color:#fff!important;transition:all 1s ease;padding:4px 6px}
.widgetshare a:hover{background:#2c3e50}
.fcbok{background: #2980b9;}
.twitt{background:#f1c40f}
.gplus{background:#27ae60}
.pin{background:#c0392b}
.lkdin{background:#16a085}
 i.fa-caret-down{color:#e74c3c}
#buton-share{float:right;
padding:14px 15px;
background:#2c3e50;
color:#fff;
cursor:pointer;
display:inline-block
}
#share-to{
display:none;
text-align:left;
background:#34495e;
color:#fff;
padding:4px 0
}

JS

Code:

<script type="text/javascript">
$(document).ready(function(){
  $("#buton-share").click(function(){
    $("#share-to").slideToggle(1000,function(){
    });
  });
});
</script>

HTML

Code:

<div id="buton-share">
SHARE TO <i class="fa fa-caret-down"></i></div>
<div id="share-to">
<div class="widgetshare">
<a class="fcbok" expr:href=""http://www.facebook.com/sharer.php?u=" + data:post.url" href="" rel="nofollow" target="_blank"><i class="fa fa-facebook"></i> Facebook</a>
<a class="twitt" expr:href=""http://twittter.com/share?url=" + data:post.url" href="" rel="nofollow" target="_blank"><i class="fa fa-twitter"></i> Twitter</a>
<a class="gplus" expr:href=""https://plus.google.com/share?url=" + data:post.url" href="" rel="nofollow" target="_blank"><i class="fa fa-google-plus"></i> Google+</a>
<a class="pin" expr:href=""http://www.pinterest.com/pin/create/button/?media=" + data:post.url" href="" rel="nofollow" target="_blank"><i class="fa fa-pinterest"></i> Pinterest</a>
<a class="lkdin" expr:href=""http://www.linkedin.com/cws/share?url=" + data:post.url" href="" rel="nofollow" target="_blank"><i class="fa fa-linkedin"></i> Linkedin</a>
</div>
</div>

Untuk memasukkan kode HTML silahkan cari kode :

Code:

<div class='post-footer'>

Atau

Code:

<data:post.body/>

Dan copas tepat dibawahnya

 

tombolnya sembunyi, jadi

tombolnya sembunyi, jadi kemungkinan bingung kalau mau share

 

wah setuju nih dengan yang

wah setuju nih dengan yang diatas, mungkin tombol sembunyinya perlu di hilangkan

 

Itu memang sengaja

Itu memang sengaja disembunyikan biar lebih ringkas, dan sedikit ada variasi