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.


15 commentarios

Anonymous · mayo 7, 2012 a las 8:24 pm

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

Anonymous · mayo 9, 2012 a las 12:21 pm

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

    Juvinao · mayo 9, 2012 a las 3:52 pm

    Pega ese codigo arriba de la etiqueta mencionada.

OSCAR · mayo 9, 2012 a las 9:59 pm

Para ajustar el tamaño de los botones

OSCAR · mayo 9, 2012 a las 10:00 pm

Para ajustar el tamaño de los botones

    Juvinao · mayo 10, 2012 a las 1:26 am

    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.

Antonio Soler · junio 1, 2012 a las 12:54 pm

Un gran blog en el que aprender mucho.

    Juvinao · junio 1, 2012 a las 11:36 pm

    Antonio me da mucho gusto que aprendas con mis tutoriales.

Apart Hotel ARE PORÃ · junio 15, 2012 a las 11:17 am

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.

jose armando · marzo 6, 2014 a las 4:57 am

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

jose armando · marzo 6, 2014 a las 4:57 am

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

Libros Juveniles · julio 22, 2014 a las 8:22 pm

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!

    Hayder Juvinao · julio 22, 2014 a las 10:06 pm

    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 *