slider

C-box ¿Alguna duda?
Aqui va el código de tu c-box

Top comentaristas

viernes, 7 de junio de 2013

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://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! ·


7 comentarios:

  1. excelenteeeee, yo podria pedir un tutorial???

    ResponderEliminar
    Respuestas
    1. un 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!

      Eliminar
  2. Que genial !! *O*!! <3
    definitivamente lo haré cuando tenga tiempito °v°

    besos~

    ResponderEliminar

Tutoriales Recursos
Descargas Afiliados
Afilianos Reflexiones
Dibujo Historias