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/AVvXsEjDDRVpw4ukTGIIgAtmh4f6WcJ8tTxwHSO8QfN7CS7g__fFVqke5l4dd2Jb5_rt-xz4orWQwQ-FwSFUyz7tMMQu2at8r349x6CUZ5MNjRC5oL_-Ub2edKU0T6sLKl6OFFl9Y1khuALFbwuo/s64/facebook.png); }
#socials li.twitter{ background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGFmkP23MBHRecijLEOmcjBLwFbwfjUvD0vNjK5n-r-aEwJuPr6NYFS9WLYk5Wvbp4TxjrUzW719QXMs-o7TyuYikzjuPyrD3QHfH7GKq91DImun56KolxBN92pHsK2dJfHbsjTYxlMwyv/s64/twitter.png); }
#socials li.linkedin{ background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjY7gX97twOorw8mImO5nKh-APXhFndZStmMDeJJI4XutL63tzL50VhF8XIpv57osTNY8hJFUv7E6E5TLCzeRTPeB_JITsM24tOZIN5SkJxf6Ua5YQYA7WxPRqruynDso3oe42P_RyMo2I1/s64/linkedin.png); }
#socials li.tumblr{ background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkfb58uzEDHQuPFoV9kJYdif4XaEiO5KvkM0UdMuvwdrabiHS-zs_3X3k2Zut5qBd0mj64HxQfl1dtJi-ZHgtTpVquBnSqZ91uBmC_pnwMsEBSngjq-DmlTjbt_8SWCp96a3Z3CHC8d-TW/s64/tumblr.png); }
#socials li.vimeo{ background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggdI-afjY_9KVlvxYjytFxB018kUx-V0NYN-QdIvss7RVvGdleM_hpQXOO7cW1l0PTszUyGsmc0bLV7Un1zGP_tGuk7vqnvmm2EXwiWqbDGXqVDGzXWgLOLYfd0b1gqV9xca2ppUQp2cx3/s64/vimeo.png); }
#socials li.skype{ background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrgDg68SAixFcF-P4uz2DH4Q8BsQ9MNjz0XYy1J1WIMpRkCNtza9y5p7beURzcV5het_OOEz69GoFJ2grChvfSVW_GrfhUutAGxP11IlFdWQ50xVk7QlxXbAxVouFhYJXnH18urbULb6GN/s64/skype.png); }
#socials li.youtube{ background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxTgAIdW5GBO8HVc4nE0-1fKDz4SUd-0_oJQHeEhnLwPMHaReiYRJYYEZxgd3muViCMZn-OKMkS3AHjV18wkua4zT-mfyJjAmwpXdvYI9leeOZqkUhoji-rpSwIRe8az4ARnoWC7ANwH1R/s64/youtube.png); }
#socials li.googleplus{ background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5MRjn61OJtHA1iVeUThZkBN4Tb2ZKSruC23tpR-ptQNr8GuWIDUrMKF6-cE9Jt9ZuN2g0vVFkarzSPFEtCPRr91JcdzV4DddddJf3G2fwwQgWTEJ5De_v9YewSJ-7ao1QMjKk0OsTmcz8/s64/googleplus.png); }
#socials li.deviantart{ background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaUgxR3LLcqNPPsdS-I3jqvWZWaUqRZG-YWB7Yj45rd8CS8-XO7UrMizzOF6lBMJ_G4xGI10q5olBN9ox9DAh2utEpK8gC6BIN2h88Sxd8QTEXq2OLAu0SFZm8tLW2NI6DBHfaWDIS2Rj4/s64/deviantart.png); }
#socials li.flickr{ background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFm7Euze1MlHLcjSQAaSoIRrPcQf8AePANEVE0rQRdbs34gUiP1Av0P7yAn4YpKGn2aX9aDxej9VhoY9Ufoe6BhEhnXYHer5jQQyJlvDaMAYZB5ePIHiLkEAAQClN2SPfHd8sms7sQf_Wt/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/