◄ Min  Size Fonts: + | - | ± Color: Max ►

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);
}

<input id='phone_booth' type='checkbox'/>
<div id='areal'>
<label for='phone_booth'>
<img id='phone' src='LINK-IMAGE/phone.png'>
</label>
<a class='card-container' href='LINK HERE'>
<div class='card'>
<div class='face'>
<img src='LINK-IMAGE/googlePLUS.png' alt=''/>
</div>
<div class='face back'>
<img src='LINK-IMAGE/googlePLUS_hover.png' alt=''/>
</div>
</div>
</a>
<a class='card-container' href='LINK HERE'>
<div class='card'>
<div class='face'>
<img src='LINK-IMAGE/twitter.png' alt=''/>
</div>
<div class='face back'>
<img src='LINK-IMAGE/twitter_hover.png' alt=''/>
</div>
</div>
</a>
<a class='card-container' href='LINK HERE'>
<div class='card'>
<div class='face'>
<img src='LINK-IMAGE/lastfm.png' alt=''/>
</div>
<div class='face back'>
<img src='LINK-IMAGE/lastfm_hover.png' alt=''/>
</div>
</div>
</a>
<a class='card-container' href='LINK HERE'>
<div class='card'>
<div class='face'>
<img src='LINK-IMAGE/linkedin.png' alt=''/>
</div>
<div class='face back'>
<img src='LINK-IMAGE/linkedin_hover.png' alt=''/>
</div>
</div>
</a>
<a class='card-container' href='LINK HERE'>
<div class='card'>
<div class='face'>
<img src='LINK-IMAGE/github.png' alt=''/>
</div>
<div class='face back'>
<img src='LINK-IMAGE/github_hover.png' alt=''/>
</div>
</div>
</a>
<a class='card-container' href='LINK HERE'>
<div class='card'>
<div class='face'>
<img src='LINK-IMAGE/mdn2.png' alt=''/>
</div>
<div class='face back'>
<img src='LINK-IMAGE/mdn_hover3.png' alt=''/>
</div>
</div>
</a>
<a class='card-container' href='LINK HERE'>
<div class='card'>
<div class='face'>
<img src='LINK-IMAGE/stackoverflow.png' alt=''/>
</div>
<div class='face back'>
<img src='LINK-IMAGE/stackoverflow_hover.png' alt=''/>
</div>
</div>
</a>
<a class='card-container' href='LINK HERE'>
<div class='card'>
<div class='face'>
<img src='LINK-IMAGE/wikipedia.png' alt=''/>
</div>
<div class='face back'>
<img src='LINK-IMAGE/wikipedia_hover.png' alt=''/>
</div>
</div>
</a>
<a class='card-container' href='LINK HERE'>
<div class='card'>
<div class='face'>
<img src='LINK-IMAGE/rss.png' alt=''/>
</div>
<div class='face back'>
<img src='LINK-IMAGE/rss_hover.png' alt=''/>
</div>
</div>
</a>
</div>

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(http://1.bp.blogspot.com/-sbybihVrVuc/UHOTA49XRvI/AAAAAAAAEFY/08OCFvAm_wE/s64/facebook.png); }
#socials li.twitter{ background-image:url(http://1.bp.blogspot.com/-NskGHQfbyOA/UHOTDD3zdjI/AAAAAAAAEF4/sjChvedQgB8/s64/twitter.png); }
#socials li.linkedin{ background-image:url(http://1.bp.blogspot.com/-iwc7BZN6aAo/UHOTBxWKMSI/AAAAAAAAEFk/acmiao2JW-k/s64/linkedin.png); }
#socials li.tumblr{ background-image:url(http://1.bp.blogspot.com/-oceB8nmgiZ0/UHOTC4MmfwI/AAAAAAAAEF0/sbbGNL4ZTeg/s64/tumblr.png); }
#socials li.vimeo{ background-image:url(http://1.bp.blogspot.com/-apJrWCzYm-A/UHOTDZALThI/AAAAAAAAEGA/SpSImNuMR5I/s64/vimeo.png); }
#socials li.skype{ background-image:url(http://1.bp.blogspot.com/-HunH1J-7iZk/UHOTCtdNsFI/AAAAAAAAEFw/Pu2WkzQWNhU/s64/skype.png); }
#socials li.youtube{ background-image:url(http://1.bp.blogspot.com/-WtmigBJcc7g/UHOTDv29ObI/AAAAAAAAEGE/vVRRs-RkzBs/s64/youtube.png); }
#socials li.googleplus{ background-image:url(http://1.bp.blogspot.com/-mpeEl_TsIio/UHOTBq0XpmI/AAAAAAAAEFo/JeTzX9DWfbE/s64/googleplus.png); }
#socials li.deviantart{ background-image:url(http://1.bp.blogspot.com/-IvvW31ras2k/UHOTAXEtvDI/AAAAAAAAEFE/sOP5PCIDCqg/s64/deviantart.png); }
#socials li.flickr{ background-image:url(http://1.bp.blogspot.com/-fTxKi1uGenI/UHOTBtZabNI/AAAAAAAAEFg/htMsgs1jRVU/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/

Loading...
XMake Expand (Toggle) Social Links use jQuery
Membuat expand/hide (toggle) link jejaring sosial menggunakan CSS atau jQuery.
Subscribe my posts Register For Free!

2 comments

[?] g+ convert

DO NOT EVEN TRY ADD LINK [-X
You can use some HTML tags, such as
<b> - <i> - <a> - http://...jpg/gif/png/bmp - http://youtu.be/...

al-Quran

MISC

Resources

WANT BE HERE!!! CONTACT ME :P
1 2 3 4 5 6 7 8 9

FACEBOOK PAGE