Trik Komputer: Make Expand (Toggle) Social Links use jQuery

Hanya mengupdate/menambah variasi membuat links berbagi. Tepatnya mungkin tutorial ini akan seperti make social network with css. Walaupun trend sekarang adalah penggunaan embed font icon untuk menampilkan lambang-lambang web jejaring! Koben akan update dua sekaligus tutorial CSS3 social cards, yaitu dengan full memakai CSS dan jQuery snippet b-)
Artikel membuat CSS3 Social Cards by MusikAnimal, sobat dapat lihat langsung ke halaman developer.mozilla.org/en-US/demos/detail/css3-social-cards
Singkat saja...

Sediakan terlebih dahulu image web jejaring sosial dengan resolusi (60 x 60 pixels) Gambar akan meliputi 2 macam, yakni gambar dengan background transparan dan gambar dengan background berwarna! Mengapa demikian, karena akan ada efek flip dari tut's ini :D

Demo: bit.ly/1ikXwn5

input#phone_booth {
visibility:hidden;
position:absolute;
left:-1000px;
}
input#phone_booth:checked + #areal {
left:10px;
box-shadow:0 0 1em #FFF;
background:#fff;
}
input#phone_booth:checked + #areal img#phone {
-webkit-transform:rotate(120deg);
-moz-transform:rotate(120deg);
-ms-transform:rotate(120deg);
-o-transform:rotate(120deg);
transform:rotate(120deg);
}
input#phone_booth:checked + #areal > div, input#phone_booth:checked + #areal > a {
opacity:1;
-webkit-transform:scale(1);
-moz-transform:scale(1);
-ms-transform:scale(1);
-o-transform:scale(1);
transform:scale(1);
}
#areal {
position:fixed;
bottom:10px;
z-index:100;
left:-525px;
padding:0;
padding-right:60px;
background:#dfdfdf;
border-radius:5px 25px 25px 5px;
-webkit-transition:all 1s;
-moz-transition:all 1s;
-ms-transition:all 1s;
-o-transition:all 1s;
transition:all 1s;
}
#areal:after {
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
#areal label {
cursor: pointer;
}
#areal label img#phone {
width:48px;
height:48px;
position:absolute;
top:5px;
right:5px;
-webkit-transform:rotate(0deg);
-moz-transform:rotate(0deg);
-ms-transform:rotate(0deg);
-o-transform:rotate(0deg);
transform:rotate(0deg);
-webkit-transition:all 1s;
-moz-transition:all 1s;
-ms-transition:all 1s;
-o-transition:all 1s;
transition:all 1s;
}
#areal > div, #areal > a {
-webkit-transition:all 0.5s;
-moz-transition:all 0.5s;
-ms-transition:all 0.5s;
-o-transition:all 0.5s;
transition:all 0.5s;
opacity:0;
-webkit-transform:scale(0);
-moz-transform:scale(0);
-ms-transform:scale(0);
-o-transform:scale(0);
transform:scale(0);
}
#areal a.card-container, #areal a.card-container img {
width:48px;
height:48px;
}
#areal a.card-container {
position:relative;
z-index:1;
-webkit-perspective:1000;
-moz-perspective:1000;
-ms-perspective:1000;
-o-perspective:1000;
perspective:1000;
float:left;
margin:5px;
}
#areal a.card-container div.card {
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transition:all 0.2s linear;
-moz-transition:all 0.2s linear;
-ms-transition:all 0.2s linear;
-o-transition:all 0.2s linear;
transition:all 0.2s linear;
width:100%;
height:100%;
cursor: pointer;
}
#areal a.card-container div.card div.face {
position:absolute;
-webkit-backface-visibility:hidden;
-moz-backface-visibility:hidden;
-ms-backface-visibility:hidden;
-o-backface-visibility:hidden;
backface-visibility:hidden;
}
#areal a.card-container div.card div.back {
display:block;
-webkit-transform:rotateY(180deg);
-moz-transform:rotateY(180deg);
-ms-transform:rotateY(180deg);
-o-transform:rotateY(180deg);
transform:rotateY(180deg);
}
#areal a.card-container:hover div.card {
-webkit-transform:rotateY(180deg);
-moz-transform:rotateY(180deg);
-ms-transform:rotateY(180deg);
-o-transform:rotateY(180deg);
transform:rotateY(180deg);
}

Sekarang versi snippet jQuery script. Tutorial ini saya comot source kodenya dari demo template blogger premium :D

#sharebbn {
background: #333;
color: #ABABAB;
cursor: pointer;
float: left;
font-size: 25px;
font-weight: normal;
line-height: 38px;
padding: 0 20px;
text-transform: uppercase;
}
#sharebbn:before {
content: "\271A";
}
.expand:before {
content: "\2716" !important;
color: #FF7800;
}
#socials {
display: block;
float: left;
text-align: right;
background: #333;
}
#socials ul {
display: block;
height: 38px;
margin: 0;
padding:0;
}
#socials li {
display: inline-block;
float: left;
width: 32px;
height: 32px;
opacity: 0.2;
margin-top: 2.5px;
-webkit-transition: all 0.4s ease;
transition: all 0.4s ease;
}
#socials li:hover {
opacity: 1;
background-position: 0 -32px
}
#socials li a {
display: inline-block;
width: 32px;
height: 32px;
}
#socials li a span {display:none;}
#socials li.facebook{ background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFwFOhke2OCsUPfGD75kgz2k4ohr9UugSif8CByaF9i4Vt7oxCctojENtcuO7ahK2qMjpFK-1Jq5ORTdpo5yVJWsSKdNRiiMHis2CX4my-AlHLz3royk40lOXw02rpHlDbZk9F8_P-UBDt/s64/facebook.png); }
#socials li.twitter{ background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKVvij5AoWWAckyK9Hy0QyvXMXRNtGqMlwy4hzAIiBfmvxO9FiXHkLXDuBKH-PeDhytykmjYz2dqQEEwndA-UL-eNnWlaGoKFCxhd4aWwpb4okK00TVQg7np3Gwh4Mu01S1hnpE7537ldq/s64/twitter.png); }
#socials li.linkedin{ background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDCPJ_LCGREr8vxDOwNuaBqyhhe9CMhIS9RjxgOPkydQeOy2ZDCLzrGH8iHV6iW2Xn5O8qQqUvECvYHreXEBFxZomXpCMidcwGYY_Gr4jCQ66aUFXtSwfKjR2Pzuim6gvyUynbW3J6uN6x/s64/linkedin.png); }
#socials li.tumblr{ background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheYj1bcS0dWWErQSE5oo7vNSLs0aSXqvjCp-Fl-S6hFqxmlw7RTrzjK30mbGMtXoPtEc9q8DLnVX3FbzjpZ4mJE8eb9SX4WSdW-9LzRUVqJFp1QeeaN0odWFGl2rS7qSScIunYnuwEeyCz/s64/tumblr.png); }
#socials li.vimeo{ background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsVt-yzexqKFrGZC-7wmDy0RSBvUUj64F2LGf74Sf7AJaUW9aOi2BkR2QPYo6Fk6iTUASqdbA3DDDZZaQB_fZXhs22RVZXU3AGNHF0L1mX7iiFEUU6xc4EIFLtNXyLmRKAE1u0R4JvMm9H/s64/vimeo.png); }
#socials li.skype{ background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcHuYjbY2okSLgPjbjret6CCsrNfmGPtU0xxft6RJvQug8GO8oj48O2XGI_3rxxolyrBpv70dV7Dcz6SMxwJ2oO20ihByyBCrm9zz3JIXruMwJiEMIlkYCnfxU0CH4I4Zch2XaMuhJSc-8/s64/skype.png); }
#socials li.youtube{ background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEja_iMlncLBY15-1diJJifL6CBNJokco9ESsUCCfl0EQSliWf8HERlHcxw4i5jpuZNhZsOZYhW7h0FFbpjmW4CRqq7CWGCe1dnnwr2oaBqRA5i0LK7HkCE7yB_DGtl82vR-gSF4tv3NcKxo/s64/youtube.png); }
#socials li.googleplus{ background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoZBQITvBhbCvqv3n6Cpzi134QPNxmGHYaqd-qGWXLFYU0C2zb0f-motIWlEe7rr4tsiVXHCNcPGaWbjpVSoCYfm_134B1ddCnyciAR8h5Wkote_euGsXn7L3wb7mcVMHXrbJxhuywY_5I/s64/googleplus.png); }
#socials li.deviantart{ background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhinOSMot8n9DWwNtG8rWRyc-ak7OzHwZnNEFoy67QAnrukm6vrd9RKGm0UXIbhswsdi8S7B4jui1Uc4-wJiGgpQduLqFHrxmiavPIYEFQFd_-tTmY3jymfn1gSkLW-1xO635pwMIxF4bAJ/s64/deviantart.png); }
#socials li.flickr{ background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQ0BI41quGF8JosUaEolME7VS8GK2O3WP8NRbnaByibJwNlZGZL6ZxIMnbRnc0-95rhiE4piOr6zNrrjWILAIfYLub3O5khLJnW4vkSkWIRl3lQMK1YuuaMsrCUy9OiknITyUFmrmkt4fq/s64/flickr.png); }

<div id='socials'>
<ul>
<li class='facebook'><a href=''><span>Facebook</span></a></li>
<li class='twitter'><a href=''><span>twitter</span></a></li>
<li class='googleplus'><a href=''><span>googleplus</span></a></li>
<li class='linkedin'><a href=''><span>linkedin</span></a></li>
<li class='youtube'><a href=''><span>youtube</span></a></li>
<li class='flickr'><a href=''><span>flickr</span></a></li>
<li class='vimeo'><a href=''><span>vimeo</span></a></li>
<li class='tumblr'><a href=''><span>tumblr</span></a></li>
<li class='deviantart'><a href=''><span>deviantart</span></a></li>
<li class='skype'><a href=''><span>skype</span></a></li>
</ul>
</div>
<span id='sharebbn'></span>

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){ var $content = $("#socials").hide();
 $("#sharebbn").click(function(){
 $("#socials").toggle(500);
 $(this).toggleClass("expand");
 });
});
//]]></script>

Demo: jsfiddle.net/bebenkoben/ws4Pg/show

Bye :-h

Happy coding \m/

Trik Komputer

Sabtu, 05 April 2014

Make Expand (Toggle) Social Links use jQuery

Tidak ada komentar:

Posting Komentar