¡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://lh3.googleusercontent.com/-HBsyylUbf5U/UPHpz3hmlfI/AAAAAAAAES0/SlqENmBQCqU/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://lh5.googleusercontent.com/-XpBGiysGYm8/UaFoViXN6uI/AAAAAAAAFNk/RgDoOY2dsKo/s1600/01.jpg">
<span></span>
</a>
<a target="_blank" href="enlace" class="twitter-zk">
<img border="0" src="https://lh5.googleusercontent.com/-0mDAlGvaF50/UaFoV0b8TJI/AAAAAAAAFNw/SYiASV-GEBo/s1600/02.jpg">
<span></span>
</a>
<a target="_blank" href="enlace" class="google-zk">
<img border="0" src="https://lh4.googleusercontent.com/-N0GpapxRdpc/UaFoV7E_x1I/AAAAAAAAFNs/oHjR7vUe28U/s1600/03.jpg">
<span></span>
</a>
<a target="_blank" href="enlace" class="youtube-zk">
<img border="0" src="https://lh4.googleusercontent.com/-ujGAA6If0Cg/UaFoWGW2LEI/AAAAAAAAFN4/iqSm6cjgGsg/s1600/04.jpg">
<span></span>
</a>
<a target="_blank" href="enlace" class="rss-zk">
<img border="0" src="https://lh3.googleusercontent.com/-HdYR0lXfgqU/UaFoWVu08eI/AAAAAAAAFOA/Yfp68YFOmDI/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! ·
excelenteeeee, yo podria pedir un tutorial???
ResponderEliminarClaro... ¿Cual quieres?
Eliminarun tuto facil de como poner los seguidores en plantillas clasicas de blogger, los que encuentro en google son realmente muyyyyy dificiles -.-! te lo agradeceria en grande!
EliminarQue genial !! *O*!! <3
ResponderEliminardefinitivamente lo haré cuando tenga tiempito °v°
besos~
Que bien :D ^^
EliminarSaludos!
que lindo tuto muchas gracias
ResponderEliminarDe nada :D
Eliminar