Chica Blogger

La noticia del día es que Blogger ha sacado del beta su buscador, que antes sólo podía ser añadido vía Blogger in Draft. El buscador permite tres opciones independientes: buscar en tu blog, en los sitios que hayas enlazado, y en internet.

En sí, la gran novedad es que el gadget de búsqueda esté disponible para todos, lo cual puede ser de enorme utilidad para quienes no saben cómo añadir un buscador a su blog. Era algo que le hacía falta a Blogger.

Desde que comencé a ver el buscador en algunos blogs, hace quizá un par de meses, no me llamó mucho la atención. Me pareció antiestético; quizás innecesario considerando las infinitas posibilidades de personalización de un buscador externo. Sin embargo, cambié un tanto (no totalmente) de parecer al descubrir la posibilidad de hacer pequeños cambios en el formulario.

Por ejemplo:

1. Eliminar el texto y el logo de Google (“con la tecnología de Google”):

.gsc-branding-text, .gsc-branding-img-noclear {
display:none;
}

2. Cambiar las propiedades del botón:

input.gsc-search-button {
color: #FFF;
background: #FF55AA;
border: 1px solid #ff0084;
}

Aquí también puedes cambiar las propiedades del texto (por ejemplo: font-weight:bold; font-size: 13px), o poner una imagen de fondo (background: url [tu-imagen] no-repeat), añandiendo otros atributos como “height” y “width” (un botón debe tener aproximadamente 60×20 píxeles).

3. Algunos cambios en la caja de búsqueda:

input.gsc-input {
color: #ff0084;
}

Puedes cambiar el color del texto, y también el fondo, pero no el borde. Por alguna extraña razón, Blogger no me deja hacer esto, a pesar de que las propiedades por defecto para el borde (de ese selector) son: border:1px solid #BCCDF0.

El resultado:

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.

Si usas Blogger, seguro odiarás tanto como yo los errores BX. Un error BX suele venir sin que lo llamen (e irse del mismo modo que apareció), pero hay soluciones prácticas para evitar la espera y para no desesperarse y no saber qué hacer en estos casos.

Los errores en Blogger no sólo se producen al cambiar una plantilla o al tratar de editarla, sino también al intentar subir imágenes, editar tu perfil o elegir opciones de configuración erróneas. En general, hay seis formas de solucionar estos errores:

1) Cambiar de navegador (la clásica recomendación de Francisco en Blog and Web).
2) Eliminar todos los artilugios de tu plantilla actual antes de subir una nueva (haciendo un respaldo).
3) Borrar cookies y volver a intentar (lee “Adiós al error bX de Blogger“).
4) Remover manualmente los códigos de los artilugios de la nueva plantilla que quieres instalar, como recomienda Iván en Zona Cerebral.
5) Simplemente esperar y volver a intentar más tarde.
6) Ponerte en contacto con Blogger (sí, es verdad que responden!).

Pero sucede que cada error es diferente. Por increíble que parezca, para cada error hay una solución específica. Pizcos hizo una gran recopilación que muestra la solución para cada uno de estos errores:

• BX Errors Blogger Significado y soluciones
• BX Errors Blogger Significado y soluciones 2

Como para guardar bajo la cabecera.

Recientemente Blogger anunció en BloggerBuzz la creación de un foro para recibir sugerencias de sus usuarios, conscientes de que muchas veces las mejores ideas provienen de los millones de personas que utilizan el servicio. Por lo tanto, puede ser una buena oportunidad para sugerir nuevas características y gadgets que quieres que sean incorporados próximamente.

Algunos cambios que podría hacer Blogger (según quienes han posteado en el foro):

• Mejoras al sistema de comentarios. Responder a comentarios específicos, votar comentarios. Integración de gravatar.
• Opción de suscribirse a los comentarios de cada post (notificación vía e-mail).
• Inclusión de páginas estáticas, como en WordPress.
• Filtros anti-spam.
• Feedburner accesible desde el panel de Blogger.
• “Leer más” incluido en las plantillas.
• Un perfil Google en vez de un perfil Blogger.
• Posibilidad de subir múltiples archivos, como javascript.
• Más plantillas, una gran variedad. especialmente para quienes no saben mucho de HTML ni CSS. Plantillas con tres columnas.
• Jerarquía para categorías (subcategorías).

En general, estoy muy de acuerdo con las peticiones y sugerencias que he visto hasta el momento (curiosamente, muchas peticiones me suenan a “por favor, conviertan Blogger en un WordPress.com con CSS editable”). Sin embargo, tengo mis propias sugerencias (dejé mis posts por ahí, como ChicaBlogger.com): Añadir tags (etiquetas), más plantillas (completamente widgetizadas, sería ideal que tuvieran una barra de menú), una navbar que sea sólo vista por el dueño de cada blog, e incorporación de gadgets más útiles que la gran cantidad de juegos que hay (posts populares, Twitter, Flickr, por ejemplo).

El foro estará abierto hasta el 14 de mayo, y todo aquel que quiera aportar puede hacerlo (en inglés) con su cuenta de Gmail, ya sea contribuyendo con nuevas ideas o votando por las ya existentes.

Sería genial que Blogger nos sorprendiera con un nuevo diseño (nunca se sabe), e incorporara gran parte de las mejoras sugeridas. Al menos, pareciera que sí quieren escucharnos. Bien dicen que en pedir, no hay engaño.

Hace un tiempo leí un artículo que decía que Blogger no es bueno para el SEO porque no permite incluir etiquetas, sólo categorías. No obstante, a pesar de que para Blogger no existan plugins como All in one SEO pack, siempre es posible aplicar pequeños trucos para optimizar el posicionamiento en buscadores.

Magz Network publicó una pequeña guía SEO que puede aplicarse fácil y rápidamente a cualquier plantilla, y que se basa fundamentalmente en utilizar los siguientes trucos:

1. Cambiar la forma en que se muestran los títulos del blog

Normalmente, éstos se muestran como Título del blog: título del post (al ver posts individuales), pero la idea es que éstos se muestren como Título del post | Título del blog. Para ello, es necesario buscar al inicio de la plantilla:

<title><data:blog.pageTitle/></title>

Y reemplazar por

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<title><data:blog.pageName/> | <data:blog.title/></title>
<b:else/>
<title><data:blog.pageTitle/></title>
</b:if>

2. Meta keywords & meta description

Añadir meta keywords y meta description sólo para la página de inicio, con condicionales. De esta forma, Google no detecta meta keywords y description duplicados.

Para ello, buscar (también al inicio de la plantilla):

<b:skin><![CDATA[/*

Y añadir el siguiente código antes:

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<meta name="description" content="La descripción de tu blog" />
<meta name="keywords" content="keyword1, keyword2, keyword3, keyword4, keyword5" />
</b:if>

3. Cambiar encabezados (en los títulos de los posts)

Usar encabezados H1 para los títulos de los posts (con condicionales), en vez de H2 ó H3 (como en la plantilla mínima). Para ello, es necesario hacer dos cambios:

En los estilos (en la plantilla mínima), buscar algo como:

.post h3 {
  margin:.25em 0 0;
  padding:0 0 4px;
  font-size:140%;
  font-weight:normal;
  line-height:1.4em;
  color:$titlecolor;
}
 
.post h3 a, .post h3 a:visited, .post h3 strong {
  display:block;
  text-decoration:none;
  color:$titlecolor;
  font-weight:normal;
}
 
.post h3 strong, .post h3 a:hover {
  color:$textcolor;
}

Reemplazar por:

 
.post h3, .post h1 {
  margin:.25em 0 0;
  padding:0 0 4px;
  font-size:140%;
  font-weight:normal;
  line-height:1.4em;
  color:$titlecolor;
}
 
.post h3 a, .post h3 a:visited, .post h3 strong {
  display:block;
  text-decoration:none;
  color:$titlecolor;
  font-weight:bold;
}
 
.post h1 a, .post h1 a:visited, .post h1 strong {
  display:block;
  text-decoration:none;
  color:$titlecolor;
  font-weight:bold;
}
 
.post h1 strong, .post h1 a:hover {
  color:$textcolor;
}

Luego, con los artilugios expandidos, buscar el siguiente código:

<b:if cond='data:post.title'>
<h3 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>

Y reemplazar por:

<b:if cond='data:post.title'>
 
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<h1 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h1><b:else/>
<h3 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>
 
</b:if>

4. Cambiar el encabezado principal (título del blog)

Buscar:

#header h1{
  margin:5px 5px 0;
  padding:15px 20px .25em;
  line-height:1.2em;
  text-transform:uppercase;
  letter-spacing:.2em;
  font: $pagetitlefont;
}

Cambiar por:

#header h1, #header h2 {
  margin:5px 5px 0;
  padding:15px 20px .25em;
  line-height:1.2em;
  text-transform:uppercase;
  letter-spacing:.2em;
  font: $pagetitlefont;
}

Y cambiar el contenido de la sección header-wrapper (etiquetas “div” incluidas) por:

<div id='header-wrapper'>
      <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Plantilla de pruebas (cabecera)' type='Header'>
<b:includable id='title'>
  <b:if cond='data:blog.pageType == &quot;index&quot;'><h1><a expr:href='data:blog.homepageUrl'><data:title/></a></h1>
  <b:else/><h2><a expr:href='data:blog.homepageUrl'><data:title/></a></h2></b:if>
</b:includable>
<b:includable id='description'>
 <div class='description'>
    <p class='description'><data:description/></p>
  </div>
</b:includable>
<b:includable id='main'>
  <b:include name='title'/>
  <b:include name='description'/>
</b:includable>
</b:widget>
</b:section>
    </div>

Y para finalizar, siempre es recomendado mostrar los posts relacionados y botones para redes sociales.

Fuente: Complete SEO Guide for Blogger Templates.