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

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.

4/15/14 Share Button UI Slide Toggle | SAMSURY SITES

samsury-sites.blogspot.com/2014/04/share-button-ui-slide-toggle.html 3/3

.

Older Post

Sign out

Notify me

Enter your comment...

Comment as: Virlyz Nyzam (Google)

Publish

Preview

BY SAMSURY SITES | TEMPLATEISM