Share Button Flat UI With jQuery $(.slideToggle)

Membuat Share Button Flat UI With jQuery $(.slideToggle) - Share tentang flat ui lagi nih hehe :D kali ini yang saya share adalah Share Button. Sama seperti share button yang sebelumnya, namun terdapat perubahan yaitu tombol share nya akan disembunyikan dulu menggunakan display:none; lalu akan dimunculkan menggunakan $(.slideToggle)

Sebelum melakukan langkah langkah pemasangannya, pastikan dalam template anda terdapat jQuery versi berapapun. < br />

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'></script>

Juga install dulu FontAwesomenya

<link href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css' rel='stylesheet'/>

Taruh kode CSS berikut diatas kode </style>

 .widgetshare{font:bold 12px/20px Oswald!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
}

 <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="&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url" href="" rel="nofollow" target="_blank"><i class="fa fa-facebook"></i> Facebook</a>
<a class="twitt" expr:href="&quot;http://twittter.com/share?url=&quot; + data:post.url" href="" rel="nofollow" target="_blank"><i class="fa fa-twitter"></i> Twitter</a>
<a class="gplus" expr:href="&quot;https://plus.google.com/share?url=&quot; + data:post.url" href="" rel="nofollow" target="_blank"><i class="fa fa-google-plus"></i> Google+</a>
<a class="pin" expr:href="&quot;http://www.pinterest.com/pin/create/button/?media=&quot; + data:post.url" href="" rel="nofollow" target="_blank"><i class="fa fa-pinterest"></i> Pinterest</a>
<a class="lkdin" expr:href="&quot;http://www.linkedin.com/cws/share?url=&quot; + data:post.url" href="" rel="nofollow" target="_blank"><i class="fa fa-linkedin"></i> Linkedin</a>
</div>
</div>

Dan yang terakhir adalah penambahan javascriptnya.

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

DEMO

Tweet