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 comentarios
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
Juvinao · mayo 7, 2012 a las 8:40 pm
Amigo mira aqui un tutorial de El Balcon que talvez te sirva.
http://elbalcondejaime.blogspot.com/2009/05/anadir-cuatro-columnas-bajo-la-cabecera.html
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?
Hayder Juvinao · marzo 13, 2014 a las 12:46 am
Si tu web esta en Blogger claro que si amigo.
Saludos
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