Share Button UI Efek Slide Toggle

1. 4/15/14 Share Button UI Slide Toggle | SAMSURY SITES
samsury-sites.blogspot.com/2014/04/share-button-ui-slide-toggle.html 1/3
SAMSURY SITES Official Tutorial
    
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;
 HOME  JQUERY UI  METRO UI STYLE  Share Button UI Slide Toggle


2. 4/15/14 Share Button UI Slide Toggle | SAMSURY SITES
samsury-sites.blogspot.com/2014/04/share-button-ui-slide-toggle.html 2/3
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 memasukkan kode HTML silahkan cari kode :
<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.

3. 4/15/14 Share Button UI Slide Toggle | SAMSURY SITES
samsury-sites.blogspot.com/2014/04/share-button-ui-slide-toggle.html 3/3
.
OlderPost
Sign out
Notify me
Enter your comment...
Comment as: Virlyz Nyzam (Google)
Publish Preview
BY SAMSURY SITES | TEMPLATEISM
