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

Bagikan ke :

Facebook Google+ Twitter Digg Technorati Reddit