Colocar banners de 125 x 125

Es muy común el uso de espacios de 125 x 125 pixeles para ofrecer la colocación de banner publicitarios o incluso para enlazar alguna web amiga que queramos destacar.

Utilizar un espacio en nuestro blog para este tipo de banner no es muy complicado, usando HTML y CSS tendríamos distintas posibilidades de hacerlo. Vamos a ver como hacerlo usando una lista.

Añadiendo el espacio para banners en un gadget

[1] En Edición HTML colocamos este código CSS antes de la etiqueta ]]></b:skin> de nuestra plantilla.

/*----------Banner 125x125-----------*/

.banner{
margin: 0 0 10px 0;
padding: 10px auto 10px;
width:100%;
float:center;
}
.banner ul {
margin: 0px 0px;
padding: 10px 25px;
list-style-type:none;
}
.banner li{
height:125px;
width:125px;
margin: 6px 6px ;
padding:5px 5px;
list-style:none;
display : block;
display:inline;
float:right;
}
.banner li a:link, .banner li a:visited {
text-decoration: none;
}

Guardamos los cambios.

[2] En la parte de Diseño de nuestro panel pinchamos en añadir un nuevo gadget HTML y dentro colocamos este código:

<div class="banner">
<ul>
<li>
<a href="http://TU-ENLACE-AQUI" target="_blank"><img border="0" alt="ads" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTqM1RfLWyZfenxmLHBdOYc7KjkWgw8xlV-Z6row4U5SbB3Tb5GxGDWR4KPkxoum4eK-_Z2nNaCUcitBtQqaf-5GR2hH5m0U6vf0oX9lSJvO1HglThrZsW3erZrhoU38i5A82NwFGbdpw/s320/banner125.png"/></a>
</li>
<li>
<a href="http://TU-ENLACE-AQUI" target="_blank"><img border="0" alt="ads" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTqM1RfLWyZfenxmLHBdOYc7KjkWgw8xlV-Z6row4U5SbB3Tb5GxGDWR4KPkxoum4eK-_Z2nNaCUcitBtQqaf-5GR2hH5m0U6vf0oX9lSJvO1HglThrZsW3erZrhoU38i5A82NwFGbdpw/s320/banner125.png"/></a>
</li>

<li>
<a href="http://TU-ENLACE-AQUI" target="_blank"><img border="0" alt="ads" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTqM1RfLWyZfenxmLHBdOYc7KjkWgw8xlV-Z6row4U5SbB3Tb5GxGDWR4KPkxoum4eK-_Z2nNaCUcitBtQqaf-5GR2hH5m0U6vf0oX9lSJvO1HglThrZsW3erZrhoU38i5A82NwFGbdpw/s320/banner125.png"/></a>
</li>
<li>
<a href="http://TU-ENLACE-AQUI" target="_blank"><img border="0" alt="ads" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTqM1RfLWyZfenxmLHBdOYc7KjkWgw8xlV-Z6row4U5SbB3Tb5GxGDWR4KPkxoum4eK-_Z2nNaCUcitBtQqaf-5GR2hH5m0U6vf0oX9lSJvO1HglThrZsW3erZrhoU38i5A82NwFGbdpw/s320/banner125.png"/></a>
</li>
</ul>
</div>

Añadiendo una nueva sección sobre las sidebar

Esta opción solo será posible si en nuestro blog tenemos dos sidebar en el mismo lado.

[1] En la parte de Edición HTML de nuestro panel, añadimos este código en el CSS de la plantilla antes de ]]></b:skin>:

/* Sidebar - anuncios */
#sidebar-publicidad {
float : right;
margin-left:4px;
width : 420px;
background:#ffffff;
font : 14px Georgia Serif;
}
#sidebar-publicidad .widget {
list-style-type : none;
margin : 5px 0 5px 0;
padding : 0;
border: 1px solid #ddd;
}
.sidebar-publi {
float: left;
width: 420px;
margin-left:5px;
margin-bottom: 5px;
}
.sidebar-anuncio {
padding: 5px;
float: left;
}
#sidebar-publicidad p {
background:url(http://1.bp.blogspot.com/_8PJ-pgoBhWQ/SQW1N2J-hII/AAAAAAAAEjU/cwSlppBaB4Y/s320-R/stock_draw-line-ends-with-arrow_24x24.png) no-repeat scroll left 50%;
margin-top:5px;
text-align:left;
padding-left:25px;
}

[2] Más abajo, en el código HTML de la plantilla, localizamos el comienzo de la sección de la sidebar que ha de ser una línea más o menos como esta:

<div id='sidebar-wrapper'>

[3] Sobre esa línea pegamos el código para la nueva sección:

<div id='sidebar-publicidad'>
<b:section class='sidebar-publicidad' id='sidebar-publicidad' preferred='yes'>
<b:widget id='HTML99' locked='false' title='' type='HTML'/>
</b:section></div>

Guardamos los cambios y si todo ha salido según lo previsto, tendremos que ver algo así en la parte de Diseño:

[4] Pinchamos en ese nuevo gadget que tenemos ahora disponible y pegamos este código dentro:

<div class="sidebar-publi">
<div class="sidebar-anuncio"><a href="#">
<img border="0" src="http://4.bp.blogspot.com/_8PJ-pgoBhWQ/SVWEjzCtrSI/AAAAAAAAF50/rJzVLrzgllc/s320/banner_125x125.jpg"/></a></div>

<div class="sidebar-anuncio"><a style="text-decoration: none;" href="#"><img border="0" src="http://4.bp.blogspot.com/_8PJ-pgoBhWQ/SVWEjzCtrSI/AAAAAAAAF50/rJzVLrzgllc/s320/banner_125x125.jpg"/></a></div>

<div class="sidebar-anuncio"><a style="text-decoration: none;" href="#"><img border="0" src="http://4.bp.blogspot.com/_8PJ-pgoBhWQ/SVWEjzCtrSI/AAAAAAAAF50/rJzVLrzgllc/s320/banner_125x125.jpg"/></a></div>
<div class="clear"></div>
<p>Tu publicidad aquí.<a href="mailto:tu email" title="Publicidad aqui"> Envía un email.</a></p></div>

Resultado:

Notas:

En ambos casos cada uno ha de modificar los códigos según sus necesidades, teniendo especial consideración con el espacio disponible, es decir, si nuestra sidebar mide menos de 270px de ancho aproximadamente, difícilmente vamos a poder colocar los banner de dos en dos sin antes hacer los cambios necesarios en la plantilla.

He incluido las imágenes en los dos ejemplos, podéis usarlas sin problemas ya que están subidas a Blogger.