Mil Trucos Blogger

Gadget Multibanner con efecto de bordes redondeados

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

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.

0
Shares

Relacionados...

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

24 Comentarios

  1. Anonymous Anonymous
    Mayo 2, 2012    

    Encantador <3

    Tengo que decirte que me gustaba más la plantilla que tenía antes, le daba un toque elegante y personal =)

    • Mayo 3, 2012    

      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.

  2. Mayo 3, 2012    

    Ahahah Que Genial… Juvinao.. podrias poner un tuto de como poner el espacio para lo codigos como lo haces tu?…

  3. Mayo 3, 2012    

    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 😀

    • Mayo 3, 2012    

      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

    • Mayo 4, 2012    

      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.. 😀

    • Mayo 4, 2012    

      Carlos en el gadget de Ultimas Opiniones das click en el nick del usuario que comento y te lleva directo al comentario.

  4. Mayo 3, 2012    

    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

    • Mayo 3, 2012    

      Gustavo exactamente cual truco pusistes en tu blog.

    • Mayo 3, 2012    

      puse el de compartir de redes sociales, pero ahora que no veo las imagenes no puedo recordar.

    • Mayo 3, 2012    

      Realmente no recuerdo mucho pero era para poder compartir, lo que sucede es que como no veo las imagenes se me ha olvidado.

    • Mayo 3, 2012    

      Amigo lo mas seguro es que las imagenes se cayeron,pero necesito saber cual truco es para subir las imagenes :zombie:

    • Mayo 4, 2012    

      waaa mi mente no aguanta tanta informacion como esa jeje

    • Mayo 4, 2012    

      :zombie:

    • Mayo 7, 2012    

      como haces para tener los comentarios asi? me gusta mucho

    • Mayo 7, 2012    

      Amigo con CSS si quieres te paso los codigos que uso 😀

  5. Mayo 3, 2012    

    muy bueno el truco.Gracias desde forobeta y desde aquí

    • Mayo 3, 2012    

      De nada amigo,gracias a ti por comentar 😛

  6. Mayo 25, 2012    

    ”Para añadir este truco a tu blog pega antes de ]]> el siguiente codigo”
    Donde se supone que tenemos que añadir ese truco?

    • Mayo 26, 2012    

      Arriba de la etiqueta mencionada debes añadir el codigo.

  7. Junio 5, 2012    

    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…

    • Junio 6, 2012    

      Tratare de trabajar en tu peticion lo mas pronto posible.

  8. Septiembre 24, 2013    

    ¿ Se podria cambiar el tamaño para utilizarlo como botones ?

    • Septiembre 30, 2013    

      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

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