Make Expand (Toggle) Social Links use jQuery - Hallo friend Cara Mudah Posting Gratisan, In the article you read this time with the title Make Expand (Toggle) Social Links use jQuery, we have prepared well for this article you read and download the information therein. hopefully fill posts Article Coded, Article CSS, Article CSS3, Article HTML, Article jQuery, Article Snippet, Article Tutorial, we write this you can understand. Well, happy reading.

Title : Make Expand (Toggle) Social Links use jQuery
link : Make Expand (Toggle) Social Links use jQuery

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/AVvXsEhWfhAMI_l8zjx2fqGGNAsEKPRBOFRkvp2fHevM575pAUIOgCZhryTryCAm0lZy8p55jqUX1tB4-0HgsVsYbWz9Q-kHPEXfXFArJoN1BgxuZ5jIIjLJSHFKqq69KTd7X4SN8nrJaH0o_15-/s64/facebook.png); }
#socials li.twitter{ background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiziXJwreqwA0vrbEQkPw0yXLCqo9n2kvB0Bp-7L4kN3ZJZa3hkvZHX6OiFqkvvh_xEfeGIg0qGFkdtiPipql5iQZ9shIkhzog4vvl4uDgnqSFpDxmz-mergZtsx6FPDVVJ90kmNFmG_uBl/s64/twitter.png); }
#socials li.linkedin{ background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8lC3P-yAtf_2LWVK-7c-rkPE5dNsZpITZR4ulNIRldcF6Cnv2S0_i7VZx-VKssrEW8vd5bemgCvRDHqNZB0CXupooUvWHtDvZFFlPe1zOEmPZFrogQNKPCyI4w61GfCeC-nxeMjftYaia/s64/linkedin.png); }
#socials li.tumblr{ background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdfRxdtREMYmMVvXyxScSLqah-ORfKgrAFSru6WboJ7z0ajsN_YI6OYMoS-U_IFub2oVdzb2YN8XU9Ot6gr3PMpoFPjSDzsGFY_lbM3X5WY4WWFOdHfPOcUEpE3Mx5KNq7i8GJjgDq_tF1/s64/tumblr.png); }
#socials li.vimeo{ background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhArK7M9RvCP9qGTt1opPtvyXxYZbtacGFvg6NzartqdWprK1T9GrP4ts1gnPbqIP2P7Sm5JIGLyg36Ht2NVCBFNTlikeqzGkYTdszfPA0Kjcbt1csRYgj0c6Xq8_ex5J2vwIorCztIU_5K/s64/vimeo.png); }
#socials li.skype{ background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgy10f5Ig0m_JUVUtsB4N9KBIDLRjNWO-P3iCNy313bkXPG5SKJwxBsCtUiFQih8f4JK9BCY1wMpA8uNbx94VLz3eT8Ps4uBSzwWK9Z-fIfUFbBqNbnIfIKkExmmNvEzsl8PsV-yX9qnkcT/s64/skype.png); }
#socials li.youtube{ background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjf2Wz8znIFDaEWsUbuK62CwHYT5CNjJAuRX5MFNLMCiqqIjUkPbz15KteZIrEXbKx3sFPiwIVqrb5ua3VtGcw5GABAraPSz03k99gHh8USfkEAD5ifKx22a3TqY05Cyy01J-6yBUDIyOgF/s64/youtube.png); }
#socials li.googleplus{ background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEht9mPZ-rnS6LWa4MZ1j2IKUm0WZU41-A0buWVMw8S4kxIn97jOzc7Nc6v9v-Es6VWYGzQSElKb3Np-Ox4sIjzWsNwFWAyHIFo1T9TVZBulglw6iFWKzmk3suhku-kpHo9uNB7I3nVJSWm-/s64/googleplus.png); }
#socials li.deviantart{ background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhU6OjMylgmeySw0pBGQdp7K4afzcLmHj9gISd9geacrAbU0XuK-6scmeKy4lmm60DjNjAowzynJD-xPdmfDV8QhAuxUsgr4YFr7Gqe_FZb0OWepYDdb9WErtt8Lsr142oDE35xO047bKPl/s64/deviantart.png); }
#socials li.flickr{ background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTz_wlA0xvRqnoPCgIq0Y_9EvVLfYqolZpi8APo8KWQttoRYN35j4Ib3ppo63-5gGT62C8o_g3dPLb_ICTJn1gCS20TUXswAVbhinskTykMdpbPakjIBy0qW10Nf3DRPEzr2nZsbia6uDA/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/

Thus articles Make Expand (Toggle) Social Links use jQuery

that is all articles Make Expand (Toggle) Social Links use jQuery This time, hopefully can provide benefits to all of you. Okay, see you in another article posting.

You now read the article Make Expand (Toggle) Social Links use jQuery with the link address https://autopostingblogspot.blogspot.com/2014/04/make-expand-toggle-social-links-use.html

Make Expand (Toggle) Social Links use jQuery

Make Expand (Toggle) Social Links use jQuery

Thus articles Make Expand (Toggle) Social Links use jQuery

0 Response to "Make Expand (Toggle) Social Links use jQuery"

Posting Komentar

Make Expand (Toggle) Social Links use jQuery

Also Read

Make Expand (Toggle) Social Links use jQuery

Thus articles Make Expand (Toggle) Social Links use jQuery

0 Response to "Make Expand (Toggle) Social Links use jQuery"

Posting Komentar