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

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

<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.

Compártelo!
7 Comentarios en Una manera inteligente de manejar ads de 125×125 px en Blogger
  1. Información Bitacoras.com…

    Valora en Bitacoras.com: 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 po…

  2. Alvaris Falcon dice:

    A very great new discovery to set up and install an 125×125 ads easier, this would surely improve the user experience of the template!

  3. elQuique dice:

    Muy bueno el tutorial 🙂

    Si bien no uso blogger se que las personalizaciones son un gran drama.

    Y está sobre todo, esta buena porque atiende a 2 temas fundamentales, personalizar para diferenciarnos y rentabilizar 🙂

  4. Eder dice:

    Hola, gracias por el tutorial, es una buena aplicación y ciertamente la mejor que he visto hasta ahora, solo una duda. Es posible acomodar el bloque de anuncios en cualquier parte de la barra lateral? Ya que de esta forma queda en la parte alta de la barra, quisiera poder manipularla en ese sentido. Gracias.

  5. Claudia dice:

    Eder: Como no es un solo widget, no puedes moverlo como si fuese un widget más. En teoría, puedes crear la sección para poner banners en cualquier parte de tu sidebar, pero tienes que hacerlo en forma manual. Es algo más complejo de explicar e implementar 🙁

  6. dreg101 dice:

    Excelente el tutorial, me gusto mucho como lo explicaste, y ya quedo implementado en mi blog 😀 Gracias!

  7. JN dice:

    yo no encuentro

    porque??

Deja tu comentario
Tu Comentario