Luego de tanto pensar que nuevo truco publicar se me ocurrio darle un nuevo uso al codigo publicado por El Potro de bordes redondeados en las imagenes y decidi aplicarlo al gadget multibanner donde ponemos publicidad,talvez asi tus lectores al ver este hermoso efecto se animen a hacer publicidad en tu web.
La vista previa del truco es la siguiente:
El truco se logra mediante CSS3 por lo que solo sera compatible con los navegadores modernos.
Para añadir 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 BLOG" target="_blank" title="¡Espacio Disponible para tu Banner!"><img class="redondeado" src="https://lh5.googleusercontent.com/-_Ab1jipToss/TYjNKgEWWeI/AAAAAAAAAjs/umSnT6KTd5c/s1600/banner125.jpg" /></a> <a href="URL BLOG" target="_blank" title="¡Espacio Disponible para tu Banner!"><img class="redondeado" src="https://lh5.googleusercontent.com/-_Ab1jipToss/TYjNKgEWWeI/AAAAAAAAAjs/umSnT6KTd5c/s1600/banner125.jpg" /></a> <a href="URL BLOG" target="_blank" title="¡Espacio Disponible para tu Banner!"><img class="redondeado" src="https://lh5.googleusercontent.com/-_Ab1jipToss/TYjNKgEWWeI/AAAAAAAAAjs/umSnT6KTd5c/s1600/banner125.jpg" /></a> <a href="URL BLOG" target="_blank" title="¡Espacio Disponible para tu Banner!"><img class="redondeado" src="https://lh5.googleusercontent.com/-_Ab1jipToss/TYjNKgEWWeI/AAAAAAAAAjs/umSnT6KTd5c/s1600/banner125.jpg" /></a> </div>
Ahora cuando vayas a poner los banners de publicidad solo cambia las condicionales que resalte en color azul por las tuyas y listo.
24 comentarios
Anonymous · mayo 2, 2012 a las 11:22 pm
Encantador <3
Tengo que decirte que me gustaba más la plantilla que tenía antes, le daba un toque elegante y personal =)
Juvinao · mayo 3, 2012 a las 1:04 am
Que bueno que te encante el truco,en cuanto a la plantilla anterior la tuve que cambiar porque se cayeron las imágenes y no las pude recuperar.
Carlos Chamorro · mayo 3, 2012 a las 3:18 am
Ahahah Que Genial… Juvinao.. podrias poner un tuto de como poner el espacio para lo codigos como lo haces tu?…
Carlos Chamorro · mayo 3, 2012 a las 3:40 am
Juvinao.. Grande… puede que lo use 😀 a favs.. :3
por cierto.. puede poner un tuto de como poder la seccion de codigos como pones en tus post?…Gracias 😀
Juvinao · mayo 3, 2012 a las 3:00 pm
Carlos aqui hay una entrada donde explico como añadir un estilo similar al mio 😀
http://www.miltrucosblogger.info/2011/12/anadele-estilo-los-textos-citados-de-tu.html
Carlos Chamorro · mayo 4, 2012 a las 1:15 am
Ahaha Gracias.. 😀
Otra cosa.. 😛 espero no molestar seria bueno que en la para de «Ultimas Opiniones» le diras click y te lleve directo a la entrada donde fue comentada para no andar buscandola :P.. claro eso seria en entradas que son antiguas.. 😀
Juvinao · mayo 4, 2012 a las 2:26 pm
Carlos en el gadget de Ultimas Opiniones das click en el nick del usuario que comento y te lleva directo al comentario.
Gustavo Chi Dzul · mayo 3, 2012 a las 6:20 am
Muy bonito usted siempre poniendo lo mejor Juvinao.
Recien abro mi blog y queria ver si podria ayudarme en una cosita, debajo de cada post habia puesto el truco que usted enseño pero ahora solo aparece el espacio en blanco y quisiera eliminarlo ya que si situo el puntero encima estan los links pero no las imagenes este es mi blog y digame que le parece tambien jeje
http://phobos-curios.blogspot.mx
Juvinao · mayo 3, 2012 a las 3:04 pm
Gustavo exactamente cual truco pusistes en tu blog.
Gustavo Chi Dzul · mayo 3, 2012 a las 4:16 pm
puse el de compartir de redes sociales, pero ahora que no veo las imagenes no puedo recordar.
Gustavo Chi Dzul · mayo 3, 2012 a las 4:19 pm
Realmente no recuerdo mucho pero era para poder compartir, lo que sucede es que como no veo las imagenes se me ha olvidado.
Juvinao · mayo 3, 2012 a las 4:59 pm
Amigo lo mas seguro es que las imagenes se cayeron,pero necesito saber cual truco es para subir las imagenes :zombie:
Gustavo Chi Dzul · mayo 4, 2012 a las 3:07 am
waaa mi mente no aguanta tanta informacion como esa jeje
Juvinao · mayo 4, 2012 a las 2:27 pm
:zombie:
Gustavo Chi · mayo 7, 2012 a las 4:44 pm
como haces para tener los comentarios asi? me gusta mucho
Juvinao · mayo 7, 2012 a las 9:56 pm
Amigo con CSS si quieres te paso los codigos que uso 😀
ramon ferrer · mayo 3, 2012 a las 1:11 pm
muy bueno el truco.Gracias desde forobeta y desde aquí
Juvinao · mayo 3, 2012 a las 3:05 pm
De nada amigo,gracias a ti por comentar 😛
Ainoa · mayo 25, 2012 a las 1:31 pm
»Para añadir este truco a tu blog pega antes de ]]> el siguiente codigo»
Donde se supone que tenemos que añadir ese truco?
Juvinao · mayo 26, 2012 a las 1:11 am
Arriba de la etiqueta mencionada debes añadir el codigo.
Los Choiques RC · junio 5, 2012 a las 4:26 pm
Tengo un desafío para invitarte a resolver.
He diseñado un Blogger para un club de rugby. en el agregue un espacio para que escriban como «columnistas» gente de ese deporte.
Es posible hacer que estos aparezcan en la página principal con una parte de lo escrito con acceso directo a la nota completa?… tal como gadget de post reciente con imágenes… espero respuesta…
Juvinao · junio 6, 2012 a las 12:52 am
Tratare de trabajar en tu peticion lo mas pronto posible.
Lagar · septiembre 24, 2013 a las 11:21 am
¿ Se podria cambiar el tamaño para utilizarlo como botones ?
Hayder Juvinao · septiembre 30, 2013 a las 7:52 pm
Lagar puedes usar cualquier imagen que quieras, solo debes reemplazar la URL de la imagen del banner por la del botón que quieras.
Saludos