Social Media icons hover effects for blogger...
klo mau,..berikut tutornya,,cekkidot,..
* buka blog agan
* pilih template >>> edit HTML
* cari kode nich ]]></b:skin>
* kemudian letakkan kode dibawah tepat diatas kode ]]></b:skin>
body {
background: #f06;
background: linear-gradient(45deg, #f06, yellow);
min-height: 100%;
}
a,a:visited { color: #fff; }
a:hover { color: #fff; }
.social {
float: left;
margin: 2em 2em; width: 100px; height: 100px;
display: block; text-align: center; line-height:103px; color: #fff;
position: relative;
transform:rotateY(0deg);
transition:transform .25s ease-out;
transform-style:preserve-3d;
}
.social > div {
width: 100px; height: 100px; background: #000;
position: absolute; top: 0; left: 0; right: 0; bottom: 0;
}
.social >.front {
transform:translateZ(40px);
}
.social >.back {
background: #3B5998; font-size: 3em;
transform:rotateY(-100deg) translateZ(40px);
}
/* Social Media Colors
Facebook #3B5998
Flickr #FE0883
Foursquare #8FD400
Google+ #C63D2D
Instagram #4E433C
Linkedin #4875B4
Tumblr #2B4964
Twitter #33CCFF
Vimeo #86B32D
Youtube #FF3333
Dribbble #ea4c89
*/
.social.social-twitter > .back { background: #55ACEE; }
.social.social-github > .back { background: #f3f3f3; color: #000; }
.social.social-pinterest > .back { background: #e3262e; }
.social.social-googleplus > .back { background: #dd4B39; }
.social.social-skype > .back { background: #12A5F4; }
.social.social-linkedin > .back { background: #4875B4; }
.social.social-dribbble > .back { background: #ea4c89; }
/* Hover */
.social:hover {
transform: rotateY(100deg);
}
* kemudian tambahkan kode dibawah dan letakkan ke dalam HTML/JAVASCRIPT
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet" />
<a class="social" href="https://www.facebook.com/ivankvalentine" target="_blank">
<div class="front">
<i class="fa fa-facebook"></i>
</div>
<div class="back">
<i class="fa fa-facebook"></i>
</div>
</a>
<a class="social social-twitter" href="https://twitter.com/IvankGribatako" target="_blank">
<div class="front">
<i class="fa fa-twitter"></i>
</div>
<div class="back">
<i class="fa fa-twitter"></i>
</div>
</a>
<a class="social social-github" href="https://ghitub.com" target="_blank">
<div class="front">
<i class="fa fa-github"></i>
</div>
<div class="back">
<i class="fa fa-github"></i>
</div>
</a>
<a class="social social-pinterest" href="https://pinterest.com" target="_blank">
<div class="front">
<i class="fa fa-pinterest"></i>
</div>
<div class="back">
<i class="fa fa-pinterest"></i>
</div>
</a>
<a class="social social-googleplus" href="https://plus.google.com/110561987544809067837/posts" target="_blank">
<div class="front">
<i class="fa fa-google-plus"></i>
</div>
<div class="back">
<i class="fa fa-google-plus"></i>
</div>
</a>
<a class="social social-skype" href="https://skype.com" target="_blank">
<div class="front">
<i class="fa fa-skype"></i>
</div>
<div class="back">
<i class="fa fa-skype"></i>
</div>
</a>
<a class="social social-linkedin" href="https://linkedin.com" target="_blank">
<div class="front">
<i class="fa fa-linkedin"></i>
</div>
<div class="back">
<i class="fa fa-linkedin"></i>
</div>
</a>
<a class="social social-skype" href="https://skype.com" target="_blank">
<div class="front">
<i class="fa fa-skype"></i>
</div>
<div class="back">
<i class="fa fa-skype"></i>
</div>
</a>
<a class="social social-dribbble" href="https://dribbel.com" target="_blank">
<div class="front">
<i class="fa fa-dribbble"></i>
</div>
<div class="back">
<i class="fa fa-dribbble"></i>
</div>
</a>
>>> catatan <<<
@ ganti warna merah dengan sosmd icon anda
*** SELAMAT MENCOBA GAN ***
Baca Juga Artikel Terkait Lainnya