Mil Trucos Blogger

Iconos de Suscripción con efecto de bordes redondeados

Deja tu Reacción sobre el artículo
Me Gusta Dichoso Feliz Admirado Triste Enojado

Haciendo uso nuevamente de la propiedad img class=”redondeado” expuesta por El Potro tiempo atrás hoy he creado unos iconos de suscripciones con bordes redondeados que al pasar el cursor sobre ellos despliegan un bello efecto.

A continuacion una imagen de como funciona el truco.


Para agregar este truco a tu blog pega antes de ]]></b:skin> el siguiente codigo:

 .redondeado {
border-radius: 50%; /* Borde redondeado */
box-shadow: 0px 0px 15px #000; /* Sombra */
padding:0;
border:0;
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}
.redondeado:hover {
box-shadow: 0; /* Con esto eliminamos la sombra */
border-radius: 0; /* Con esto eliminamos el borde redondeado */
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
cursor:pointer;
}

Ahora en un elemento HTML/JavaScript pega lo siguiente :

 <div class="ads">
<a href="URL DE TU FACEBOOK" target="_blank" title="¡Facebook!"><img class="redondeado" src="https://lh4.googleusercontent.com/-0hUixh9TKyw/T6alkKrFE8I/AAAAAAAABBM/FMtrAx3B8IE/s128/Facebook.png" /></a>
<a href="URL DE TU TWITTER" target="_blank" title="¡Twitter!"><img class="redondeado" src="https://lh5.googleusercontent.com/-N7XdfGjLqA4/T6amHrDYTyI/AAAAAAAABBY/cGd_zpnuAD0/s128/Twitter.png" /></a>
<a href="URL DE TU YOUTUBE" target="_blank" title="¡YouTube!"><img class="redondeado" src="https://lh5.googleusercontent.com/-psvB6b_3wq4/T6amU-6rxrI/AAAAAAAABBg/Z5QtWTAnBdE/s128/Youtube.png" /></a>
<a href="URL DE TU RSS" target="_blank" title="¡RSS!"><img class="redondeado" src="https://lh5.googleusercontent.com/-Fhq5cY_R-js/T6alkHGGpeI/AAAAAAAABBI/Ff9jAB9El-w/s128/RSS.png" /></a>
</div>

Para finalizar solo debes cambiar lo que resalte en color azul por la URL de tus cuentas y listo.

0
Shares

Relacionados...

Deja tu Reacción sobre el artículo
Me Gusta Dichoso Feliz Admirado Triste Enojado

15 Comentarios

  1. Anonymous Anonymous
    mayo 7, 2012    

    Hola juvinao como puedo añadir una columna de bajo de la cabezera del blog saludos

  2. Anonymous Anonymous
    mayo 9, 2012    

    Hola, donde tengo que poner el primer código, ese que dice antes de ]] ?

    • mayo 9, 2012    

      Pega ese codigo arriba de la etiqueta mencionada.

  3. mayo 9, 2012    

    Para ajustar el tamaño de los botones

  4. mayo 9, 2012    

    Para ajustar el tamaño de los botones

    • mayo 10, 2012    

      Andres utiliza las condicionales height=”” width=””

      Donde el codigo de la imagen quedara asi:

      <a href=”http://1.bp.blogspot.com/-6dhu-X4mli0/T6k_lKVaJuI/AAAAAAAABCQ/l6YPIrZ_sKY/s1600/Avatar.png” imageanchor=”1″ style=”margin-left: 1em; margin-right: 1em;”><img border=”0″ height=”400″ src=”http://1.bp.blogspot.com/-6dhu-X4mli0/T6k_lKVaJuI/AAAAAAAABCQ/l6YPIrZ_sKY/s400/Avatar.png” width=”400″ /></a>

      Y en las partes height=”” width=”” deberás poner el numero en pixeles que quieres en el tamaño de la imagen.

  5. junio 1, 2012    

    Un gran blog en el que aprender mucho.

    • junio 1, 2012    

      Antonio me da mucho gusto que aprendas con mis tutoriales.

  6. junio 15, 2012    

    Juvinao te tengo una consulta… puedo únicamente utilizar el ícono de facebook? o debo contar con los demás para que funcione el efecto del borde redondeado? Gracias.

  7. marzo 6, 2014    

    muchas gracias por el aporte! dime puedo lo usar en mi web?

  8. marzo 6, 2014    

    gracias por el aporte! dime lo puedo usar en mi web?

    • marzo 13, 2014    

      Si tu web esta en Blogger claro que si amigo.

      Saludos

  9. julio 22, 2014    

    Busco ]]> y pego el texto antes de eso. Pero todo el código para arriba me queda azul, que estoy olvidándome de agregarle? Desde ya gracias!

    • julio 22, 2014    

      Amigo creo que estás haciendo algún paso mal, podrías indicarme la URL de tu blog por favor :-d

      Saludos

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Categorías

Síguenos en Facebook

Suscribete por Email

Introduce tu Correo:

Recibiras nuestros últimos posts en tu correo