Iconos

Iconza: Íconos personalizables y libres de derechos

Publicado por Claudia en mayo 27, 2009

iconza

Iconza es el nuevo proyecto de Turbomilk (si alguna vez usaste Iconfinder o si viste algunos de sus íconos en Smashing Magazine, probablemente te suene), que consiste en una serie de  íconos personalizables pensados en bloggers y diseñadores. Puedes modificar a tu antojo el color de los íconos, cambiarlos de tamaño (16x, 24x y 32x píxeles), elegir el fondo y descargarlos en fomato *.png (set completo o íconos individuales).

No sólo es una herramienta curiosa y entretenida de usar; la gracia es obtener íconos que se adecuen a los colores de tu blog, y poder usarlos tanto para fines personales como comerciales.

Vía | Enlazando Web

Tags:
Free Blogger Templates

Cupcake: Plantilla Blogger para blogs de comida

Publicado por Claudia en mayo 26, 2009

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.

cupcake-blogger

(DEMODESCARGA)

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.

Tags:
Productos Google

Analycator: Haz públicas tus estadísticas de Analytics

Publicado por Claudia en mayo 23, 2009

google-analycator

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.

Tags: , ,
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

<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: ,
Herramientas

¡Sonría, lo estamos grabando!

Publicado por Claudia en mayo 19, 2009

hidden-webcam

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!

Tags: