Redes Sociales galaxy

¡Hola hola! Aqui un tutorial muy elegante para las redes sociales  Son muchos efectos pero empezaremos con el básico.... Veamos una vista previa,  clic ¡aqui! Mola mucho (al menos a mi) Comencemos ¿Ok? ·    ·

Solo es dificil porque son muchos códigos

Nos vamos a plantilla y antes de ]]></b:skin>

.social-ax > a {
border: 1px solid #CCCCCC;
display: inline-block;
height: 70px;
line-height: 0;
margin: 0 20px 10px;
padding: 4px;
position: relative;
width: 70px;
}
.social-ax > a > span {
background-color: rgba(0, 0, 0, 0.7);
background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiGDy74HVXwCISI4CqzW7YHD9BmP1tUrBbJSEpp3KNNf7odd30QOCerRWWGskdY2a0Ch_gckFBHqnsI_FMtpMGZR_lTAA6MdjttsQ5anFA_VpCFVHic0HHa7d4EpcUOxWyJBgKjM3CLqve/s1600/all-icons.png");
background-repeat: no-repeat;
display: block;
height: 70px;
position: absolute;
top: 4px;
width: 70px;
z-index: 50;
transition: all 300ms ease-in-out 0s;
-moz-transition: all 300ms ease-in-out 0s;
-webkit-transition: all 300ms ease-in-out 0s;
-o-transition: all 300ms ease-in-out 0s;
}
.facebook-zk > span {background-position: 7px 2px;}
.twitter-zk > span {background-position: -92px 2px;}
.google-zk > span {background-position: -194px 2px;}
.youtube-zk > span {background-position: -292px 2px;}
.rss-zk > span {background-position: -393px 1px;}
.social-ax.fade > a > span {opacity: 0;}
.social-ax.fade > a > span:hover {opacity: 1;}

Ya está, ahora a hacer el efecto... si lo quieres en tu blog lo pones con este código, en un gadget o lo que quieras:

<div class="social-ax fade">
<a target="_blank" href="enlace" class="facebook-zk">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNWZ-KEhPgjE21qs2Ru_zWAryCige5A_smnmpc1W0Q5Ie7mu5BZjNCzgLSXBITa0lXdz_HRTX34sPl5kflZobfMGgLLTG7ycqM7btpU4S-zpcK1dxPbgb1Cr6hTBsQGiVU1N-8qhD77utp/s1600/01.jpg">
<span></span>
</a>
<a target="_blank" href="enlace" class="twitter-zk">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjG6W-BYTWXbOp3Ys7b2GvzkxjmB0wV6e5fM7g3V3X2w8RTzAZvQ4MeL1dxVYmNXeJNr9sYNGA71AhsHxb9pe0aKyqAAAOlqT_SeVDkICUc30AQqQbUhE_z8aR5tfIvHSUTUNjebiMW-J5l/s1600/02.jpg">
<span></span>
</a>
<a target="_blank" href="enlace" class="google-zk">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVXdcsulJkKpi0pseq5LdR_p27fHAxvkwSDNw9sdoIRZEmg2ynn-BNeTKiuLFwOyCtKWP6xeYaaS2tH3dUnKfZwQG75RgOXfEw4uRqjk0PdwuInrGAw_kD80614Zg6ky9kqDX3IUACP_dp/s1600/03.jpg">
<span></span>
</a>
<a target="_blank" href="enlace" class="youtube-zk">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKWQ-ILKzuqiLWhwKH_PD1uix3mTE1XnQXf3WjUA2SK-ILBNRVRICvNoWyS_7Er5zxiOvT8JWGJEXmFqSNaF1ZIZR_FTO1uEwIHUydbk8f2yDbWt6-qmzoihS18OdD1z5DhyAyKbENpnTo/s1600/04.jpg">
<span></span>
</a>
<a target="_blank" href="enlace" class="rss-zk">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0AmC9uchF0c3OWctgbw5j_i3RezhzDwf6mVu0oFwpKbCUPcU4Ukk3lcrC8Wb4hJuXajs6RXJxgjwMnHdDFvRUPAhcFOQw2ZhApXYs4-Uxc4WJTFyysBagpbtwAEIdnxcGdcfIM8_o2Oq4/s1600/05.jpg">
<span></span>
</a>
</div>

En otro tutorial aprenderemos otro efecto del mismo tipo, espero que os gustara  Y eeeeen fin, eso es todo por ahora.

Espacio Publicitario

· Te gustaría unos fondos para tu blog? ¡Clic aqui! ·