Share Button UI Slide Toggle

Share Button UI Slide Toggle - Melanjutkan artikel yang masih berbau blog metro ui style seperti random post efek jquery ui modal, dan hide widget dengan slide toggle agar semakin lengkap rasanya menerapkan konsep UI walaupun cuma mirip - mirip doang kan ga papa ya. Untuk penampakkan seperti dibawah ini :

• DEMO

Sebagai komponen pembentuknya adalah sebagai berikut :

CSS

.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

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

HTML

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

PENTING....!!!!

# Untuk mengatur posisi widget di bawah postingan blog masukkan kode HTML nya sebelum kode dibawah ini :

<div class='post-footer'>

atau

<data:post.body/>

Kemudian copas tepat dibawahnya, karena ada banyak kode seperti itu maka gunakan trial error saja, dan setiap template bisa saja berbeda.

# Atau jika ingin menjadikan sebuah widget silakan masukkan semua kode dalam Add HTML Widget di Layout Dashboard

. 

Like THIS :

Share this article to: Facebook Twitter Google+ Linkedin Technorati Digg

Jika Anda menyukai Artikel di blog ini, Silahkan klik disini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di BDariku