Cómo poner banners de 125×125

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.