Chica Blogger

Otra plantilla para Blogger adaptada por mí, a partir de un theme para WordPress de Simply WP. Es muy femenina, ideal para blogs de postres, cocina, recetas o simplemente blogs personales.

(DEMO – DESCARGA)

Características:

• 3 Columnas, barra lateral derecha
• Menú widgetizado, fácilmente configurable
• Buscador interno añadido
• Variables principales cambiables desde el panel
• SEO Friendly
• Probada en IE6, IE7, IE8, Firefox, Chrome y Opera

*Si te gustó el theme para WordPress, puedes descargarlo desde aquí.

*19/07/09 Cambio en un pequeño error que había en el archivo. Error in archive fixed.

Para quienes utilizamos Google Analytics para el seguimiento de nuestras estadísticas, es fantástica la noticia de que podemos hacer público nuestro número de visitantes diarios. Se trata de la creación del plugin “Analycator“, que añade el código javascript necesario para autorizar el acceso a Analytics desde cualquier blog (WordPress), y que permite añadir un contador que muestra las visitas del día anterior. Es una forma simple (y fácil de configurar) de hacer visibles tus estadísticas, dándote mayor credibilidad frente a tus anunciantes.

• Más información: Google Analycator (Spiral Web Consulting).

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:

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


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

A través de Wwwhat’s New, conocí Clixpy, una aplicación web que te permite grabar todo lo que hacen quienes visitan tu blog: movimientos del mouse, clicks, scrolling, tipeo, etc.
Viendo reviews en la red acerca de éste y otros sitios similares, me encuentro con la pregunta de si es ético o no el uso de este tipo de programas. Tanto Clixpy como programas similares, son capaces de seguir cada uno de los movimientos de tus visitantes, registrando su IP, sistema operativo, navegador, resolución de pantalla y país, pero es imposible que accedan a sus datos personales; sin embargo, considerando que un formulario de contacto (o un simple formulario de respuesta) me provee de los mismos datos, los programas espía están dentro de márgenes éticos, porque no violan la privacidad de las personas.

Clixpy – Características

El objetivo de Clixpy no es precisamente jugar al blogger vouyeurista, sino mejorar la usabilidad de un blog o sitio web conociendo el comportamiento de sus usuarios. Añadiendo un código javascript (que no pesa más de 5kb), puedes “espiar” a tus visitantes y luego revisar sus movimientos en video. De esta manera, puedes obtener cuantiosos detalles acerca de la usabilidad de tu blog, lugares donde tus visitas hacen click (por ejemplo, anuncios de Adsense) y quizás problemas de navegación posibles de mejorar.

La aplicación no es gratuita (puedes comprar 100 capturas de video por $5 USD), pero el registro te permite acceder a 10 capturas sin tener que pagar. Además, puedes ver un demo de la aplicación antes de registrarte.

Userfly, una alternativa

Si 10 capturas de video no son suficientes, Userfly te ofrece 110 sesiones adicionales, con el cupón KIKABINK. Estadísticamente hablando, 110 + 10 no es una muestra demasiado grande, pero basta y sobra para hacer un estudio de tu sitio, y quizás extraer importantes conclusiones para introducir mejoras en él.

Si te animas a probar, tal vez puedas encontrarte con alguna sorpresa, o con cosas muy curiosas. Por ahora, sólo puedo decir: sonríe, que te estoy grabando!

En Social Web Blog, Google anuncia la creación de un nuevo gadget para Google Friend Connect, que anima a tus lectores a que compartan tus posts en redes sociales (Facebook, Twitter, Menéame, otras) o sus contactos de correo electrónico.

Puedes añadir un botón a tus entradas individuales y un widget configurable (número de ítems, ancho, colores) que muestra los posts con más recomendaciones, viendo qué personas recomendaron tus artículos.

Cómo integrar

1. Accede a Google Friend Connect con tu cuenta Google, y añade la URL de tu blog.

2. Selecciona la opción Social Gadgets.

3. Selecciona el gadget “Recommendation“.

4. Configura el gadget y el botón a añadir en cada post.

5. Genera los respectivos códigos HTML. El primero corresponde al widget que puedes añadir a tu sidebar (sólo copiar y pegar); el segundo, al botón (button) para incluir al final de cada post.

6. Copia y pega el código correspondiente al botón en el archivo single.php (en WordPress) en el lugar que quieres que se muestre, o en Blogger de la siguiente manera:

1) Accede a la edición de HTML y expande los artilugios.
2) Busca la sección “div class=’post-footer-line post-footer-line-3′” y copia y pega el código correspondiente al botón justo debajo (o donde prefieras) usando condicionales:

<b:if cond='data:blog.pageType == "item"'>
 
código-del-botón
 
</b:if>