Banners de 125 x 125 en la sidebar

Houdini me preguntaba como añadir unos banners de 125x125, hay varias formas de hacerlo y casi todas nos llevan al mismo resultado.

Voy a explicar como lo hice pero recomiendo visitar a Francisco y Rosa que explicaban y muy bien los pasos a seguir.

Los banners miden 125x125 a eso hay que sumarles el espacio que dejamos entre ellos y si añadimos algún borde para los estilos, no estaría mal probar antes en otro blog y una vez que tenemos las medidas ajustadas añadirlos al blog donde pensamos incorporar la publicidad.

Los podemos añadir directamente a la plantilla aunque yo prefiero utilizar un gadget por aquello de no recargar tanto y evitar posibles errores en las modificaciones.

Editamos un gadget de HTML y en su interior añadimos lo siguiente:

<div class="banner img">

<a href="#" title="Gem@ BLOG"><img style="margin:0px 5px 5px 0px;" alt="Gem@ BLOG" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-6iVNCGoAG-a0BVLe7VE2_Wxd6g9BNA2_UrpBZUfEFmvwzQjgN6ctdk526oxR-Ml5PazYEa5neYFuSO-G-3ToswWkcrtHcOFywvNGqnUTL9wT_Y5OihN-TiSpGZgIpgw8IZ3JvatzDQc/s320/J2E0353Z16.png"/></a>

<a href="#" title="Gem@ BLOG"><img style="margin:0px 0px 5px 0px;" alt="Gem@ BLOG" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-6iVNCGoAG-a0BVLe7VE2_Wxd6g9BNA2_UrpBZUfEFmvwzQjgN6ctdk526oxR-Ml5PazYEa5neYFuSO-G-3ToswWkcrtHcOFywvNGqnUTL9wT_Y5OihN-TiSpGZgIpgw8IZ3JvatzDQc/s320/J2E0353Z16.png"/></a>

<a href="#" title="Gem@ BLOG"><img style="margin:0px 5px 0px 0px;" alt="Gem@ BLOG" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-6iVNCGoAG-a0BVLe7VE2_Wxd6g9BNA2_UrpBZUfEFmvwzQjgN6ctdk526oxR-Ml5PazYEa5neYFuSO-G-3ToswWkcrtHcOFywvNGqnUTL9wT_Y5OihN-TiSpGZgIpgw8IZ3JvatzDQc/s320/J2E0353Z16.png"/></a>

<a href="#" title="Gem@ BLOG"><img style="margin:0px 0px 0px 0px;" alt="Gem@ BLOG" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-6iVNCGoAG-a0BVLe7VE2_Wxd6g9BNA2_UrpBZUfEFmvwzQjgN6ctdk526oxR-Ml5PazYEa5neYFuSO-G-3ToswWkcrtHcOFywvNGqnUTL9wT_Y5OihN-TiSpGZgIpgw8IZ3JvatzDQc/s320/J2E0353Z16.png"/></a>

</div>

Ya tenemos los banners en la sidebar, si tenemos necesidad de modificar el espacio entre ellos lo haremos en margin recordando que lo estamos modificando en el siguiente orden: arriba, derecha, debajo, izquierda.

» En title y alt sustituimos Gem@ BLOG por el nombre de la publicidad que añadimos.

» El asterisco # lo sustituimos por la url que enlazamos ya sea la url de la publicidad, una entrada donde informamos sobre los requisitos para contratar nuestro espacio o un enlace al correo para ponerse en contacto con nosotros.

» De ser lo últimos el enlace sería:

<a href="mailto:Tu dirección de correo aquí">

» Para el ejemplo he creado una imagen que podemos sustituir por cualquier otra.

» Para añadir un borde lo podemos hacer en plantilla  Edición de HTML, justo antes de ]]></b:skin>

.banner img{

width:125px;

padding:3px 2px ;

list-style:none;

display : block;

overflow:hidden;

float:left;

background:#fff ;

border:1px solid #ccc;

}