English Português

Los banner de 125×125 pixeles se estan tornando en los favoritos de los bloggers y también son muy usuales en los sitios web convencionales. De acuerdo al sistema (CMS) que se use para manejar un sitio, pueden existir complementos para administrar este tipo de publicidad de forma casi automática, pero la forma manual con html y css se aplica en cualquiera.

Aquí pongo un sencillo tutorial de como poner banners de 125×125 en x número de columnas para gestionarlos manualmente.

Estructura en HTML

Lo primero será crear la estructura html, hay varias posibilidades, en este caso serán elementos de lista. La estructura para 4 banners quedaría así:

<div id="banners125">
<h2>Patrocinadores</h2>
<ul>
	<li>
		<a href="http://btemplates.com" title=""><img src="images/btemplates.jpg" alt=""/></a>
	</li>
	<li>
		<a href="http://weba20.com" title=""><img src="images/weba20.png" alt=""/></a>
	</li>
	<li>
		<a href="http://forosdelblog.com" title=""><img src="images/forosdelblog.png" alt=""/></a>
	</li>
	<li>
		<a href="http://serturista.com" title=""><img src="images/serturista.png" alt=""/></a>
	</li>
	
<!-- Para agregar otro banner puedes usar el siguiente código:
	<li>
		<a href="http://tusitio.com/" title="descripcion"><img src="http://tusitio.com/imagen.png" alt="descripcion"/></a>
	</li>
Termina código -->

</ul>
</div>

Solo hay que colocar las URLs de los sitios, las URLs de las imágenes y las descripciones (en alt y title). También ahí mismo esta comentado el código que puede usarse como guía para agregar más banners.

En WordPress esta estructura se coloca generalmente en el archivo sidebar.php y las imágenes pueden hospedarse directamente en el servidor. En Blogger el código se coloca justo abajo de:

<div id='sidebar-wrapper'>

Y se pueden alojar las imágenes en el mismo Blogger.

Estilos CSS

Para mostrar adecuadamente los banners es necesario dar los estilo y definir así los margenes, flotación, etc. Los siguientes estilos permiten mostrar los banners en 2 columnas si el espacio es suficiente, pero también funcionan si solo hay espacio solo para 1 banner o para más de 2 sin hacer cambio alguno en el código.

/* Banners 125x125 */
#banners125 {
margin: 10px 0;
width:100%;
}
#banners125 ul {
padding:0;
margin:0;
list-style-type:none;
}
#banners125 ul li {
float: left;
margin:10px 0 0 10px;
display: inline;
}
#banners125 img {
display: block;
}

Hay que tener en cuenta que el diseño donde se use puede tener estilos que interfieran con estos o que no se ajusten perfectamente a él, para ello hay que hacer modificaciones en este código css.

En WordPress estos estilos se pueden agregar al final del archivo style.css y en Blogger justo antes de:

]]></b:skin>

Demostración

Esta estructura es la que uso en Blog and Web para mostrar los banners en 2 columnas y en Foros del Blog para 5 columnas (ahora solo tengo 3 ocupadas). Cualquier comentario o corrección se lo agradezco en este post y dudas en nuestro foro.

Escrito por Francisco Oliveros

Soy un gran aficionado del diseño y de todo lo que el código puede comunicar. Ingeniero mecánico por profesión, pero dedicado al desarrollo web a tiempo completo.

Blog / Twitter

Artículos relacionados

Sigue leyendo consejos, tips y tutoriales para tu blog.

Comentarios

  1. Facundo / Hace 6 años /

    Bueno, teniendo un cms tan practico y automatico como wordpress me parece que cambiar los banners manualmente no es necesario, te recomiendo el plugin “WP125″, este te permite agregar un simple codigo al sidebar y con eso ya tienes puestos estos banners.
    Los configuras desde un panel, seteando la imagen default, la direccion a donde se encuentra la forma de pago, precios, etc. Te lo recomiendo, si no te gusta lo eliminas y ya.

    Saludos!

    Responder a Facundo →
  2. Francisco / Hace 6 años /

    Muy bueno ese plugin, te evitar estar viendo el calendario. Igual este tutorial va más destinado a blogger y sitios web generales, aun así, en lo personal con la gestión manual me basta en wordpress.

    Responder a Francisco →
  3. Educavent / Hace 6 años /

    Hola Francisco:

    Un gusto saludarte

    Siguiendo estas instrucciones, en mi web me quedan los banner inmediatamente uno al lado de otro, esto es, sin separación entre ellos.

    ¿Como los puedo separar? Tengo el blog en Blogger

    Te agradezco tu gentileza y quedo atento a tu respuesta

    Responder a Educavent →
  4. Francisco / Hace 6 años /

    Hola,

    Acabo de notar tenía un pequeño error en el código, tenía:

    margin-left:10px 0 0 10px;

    y es:

    margin:10px 0 0 10px;

    Corrige eso y ya no debería haber problema.

    Saludos!

    Responder a Francisco →
  5. armando / Hace 6 años /

    Hola, gracias por el tip pero tengo un problema, ojala me puedas ayudar. Yo ya tengo los recuadros de 125×125 px, la cosa esta en que quiero poner una foto pero se distorsciona, es mas grande que ese espacio (125×125) como le hago para achicar la imagen para que quede bien puesto?
    gracias.

    Responder a armando →
  6. Francisco / Hace 6 años /

    Armando, con una herramienta de edición como Photoshop (crtl+t) o alguna pequeña utilidad en linea como picnik.

    Responder a Francisco →
  7. Marcosfv / Hace 6 años /

    Buenisimo, ¡lo que estuve buscando en la web y al fin lo encontre. Yo prefiero ponerlo manualmente y no abusar de tantos plugins en mi sitio. Claro Facundo que el plugin que ocmentas tiene otra finalidad, no solo de mostrar los banners sino la de gestionarlos. Tambien sirve saber eso.

    Responder a Marcosfv →
  8. marcos / Hace 6 años /

    Los puse, pero me quedan uno debajo del otro. El codigo CSS, no cambia nada.
    ¿que puedo hacer?

    Responder a marcos →
  9. palmo / Hace 6 años /

    gracias Francisco me quedo al pelo ahora a buscar patrocinadores

    Responder a palmo →
  10. cesar / Hace 6 años /

    hola no me toma los cambios del CSS, coloque los baners pero no puedo lograr que me queden en dos columnas, q deberia modicar en el codigo?

    Responder a cesar →
  11. Francisco / Hace 6 años /

    Con este CSS se acomodarán en 2 columnas o más de acuerdo con el espacio que se disponga para los banners, si quieren tener 2 filas, el espacio neto con que deben contar es de 270px (250 del ancho de los banners y 20 en los margenes).

    Se puede reducir en algunos pixeles esta necesidad, bajando el margin, por ejemplo, de:

    margin:10px 0 0 10px;

    a:

    margin:10px 0 0 5px;

    Responder a Francisco →
  12. cesar / Hace 6 años /

    sigo sin poder realizar los cambios evidentemente la plantilla de blogger q utilizo no me permite mostrar los banners en 2 columnas y me los coloca uno debajo del otro la verdad es que soy nuevo en esto y no le encuentro una solucion, desde ya gracias por tu respuesta francisco

    Responder a cesar →
  13. GatuMadre! / Hace 6 años /

    jeje, gracias esto me sirvio para crear adicons!

    Responder a GatuMadre! →
  14. cesar / Hace 6 años /

    hola la solucion fue cambiar la plantilla de blogger y me qdo de mil desde ya gracias ah una cosita como le cambio de color a “patrocinadores” una vez mas gracias

    Responder a cesar →
  15. GatuMadre! / Hace 6 años /

    recien saque este codigo de este sitio para agregar adicons a mi web, deberian de hacer un post dedicado a eso, solo quiten lo de

    Responder a GatuMadre! →
  16. eduardo / Hace 6 años /

    hola mi sitio todavia está en construccion utilizo uno de tus templates gracias por eso, estan muy lindos todos tus templates, tengo una pregunta, en blogger puedo poner mi banner de publicidad, tengo mi empresa q vende partes de computo, pero me parexce q blogger no permite eso ? me gustaria q me aclares eso y te lo agradezco de antemano mil gracias
    Eduardo

    Responder a eduardo →
  17. yoselin / Hace 6 años /

    NECESITO SABER COMO PONER BANNERS EN UNA PAGINA CON HTML DE MANERA QUE SE PUEDAN VER EL CODIGO PARA QUE OTRAS PERSONAS LO COPIEN.

    Responder a yoselin →
  18. D´SABRERA / Hace 6 años /

    MUY BUENO.

    Responder a D´SABRERA →
  19. sağlık / Hace 6 años /

    thanks

    Responder a sağlık →
  20. mauro / Hace 6 años /

    hola quisiera que alguien me ayude quiero poner mi banners de la pagina de gdi en mi blog pero no se como si me ayudan. a donde voy como tengo los codigos de banners pero no se como colocarlos en donde como no se nada necesito ayuda gracias

    Responder a mauro →
  21. SoLoGaR / Hace 6 años /

    tiene que ser a fuerzas imagenes de el tamaño 125 x 125, y si tiene que ser tambien a fuerzas el formato de la imagen en .png??

    Responder a SoLoGaR →
  22. Francisco / Hace 6 años /

    No, pueden ser en otro tamaño y otros formatos de imagen. El tamaño de 125×125 es estandar, por eso es recomendado.

    Responder a Francisco →
  23. Mónica / Hace 6 años /

    Hola. Tuve muchas dudas sobre cómo poner banners y gracias a la información que encontré aquí pude resolver mis dudas. Muchas gracias =)

    Saludos desde México!

    Responder a Mónica →
  24. adolfo fernandez / Hace 5 años /

    me ha parecido interesante su articulo, y en general todo el contenido de su sitio. Aprobecho la oportunidad para felicitarle por el esfuerzo e invitarla a la ves a visitar mi web.

    Responder a adolfo fernandez →
  25. jorge / Hace 5 años /

    me gustaria saber como hacerle para que los link de los anuncios se abran en una nueva ventana

    Responder a jorge →
  26. Francisco / Hace 5 años /

    @Jorge Solo se agrega el atributo target=_blank a cada enlace y listo, aunque en lo particular no me agrada eso.

    Responder a Francisco →
  27. Jorge / Hace 5 años /

    Gracias ya lo había solucionado, era un problema con mi tema, y a mi tampoco me agrada pero así me lo pidieron, les explique que a nosotros los usuarios no nos gusta tener 700 pestañas abiertas pero no les importo.

    Aun así gracias por tu pronta respuesta

    Responder a Jorge →
  28. Eder / Hace 5 años /

    Hola, gracias por el tutorial, llevo probando tres formas pero en todas me salen los banners en fila, uno debajo del otro.
    Quisiera verlos en dos filas, y la opción de ajustar los márgenes no me funciona. Algun tip de donde moverlea mi plantilla?
    Gracias.

    Responder a Eder →
  29. Hispania / Hace 5 años /

    Muy bueno !!! Es una opción muy interesante pero a mi me gustaría colocar solo tres banners arriba del todo de la sidebar ( similar a la zona de tu blog Suscribete gratis ) en una sola hilera. No se si se puede hacer o quedaría mal ;-)

    Responder a Hispania →
  30. adalberto / Hace 5 años /

    Quisiera por favor que me enviaran sobre este articulo,soy nuevo en esto y prcios de conocer como colocar banner en mi pagina web.Reviso no se que cantidad de paginas diarias pero en realidad esta me resulto interesantisima

    gracias

    Responder a adalberto →
  31. Djane / Hace 5 años /

    Hola necesito ayuda quiero colocar un banner en mi Blogspot.com pero es que no entiendo nada de ello y me preocupa que algo me salga mal! quien pueda ayudarme se lo agradeceria!

    Responder a Djane →
  32. Jonathan / Hace 5 años /

    muy bueno el código pero tengo un pequeño problema, funciona perfecto en firefox, opera, chrome. pero en internet explorer no me funciona, me baja mi sidebar

    Responder a Jonathan →
  33. javirol / Hace 5 años /

    Esta bastante bien, aunque estaría bien ampliarlo para que los posicionara de forma aleatoria.

    Responder a javirol →
  34. Moises Gomez / Hace 4 años /

    Excelente instructivo!, muy claro y amigable, gracias por la aportacion!

    Responder a Moises Gomez →
  35. kote crisosto / Hace 4 años /

    hola tengo una pregunta el espacio en mi en mi barra es de 200px no se puede achicar el banner

    Responder a kote crisosto →
  36. maripalito / Hace 4 años /

    no entiendo :( :(
    apenas tengo 10 años no entiendo eso

    Responder a maripalito →
  37. Erika / Hace 4 años /

    hola necesitaria poder poner un banner haciendo propaganda de otra pagina y que cuando apreten el cursor sobre ese banner puedan ir directamente a esa pagina independiente de mi blog . como podria hacerlo, soy nueva en esto y hay palabras tecnicas que no entiendo , necesito que me ayuden seria muy util para mi. muchas gracias . Erika

    Responder a Erika →
  38. Alfredo / Hace 3 años /

    Buenas tardes, busqué el código ]]> dentro de style.css en wordpress y no me aparece en donde puedo insertar el código para poder editar los estilos?

    Muchas gracias

    Responder a Alfredo →
  39. Evy / Hace 3 años /

    Hola tengo el deseo de instalar un banners y donde encontrar diferentes diseños? NO tengo IDEA DE NADA necesito tu ayuda. Gracias

    Responder a Evy →

Responder

¡Gracias por dejar tu opinión! Por favor procura que tus comentarios estén dentro tema, que no sean promocionales (spam), ilegales u ofensivos, de otro modo, serán borrados. Todos los enlaces serán moderados y la URL indicada NO será enlazada.

Blog and Web es un blog de Blógstica. Hospedado desde 2008 en Liquid Web.

Términos de uso - Política de privacidad