Efecto hover para icons de redes sociales

7 de diciembre de 2013

Hola mis queridos angelitos .. hoy les traigo un tutorial por fin. Es uno super sencillo pero con un resultado muy bonito. Espero les guste~

Vista previa


Para tener este efecto en tu bloggie solo debes hacer lo siguiente:

Paso 1

Primero busca con Ctrl + F  ]]></b:skin> y pega el siguiente código arriba:

.contenedor img{width: 40px;}
.contenedor:hover img {opacity: 0.4;}
.contenedor img:hover {opacity: 1;}

Tamaño que tendrá tu icon o imagen - recomiendo que tu imagen sea de tamaños iguales. Por ejemplo 40px por 40px.

Paso 2

Luego debes pegar el siguiente código en un gadget HTML/JavaScript:

<div class="contenedor">
<a href="link" target="_blank"><img  src="urldetuimagen"></a>
<a href="link" target="_blank"><img  src="urldetuimagen"></a>
</div>

Remplaza las urls y listo ♥

Si quieren también lo pueden aplicar en la zona de afiliados o en cualquier parte que quieran {hay miles de posibilidades} .. Espero les haya gustado, cualquier duda la dejan en un comment o pueden escribirme a mi correo.. besos


7 comentarios:

  1. Muy buen tutorial! Me encantó el resultado.

    ResponderEliminar
  2. Siempre lo quise saber, gracias por el tutorial :D

    ResponderEliminar
  3. Me encantó! Me lo he guardado para colocarlo próximamente! :D Podrías hacer un tutorial de como poner la fecha y los comentarios como lo tienes tú? Está chulisimo! Un besote enooooooooooorme!

    ResponderEliminar
  4. Que bonita tuto!! ^^ , pero no se si me valla a salir xD ...

    ResponderEliminar
Muchas gracias por dedicarle tu tiempo a mi blog! Espero que la entrada te haya gustado y no dudes en dejar tu opinión en un comentario ♥ (Por favor no dejes spam)