Blogger

Una manera inteligente de manejar ads de 125×125 px en Blogger

Publicado por Claudia en mayo 22, 2009

Los anuncios de 125×125 píxeles son ampliamente usados, y son el tamaño preferido a la hora de buscar patrocinantes para un blog.

En Blogger, añadir ads de 125×125 píxeles es algo no muy complicado de hacer si sabes un poco de CSS y HTML, o sólo con un poco de HTML básico. No obstante, en una plantilla de Templates Novo Blogger descubrí una manera de administrar los anuncios fácilmente, y sin tener que recurrir a la edición de HTML cada vez que quieras editarlos.

La técnica es simple, y consiste solamente en añadir widgets de imagen, como el siguiente:
widget-imagen
En un widget de imagen tenemos 4 campos: Título, Pie de Foto, Enlace e Imagen. Con la técnica de Templates Novo Blogger, podemos utilizar estos dos últimos campos, añadiendo una imagen desde el escritorio y configurando el enlace.

Dado que añadir y quitar

Para ello, es necesario eliminar las siguientes secciones del código de un widget de imagen:

<b:if cond='data:title != &quot;&quot;'>
      <h2><data:title/></h2>
    </b:if>

Y

<b:if cond='data:caption != &quot;&quot;'>
        <span class='caption'><data:caption/></span>
      </b:if>

Ahora, ni el título de la imagen ni la descripción de la misma serán mostradas arriba y abajo del widget, respectivamente, por lo cual podemos dar otra utilidad a esos campos…

Recapitulando (mini-tutorial)

Si deseas añadir un bloque de anuncios de 125×125 píxeles a tu plantilla, añade los siguientes códigos:

1. Antes de ]] >< /b:skin >

#anuncios{
  margin: 0 auto;
  padding: 0 0 0;
  width: 290px;
  height: 280px;}
 
.anuncios .widget {
  margin: 3px;
  padding: 3px;
  width: 125px;
  height: 125px;
  float: left;
  border: 1px solid #ff0000;}
 
.anuncios .widget:hover {
  border: 1px solid #000;}

* Necesitas que tu sidebar tenga al menos 290 píxeles de ancho. Modifica los colores de los bordes según tus preferencias.

2. Añade bajo < div id='sidebar-wrapper' >

<div id='anuncios'>
<b:section class='anuncios' id='anuncios' showaddelement='no'>
<b:widget id='Image3' locked='true' title='' type='Image'>
<b:includable id='main'>
        <div class='widget-content'>
      <b:if cond='data:link != &quot;&quot;'>
        <a expr:href='data:link'>
          <img expr:alt='data:title' expr:title='data:title' expr:height='data:height' expr:id='data:widget.instanceId + &quot;_img&quot;' expr:src='data:sourceUrl' expr:width='data:width'/>
        </a>
      <b:else/>
        <img expr:alt='data:title' expr:title='data:title' expr:height='data:height' expr:id='data:widget.instanceId + &quot;_img&quot;' expr:src='data:sourceUrl' expr:width='data:width'/>
      </b:if>
      <br/>
        </div>
    <b:include name='quickedit'/>
  </b:includable>
</b:widget>
<b:widget id='Image4' locked='true' title='' type='Image'>
<b:includable id='main'>
        <div class='widget-content'>
      <b:if cond='data:link != &quot;&quot;'>
        <a expr:href='data:link'>
          <img expr:alt='data:title' expr:title='data:title' expr:height='data:height' expr:id='data:widget.instanceId + &quot;_img&quot;' expr:src='data:sourceUrl' expr:width='data:width'/>
        </a>
      <b:else/>
        <img expr:alt='data:title' expr:title='data:title' expr:height='data:height' expr:id='data:widget.instanceId + &quot;_img&quot;' expr:src='data:sourceUrl' expr:width='data:width'/>
      </b:if>
      <br/>
        </div>
    <b:include name='quickedit'/>
  </b:includable>
</b:widget>
<b:widget id='Image5' locked='true' title='' type='Image'>
<b:includable id='main'>
        <div class='widget-content'>
      <b:if cond='data:link != &quot;&quot;'>
        <a expr:href='data:link'>
          <img expr:alt='data:title' expr:title='data:title' expr:height='data:height' expr:id='data:widget.instanceId + &quot;_img&quot;' expr:src='data:sourceUrl' expr:width='data:width'/>
        </a>
      <b:else/>
        <img expr:alt='data:title' expr:title='data:title' expr:height='data:height' expr:id='data:widget.instanceId + &quot;_img&quot;' expr:src='data:sourceUrl' expr:width='data:width'/>
      </b:if>
      <br/>
        </div>
    <b:include name='quickedit'/>
  </b:includable>
</b:widget>
<b:widget id='Image6' locked='true' title='' type='Image'>
<b:includable id='main'>
        <div class='widget-content'>
      <b:if cond='data:link != &quot;&quot;'>
        <a expr:href='data:link'>
          <img expr:alt='data:title' expr:title='data:title' expr:height='data:height' expr:id='data:widget.instanceId + &quot;_img&quot;' expr:src='data:sourceUrl' expr:width='data:width'/>
        </a>
      <b:else/>
        <img expr:alt='data:title' expr:title='data:title' expr:height='data:height' expr:id='data:widget.instanceId + &quot;_img&quot;' expr:src='data:sourceUrl' expr:width='data:width'/>
      </b:if>
      <br/>
        </div>
    <b:include name='quickedit'/>
  </b:includable>
</b:widget>
</b:section>
</div>

*En este código, ya están eliminados los campos de Título y Pie de foto para cada widget de imagen, y añadí el atributo “title” a cada uno de ellos. Se mostrarán 4 banners.

El Resultado (Screenshots)

1. Widgets editables desde la plantilla
plantilla

2. Banner widget
banner-widget

  • En Título puedes poner el nombre del sitio y/o su descripción (ej: Recursos para bloggers). Facilita la administración desde el panel.
  • En Pie de foto puedes poner el período de tiempo en que deberá estar activo el banner (no será mostrado públicamente).

3. Mira el demo!

Concluyendo, no necesito decir que es la forma más fácil de administrar banners en Blogger; lejos, lo más cercano a un plugin WordPress. Inclusive, puedes adaptar la técnica para incluir banners de otro tamaño (100×100 píxeles, por ejemplo) o incluir más filas o columnas.

Tags: ,