Tombol Social Icon Untuk Blogger dengan Efek Slide

Berikut ini adalah Cara Membuat Tombol Social Icon Untuk Blogger dengan Efek Slide yang di ambil dari blognya Kang Ruly Jenar Nakula.

Demo

Cara membuatnya :

Tambahkan kode di bawah ini sebelum ]]></b:skin>

.socialw {
    width: 235px;
    margin: 100px auto 0 auto;
    overflow: auto;
    height: 100%;
}
.social{
  position:relative;
    border: 1px solid #292929;
    width: 37px;
    height: 62px;
    float: left;
    margin-left: 10px;
    overflow: hidden;
}
.first {
    margin-left: 0px;
}

/*    ANIMATIONS   */

/* Fade In Down */
@-webkit-keyframes fadeInDown {
0% {  opacity: 0;  -webkit-transform: translateY(-100px);  }    
100% {  opacity: 1;  -webkit-transform: translateY(0);    }
}

@-moz-keyframes fadeInDown {
0% {  opacity: 0;  -moz-transform: translateY(-100px);    }    
100% {  opacity: 1;  -moz-transform: translateY(0);  }
}

@-o-keyframes fadeInDown {
0% {  opacity: 0;  -o-transform: translateY(-100px);    }    
100% {  opacity: 1;  -o-transform: translateY(0);  }
}

@keyframes fadeInDown {
0% {  opacity: 0;  transform: translateY(-100px);    }    
100% {  opacity: 1;  transform: translateY(0);    }
}

.fadeInDown {
-webkit-animation: fadeInDown 1s both 0.5s;
-moz-animation: fadeInDown 1s both 0.5s;
-o-animation: fadeInDown 1s both 0.5s;
animation: fadeInDown 1s both 0.5s;
}
/* Fade In Down */

/* Social Transition */

.social img{
position:absolute;
left:0;
top:0;
-webkit-transition: margin-top 250ms ease-in;
-moz-transition: margin-top 250ms ease-in;
-o-transition:  margin-top 250ms ease-in;
transition:  margin-top 250ms ease-in;
}
.social:hover img{
margin-top:-62px;
}

Kemudian tempatka kode dibawah ini, dimanapun Anda ingin menyimpanya:

<div class="socialw fadeInDown">  
  
<div class="socialw fadeInDown">  
  
<!-- Dribbble !-->
<a href="http://dribbble.com" target="_blank">        
<div class="social first"> <img src="http://i.imgur.com/64r2jAv.png"/></div>
</a>
<!-- Dribbble !-->

<!-- Behance !-->
<a href="http://behance.com" target="_blank">        
<div class="social"> <img src="http://i.imgur.com/fkuhUov.png"/></div>
</a>
<!-- Behance !-->

<!-- Facebook !-->
<a href="http://facebook.com" target="_blank">        
<div class="social"><img src="http://i.imgur.com/PY2EPRW.png"/></div>
</a>
<!-- Facebook !-->

<!-- Twitter !-->
<a href="http://twitter.com" target="_blank">        
<div class="social"> <img src="http://i.imgur.com/ny0pyqt.png"/> </div>
</a>
<!-- Twitter !-->

<!-- Intagram !-->
<a href="http://instagram.com" target="_blank">        
<div class="social"> <img src="http://i.imgur.com/tZZG2zQ.png"/></div>
</a>
<!-- Instagram !-->

</div>
<!-- Social Icons End !-->

Created by Ryan Bishop
Sumber :http://duniaradioku.blogspot.com/2013/11/membuat-tombol-social-icon-dengan-efect.html