Mejora para compartir entradas en Google+

Así como hay una manera de mejorar la forma de compartir las entradas en Facebook, podría ser que hubiera otra para hacer lo mismo en Google+. Al igual que la anterior, es una parte no demasiado documentada del API sobre la cual hay muchos foros que intentan poner algo de luz En este caso, el código es menos engorroso ya que no tiene opciones (o nadie ha descubierto si las hay); sólo se trata de una dirección URL a la cual se le adosa la dirección de la entrada a compartir, lo que daría como resultado algo como esto:

Al carecer de alternativas extras, tanto el resumen como la imagen, dependerán de Blogger ya que de poco sirve usar etiquetas META OpenGraph que es lo que leen los distintos servicios ya que no podemos modificarlas para cada entrada; aunque ahora la etiqueta META description puede ser personalizada, no ocurre lo mismo con la imagen. De todas maneras, esto es mejor que nada. La URL básica es:

https://plus.google.com/share?url=direccion_a_compartir

Así que esto, permitiría abrir la ventana del ejemplo:
https://plus.google.com/share?url=http://vagabundia.blogspot.com/2012/03/las-opciones-de-las-etiquetas-meta.html

Y para incluirlo en al plantilla, deberíamos colocar una URL dinámica, es decir, una etiqueta de Blogger que indique la dirección de la entrada: data:post.url Por lo tanto, colocando lo siguiente en alguna parte del footer de las entradas, tendríamos un botón para compartir en Google+

<a expr:onclick='&quot;window.open(\&quot;https://plus.google.com/share?url=&quot; + data:post.url + &quot;\&quot;,\&quot;gplusshare\&quot;,\&quot;toolbar=0,status=0,width=548,height=325\&quot;);&quot;' href='javascript:void(0);' rel='nofollow' title='compartir en Google+'> texto o image </a>

1Al parecer, algunos usuarios de Blogger tienen problemas para acceder a las entradas marcadas como Borradores" cuando usan la nueva interfaz; no se ve la opción en el menú.

Según The Real Blogger Status, el problema se soluciona con facilidad aunque, obviamente, es un error del sistema que imagino que alguien tendrá que resolver.

Para intentarlo, hay que editar cualquier entrada ya publicada y guardarla como Borrador. Luego, volver a editar esa misma entrada y publicarla otra vez.

Aparentemente, eso hará que vuelva a aparecer la lista en el menú pero ... temporalmente; la próxima vez que se entre a Blogger, a menos que ellos hayan arreglado el fallo, la lista de borradores volverá a "desaparecer" y habrá que hacer otra vez lo mismo.

2Para quienes usen el gadget de Seguidores y este se vea en blanco, pueden intentar la solución que muestra Ciudad Blogger que también es sencilla.

Lo que debe hacerse es cambiar el nombre del blog la primera pantalla de Configuración de Blogger. Guardar el cambio y volverlo a cambiar por el original. Hecho eso, el gadget debería volver a tener contenido.

Lo mismo ocurre si en lugar de cambiar el nombre del blog, se cambia la dirección url pero, el nombre es un proceso menos traumático.

Durante las pruebas para crear una página de error con las nuevas opciones de Blogger, siempre me encontraba con una traba: no funcionaba (menuda traba). Vi el ejemplo que mostraba Emilio Cobos y todo se veía perfecto ¿por qué no conseguía hacer los mismo y que apareciera un mísero texto?

Pensé entonces, que aparentemente, era algo que sólo funcionaba en las plantillas nuevas y que Blogger no lo informaba, cosa que siempre es probable ya que suelen ser mudos y no informar nada. Sin embargo, seguían mis dudas y llegó Felipe para despejarlas en un comentario:

"Para que funcione la página de error que se inserta desde la configuración de Blogger el siguiente includable debe aparecer dos veces, para la versión móvil, y para la de escritorio:
<b:include data='top' name='status-message'/>
Creo que hace un tiempo muchos quitamos o comentamos ese código para ocultar el mensaje que aparecía en la navegación por etiquetas."

Y es verdad. En mi caso, esos códigos estaban pero, lo que faltaba era el includable ya que lo había eliminado y se veía esto:

<b:includable id='status-message'/>

Así que bastó eliminar esa línea para que Blogger lo restaure ya que es uno de esos includables que no pueden ser quitados.

A partir de alí, las cosas se resolvieron y el sistema de Blogger funcionó por lo que simplemente, copié el código que usaba y lo pegue dentro del editor, incluyendo CSS, scripts y HTML, tal como lo haría en la plantilla misma.

El resultado fue ... parcial porque Blogger coloca eso como si fuera una entrada. Es decir, una página de error tiene la misma estructura que una entrada común y como quería mantener el diseño original, mezclé ambas cosas ya que el tipo de página sigue siendo el mismo: error_page por lo tanto, podemos condicionar la plantilla para que ciertas cosas no se muestren (la sidebar en mi caso) e incluso, condicionar el includable status-message de tal forma de que sólo se emplee en este tipo de páginas:

<b:includable id='status-message'>
  <b:if cond='data:blog.pageType == &quot;error_page&quot;'>
    <b:if cond='data:navMessage'>
      <div class='status-msg-wrap'>
        <div class='status-msg-body'>
          <data:navMessage/>
        </div>
      </div>
      <div style='clear: both;'/>
    </b:if>
  </b:if>
</b:includable>

Además, eliminé algunos divs como status-msg-border porque sino, el código se repetía y sobrescribí las reglas de estilo que Blogger agrega de manera automática:

.status-msg-wrap {
  font-size: 100%;
  margin: 0 auto;
  position: relative;
  width: 100%;
}
.status-msg-body {
  padding: 0;
  position: relative;
  width: 100%;
}

Las nuevas opciones de Blogger pueden ser interesantes pero algo perturbadoras porque no está demasiado claro su alcance o como deben ser implementadas. Por un lado el tema de las páginas de error parece ser algo que sólo funcionaría en las plantillas de nuevo estilo así que quien use las plantillas normales deberá buscar otra alternativa o esperar y ver si en algún momento se amplia su uso.

Otras opciones como robots.txt y re-direcciones son complicadas para cualquier usuario medio y conviene abstenerse de probarlas a menos que se sepa bien qué implican y cuál es el resultado final que, es muy probable, no se vea de modo inmediato.

La primera, la que habla de la etiqueta META description es la que ha entusiasmado a muchos ya que, por fin, nos da la posibilidad de crear descripciones lógicas ¿Qué significa esto? El contenido de esa etiqueta es la base de lo que leen los motores de búsqueda y las redes sociales cuando se comparte algo; se supone que en una página con contenidos diferentes como es un blog, cada entrada debería poseer una descripción diferente, un resumen de la entrada en cuestión. Eso, es algo que en Blogger era imposible y creaba avisos de advertencia en la Herramienta para Desarrolladores de Blogger, donde decía que esa etiqueta estaba repetida ... claro, todas las páginas de nuestro blog tenían la misma etiqueta que, con algún truco, podíamos resolver pero sólo parcialmente.

En realidad, esta nueva opción de Blogger tampoco resuelve el problema porque la opción de agregar un sumario personalizado en cada entrada es útil pero lo lógico sería que esa descripción fuera automática y esa opción fuera un elemento extra en caso de querer sobrescribirla o modificarla. No se entiende por qué no lo hacen de ese modo ya que los datos están allí en data:post.snippet y bastaba usarlos o permitir que nosotros los usáramos. Algo es algo, dirá alguien y puede ser que tenga razón pero sigo creyendo lo mismo, Blogger se empeña en buscar problemas a cada solución y hacer complicar las cosas simples.

Las complica porque muchos se preguntan ¿qué hago? ¿uso esta opción? ya tengo colocadas esas etiquetas META description ¿las saco? ¿Cuál sistema elijo?

En principio, el problema concreto es este: si decido usar el nuevo sistema debería: usar la nueva interfaz de Blogger porque es algo que sólo puede hacerse desde allí, eliminar la etiqueta META description que tenga en la plantilla y tomarme el trabajo de agregar ese sumario en cada post que publique; además, debería agregar en el head lo siguiente:

<meta expr:content='data:blog.metaDescription' name='description'/>

Pero ... más peros ... ¿qué pasa con las entradas anteriores? Ah, m'hijito, habrá que editarlas una por una porque sino, no tendrán descipción ... una locura a menos que uno tenga unas pocas entradas publicadas.

¿Y si una entrada carece de es etiqueta habrá problemas? Depende. No hay manera de saberlo y cada sitio es distinto. Podrá funcionar bien o verse resultados extraños en los buscadores.

¿Una solución intermedia?

Ya que data:blog.metaDescription es el dato que maneja Blogger y ese dato es un texto accesible, podríamos intentar condicionar todo para usar el nuevo sistema sin perturbar lo anterior. Podríamos armar algo así:

<b:if cond='data:blog.metaDescription'>
  <!-- si la entrada tiene una descripción con el nuevo sistema, la usamos -->
  <meta expr:content='data:blog.metaDescription' name='description'/>
<b:else/>
  <!-- si no la tiene, dejamos las cosas tal como estaban antes -->
  .......
</b:if>

Algo más concreto, incluyendo las etiquetas de OpenGraph:

<b:if cond='data:blog.metaDescription'>
  <meta expr:content='data:blog.metaDescription' name='description'/>
  <meta expr:content='data:blog.metaDescription' property='og:description'/>
<b:else/>
  <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <meta expr:content='data:blog.pageName + &quot;. un texto descriptivo general&quot;' property='description'/>
    <meta expr:content='data:blog.pageName + &quot;. un texto descriptivo general&quot;' property='og:description'/>
  <b:else/>
    <meta content='la descripción genérica del blog' name='description'/>
    <meta content='la descripción genérica del blog' property='og:description'/>
  </b:if>
</b:if>

o si sólo nos interesa usar las descripciones de las entradas y dejar la descripción general tal como la tenemos ahora (ya que Blogger sólo acepta 150 caracteres), usaríamos algo así:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
  <b:if cond='data:blog.metaDescription'>
    <meta expr:content='data:blog.metaDescription' name='description'/>
    <meta expr:content='data:blog.metaDescription' property='og:description'/>
  <b:else/>
    <meta expr:content='data:blog.pageName + &quot;. un texto descriptivo general&quot;' property='description'/>
    <meta expr:content='data:blog.pageName + &quot;. un texto descriptivo general&quot;' property='og:description'/>
  </b:if>
<b:else/>
    <meta content='la descripción genérica del blog' name='description'/>
    <meta content='la descripción genérica del blog' property='og:description'/>
</b:if>

Por ahora, si alguien prueba algunas de las nuevas opciones de la Configuración de Blogger, encontrará pocos resultados o ninguno. Puede ser que, como siempre, lancen algo que luego corrigen o que, simplemente, no estamos entendiendo la idea o cómo funcionan esas opciones.

Una de las que más interés causa es la llamada Mensaje de página no encontrada personalizado y tampoco parecería estar funcionando por acá aunque en otros casos aprecería que si. Tengo la impresión que es algo que sólo funciona en las plantillas de nuevo estilo y no en las tradicionales.

Ahora bien, la aparición de esa nueva posibilidad también aprece haber cambiado algo en el funcionamiento de Blogger; algo que en realidad existía antes y que permitía crear una pagina de error 404 personal; en ese tiempo podíamos usar a un dato llamado data:numposts que era cero cuando la entrada no existía y por lo tanto, podía condicionarse la plantilla para mostrar algo especial.

Luego cambió y lo que mostraba Blogger era una página genérica especial informando del error. En este momento, cuando tratamos de acceder a una entrada inexistente, lo que muestra Blogger es nuestra plantilla con el contenido de <div class='blog-posts'> vacío. Ese div se encuentra en <b:includable id='main' var='top'> e incluye el loop que genera las entradas.

Pero ¿cómo detectar si una página existe o no existe?

Yo no sé si ates existía o es un dato nuevo pero, a data:blog.pageType (index, item, archive, static_page) se le ha agregado un nuevo valor denominado error_page así que una condición de este tipo mostraría un texto "ERROR" si la página no existe:

<b:if cond='data:blog.pageType == &quot;error_page&quot;'>
  ERROR
</b:if>

¿Y cómo podemos usar algo así?

Eso ya dependerá de la imaginación de cada uno. Una alternativa sencilla es crear una página estática de error; por ejemplo, la guardo con el título 404 y luego, inmediatamente después de <head> coloco un script que re-direccione los errores a esa página estática:

<b:if cond='data:blog.pageType == &quot;error_page&quot;'>
  <script type='text/javascript'>
  //<![CDATA[
    window.location = "http://miblog.blogspot.com/p/404.html";
  //]]>
  </script>
</b:if>

Otra posibilidad es armar esa página de error en la plantilla misma para lo cual podemos condicionar los distintos elementos que la forman. Esto no es algo que pueda ser aplicado de manera genérica porque dependerá completamente de la forma en que está estructurada la plantilla pero, acá va una idea explicación aproximada.

Primero, voy a poner antes de </head> esa condición y allí definiré las reglas de estilo de esa "página":

<b:if cond='data:blog.pageType == &quot;error_page&quot;'>
  <style>
    #error404 {
      /* este será mi contenedor */
    }
    /* y el resto de las reglas dependerán de lo que quiera mostrar */
  </script>
</b:if>

Ahora condicionaré la plantilla; en mi caso, quiero dejar el header y el footer pero eliminar las dos columnas centrales, la de las entradas y la sidebar así que, sin desplegar los artilugios para que sea sencillo, condiciono esa parte:

<b:if cond='data:blog.pageType == &quot;error_page&quot;'>
  <!-- esta es la página de error agregada -->
  <div id='error404'>
    < ....... y aquí colocaré el HTML se la página de error ....... >  
  </div>
<b:else/>
  <!-- esta es la página normal con el código tal como está ahora -->
  .......
  <div id='main-wrapper'> ....... </div>
  <div id='sidebar-wrapper'> ....... </div>
  .......
</b:if>

Y en todo caso, verifico que no me haya equivocado usando la Vista Previa. Si todo está bien, veré el blog de modo normal.

Una vez guardada la plantilla ... habrá que probar si funciona colocando una dirección URL errónea y esperar que Blogger no vuelva a cambiar las cosas otra vez.

A partir de hoy aparecen algunas opciones extras en la Configuración de Blogger aunque, por el momento sólo se ven en la nueva interfaz. Se muestran a la izquierda con el nombre "Preferencias de búsqueda" y poseen varios apartados.

Etiquetas Meta que no es otra cosa que eso, las etiquetas normales que solemos usar y donde se muestre un breve resumen o descripción del sitio. Debemos marcar Si para que se abra el editor, escribir el texto y luego guardar.

Errores y redireccionamientos tiene dos partes: Mensaje de página no encontrada personalizado y Redireccionamiento personalizado; en ambos casos, si se quiere cambiar, hay que hacer lo mismo, habilitarlos. El mensaje de error puede incluir HTML.

Rastreadores e indexación debe ser editado con prudencia y también tiene dos partes: Archivo robots.txt personalizado será cosa de estudiar y ver las posibilidades que nos brinda [más información]; Etiquetas de encabezado de robots personalizadas es una forma visual de establecer los datos de las etiquetas meta robots.

Un punto importante de los cambios es que en el Editor de Entradas también se ha agregado una opción extra llamada Descripción de búsqueda donde es posible escribir un resumen de cada entrada en particular. Hasta ahora, no he visto más que mis pruebas y no noto diferencia alguna pero, habrá que analizar que hace Blogger con ese dato, cómo lo maneja y de qué manera será leído (si es que será leído) por las redes sociales y otros servicios de terceros.

Para terminar, un extra: en las imágenes que subimos, aparece una opción propiedades que nos permite agregarles un atributo alt y un atributo title; además, en los enlaces, tenemos la posibilidad de marcarlos para que se abran en otra ventana o pestaña y agregarles el atributo rel nofollow

REFERENCIAS:Bloger Buzz

Cuando coloco cosas una al lado de la otra, estas se acomodan como pueden; si tienen diferentes alturas, quedarán espacios vacios, ya se aque usemos una tabla, hagamos que floten o, como en este caso, la propiedad display: inline-block; es lo normal, así se ve en cualquier navegador; no importa si son textos o imágenes:

123456789

Usando las nuevas propiedades del CSS3 podemos cambiar eso y ajustar el contenido en columnas de tal forma que desaparecen los espacios en blanco y se cree un mosaico pero, tiene una limitación, no funciona en Internet Explorer, ni siquiera en la versión 9 y sólo está previsto que sea soportado en la versión 10 que aún está en modo beta; de tal modo, el ejemplo inferior se verá igual que el anterior en ese navegador:

123456789

Ahora biem, quienes usen jQuery tienen la posibilidad de resolver esto con la ayuda de algunos plugins. El primero de ellos se llama columnizer y es el que me parece más interesante porque se adapta bien a situaciones distintas.

Basta colocar el script del plugin antes de <head> y luego, definir qué cosa queremos mostrar en columnas y cuáles son sus características. Si tuviera un ejemplo como el anterior que tiene esta estructura HTML:

<div id="democols">
  <span> ....... </span>
  <span> ....... </span>
  <span> ....... </span>
</div>

Debajo, llamaríamos a la función de este modo:

<script type='text/javascript'>
  $('#democols').columnize({ columns: 5, lastNeverTallest: true});
</script>

y le agregaríamos:

<div style="clear:both;"></div>

para eliminar las flotaciones de las columnas.

Las posibilidades son varias; podemos dimensionar el contenedor donde se mostrará y decirle a la función que lo divida en cierta cantidad de columnas o bien decirle que genere columnas de determinado tamaño:

$('#democols').columnize({ columns: 4 });
$('#democols').columnize({ width: 200 });

Opciones extras permiten definir el tipo de flotación (left o right), establecer si evitamos que la última columna sea la más alta, permitir que se rearmen las columnas cuando se redimensiona el contenedor, etc. También se agregan clases que permiten controlar esas columnas o usar algunas otras especiales para controlar los detalles. Todo eso puede verse en la página del autor y los ejemplos se incluyen en el ZIP que podemos descargar y estudiar.

Otro plugin que hace algo similar es Wookmark que me aprece menos intuitivo pero que también funciona en cualquier navegador.

Como en el caso anterior, ponemos el plugin antes de </head> y debajo del HTML, agregamos la función que, en este caso, diría algo así:

<script type='text/javascript'>
  $('span').wookmark({container: $('#democols'),itemWidth: 120,autoResize: true});
</script>

donde el selector no es el contenedor sino el contenido, sea esta una etiqueta o una clase y el contenedor se agrega en las opciones junto con el ancho de las columnas.

Como ya habrán visto, Blogger ha extendido la redirección de los dominios .blogspot.com genéricos a dominios por países; cosa que no es nada trivial ya que si ellos no hacen internamente nada, implicará problemas para la indexación, el PageRank, etc ya que habrá varios dominios con el mismo contenido:

http://vagabundia.blogspot.com
http://vagabundia.blogspot.com.ar
http://vagabundia.blogspot.com.mx
http://vagabundia.blogspot.com.es
etc etc etc

Estos días me preguntan si hay alguna novedad más allá de lo publicado hace un par de meses y la verdad, no he visto nada. La página explicativa dice estar actualizada pero, no veo novedades y sigue manteniendo la misma duda final ... una traducción :

PREGUNTA: ¿¿Afectará esto a la optimización para motores de búsqueda en mi blog?
RESPUESTA: El cambio hará que los robots de Google encuentren dominios diferentes para un mismo sitio. El contenido duplicado, puede afectar los resultados. Estamos haciendo todo lo posible para reducir al mínimo las consecuencias negativas de los contenidos duplicados de blogspot

O dicho de otro modo ... saben que traerá problemas y el "estamos trabajando" significa que no tienen idea de cuales serán los resultados ni las consecuencias.

Tal como decía en la entrada original, han decidido que el agregado de ncr al final de la URL redirija siempre a los servidores de USA, es decir, al dominio "original":

http://vagabundia.blogspot.com/ncr

¿Cómo se resuelve esto? Ni idea. Lo único que he visto es que e varios foros hablan de un script que no es nada especial pero, podría funcionar aunque sea parcialmente. Lo que hace es detectar si la dirección URL contiene algún tipo de redirección a un país específico y si es así, cambiarla de tal forma que apunte al dominio original o sea, al que se accede con /ncr

Luego de muchas idas y vueltas, este es el código definitivo que se adapta a cualquier situación y hay que agradecérselo a Emilio Cobos que nos ha librado de la maldición.

Se debe poner esto inmediatamente despues de <head>:

<script type='text/javascript'>
//<![CDATA[
  (function(){
    if( document.URL.match(/\.blogspot\.(com\...\/|..\/)/) ){
      var URL = document.URL
      URL = URL.replace(URL.match(/\.blogspot\.(com\...\/|..\/)/)[0],".blogspot.com\/ncr\/")
      document.location = URL
    }
  })()
//]]>
</script>

Black White Social Icons
	Contiene 40 íconos de 48x48 y 64x64, en formato PNG. descargar

Clear bubble
	Contiene 154 íconos de 512x512, en formato PNG. descargar

Black Button Social Media
	Contiene 27 íconos de 300x300, en formato PNG. descargar

YouTube está agregando una nueva función en los reproductores que podemos insertar en las páginas web y que permite previsualizar y saltar a determinadas escenas, mostrando una miniatura que se muestra en la parte inferior, en una especie de regla que indica la línea de tiempo.

Si nos posicionamos en esa línea, hacemos click y arrastramos el ratón hacia la derecha o hacia la izquierda, veremos múltiples frames y podremos seleccionar la posición con bastante exactitud.

Por el momento, esto sólo funciona en videos de más de 90 minutos.

REFERENCIAS:Google Operating System

Lifetime Networks
	Contiene 295 íconos de diferentes tamaños en formato PNG. descargar

Burnt wood
	Contiene 12 íconos de 420x420 en formato PNG. descargar

Sosical
	Contiene 30 íconos de 128x128, 256x256 y 512x512 en formato PNG. descargar

A veces uno es feliz con poca cosa. En este caso, por haber recuperado la posibilidad de usar Pandora, una de las mejores radios de Internet que cerró sus puertas a todo aquel que no perteneciera a la Madre Patria (la USA.).

No es que no hubiera otras alternativas, tampoco sé si volveré a usar el sitio de manera tan "abusiva" como lo hacía en aquel entonces pero, quebrar estas reglas de las intransigencias absurdas me causa placer.

Siguiendo las instrucciones de labnol.org es algo simple de hacer; hay que instalar la extensión HTTPS Everywhere ya sea en Firefox como en Chrome y nada más.

Luego, ingresamos en el sitio de Pandora: https://www.pandora.com/ y voilá. Incluso, si teníamos una cuenta, podemos ingresar a ella nuevamente y retomar la experiencia o comenzar una nueva.

¿Que hace esta extensión? Habilita l navegación segura (HTTPS) en cualquier sitio que la soporte así que si entramos via http://algo, nos redirige automáticamente a https://algo y en este caso particular, se ve que los filtros del sitio no funciona o no lo tienen previsto y hasta que alguien se de cuenta y lo modifique, nos dejará acceder desde cualquier parte del mundo y dejaremos de se extranjeros indeseados ... por un tiempo.

La extensión es útil y muy configurable, si no deseamos que ciertos accesos sean redirigidos (en mi caso, Facebook), basta con marcarlos en el menú Herramientas o abrir la ventana de configuración y seleccionar los dominios.

Sí, lo repito, ya sé que hay otras opciones pero yo quería llenar el silencio con música.

En poco tiempo, el botón de Google+ sufrirá un cambio estético, dejando de mostrarse con el ìcono ya conocido para pasar a tener un ícono nuevo.

El cambio será automático y si aún no lo ven, basta suscribirse a Google+ Platform Preview para que quede habilitado.

El código es el mismo así que no es necesario hacer ningún cambio.

Las páginas estáticas son algo que tiene un uso que se va extendiendo a lo largo del tiempo, sobre todo, porque las nuevas plantillas incluyen el gadget por defecto y justamente, ese gadget es el que genera confusiones y preguntas respecto a su personalización ya que suele ser confundido con un "menú normal" que puede ser personalizado libremente pero no lo es.

Como todo gadget, posee un código rígido y una serie de reglas de estilo predefinidas por Blogger; si queremos modificar algo, deberíamos entender su estructura y sus limitaciones.

El primer problema a resolver es agregar enlaces que no sean páginas estáticas; eso es bastante simple y, aunque ya está explicado en alguna otra entrada, vuelvo a repetir la idea: hay que desplegar los artilugios de la plantilla y buscar el includable que lo contiene:

<b:widget id='PageList1' locked='false' title='Páginas' type='PageList'>

allí, hay un loop con etiquetas UL y LI; si queremos incorporar algún enlace extra, debemos agregar las etiquetas justo después de </b:loop> y antes de </ul>

<ul>
  <b:loop values='data:links' var='link'>
    .......
  </b:loop>
  <li><a href='URL_1'>,vaga</a></li>
  <li><a href='URL_2'>twitter</a></li>
</ul>

Pero se puede cambiar más. Vamos a agregarle una imagen de fondo distinta a cada uno de esos enlaces; para eso, bastaría que los identificaremos mediante una clase o un ID pero, como son escritos de modo automático, debemos usar alguna variable para que cada uno sea distinto del otro.

Si los títulos de nuestras páginas, que es eso que vemos en el "menú", sólo tienen una palabra; podemos usar ese dato; si no es así, debemos recurrir a un script y como este sería el método más universal, vamos a verlo.

Lo que haré es modificar el loop completo de tal forma que quede así:

<ul id='listapaginas'>
  <b:loop values='data:links' var='link'>
    <b:if cond='data:link.isCurrentPage'>
      <li><a class='selected' expr:href='data:link.href' id=''><data:link.title/></a></li>
    <b:else/>
      <li><a expr:href='data:link.href' id=''><data:link.title/></a></li>
    </b:if>
  </b:loop>
  <li><a href='URL_sitio1' id=''> otro </a></li>
  <li><a href='URL_sitio2' id=''> otro más </a></li>
</ul>
<script type='text/javascript'>agregarIDs();</script>

y la función con el script la colocaré antes de </head>

<script type='text/javascript'>
//<![CDATA[
function agregarIDs() {
  var laclase;
  var obj = document.getElementById("listapaginas");
  var enlaces = obj.getElementsByTagName("a");
  for (var i=0; i<enlaces.length; i++) {
    enlaces[i].id="pagina" + String(i);
  }
}
//]]>
</script>

Lo que hará esa función es sencillo, sólo le colocará un atributo ID a cada enlace del gadget de tal modo que sean identificables individualmente; el primero se llamará pagina0, el segundo pagina1, el tercero pagina2 y así sucesivamente.

Como dije antes, si los títulos de las páginas sólo contienen una palabra, el script es innecesario y podemos usar ese texto como ID de los enlaces:

<li><a class='selected' expr:href='data:link.href' expr:id='data:link.title'><data:link.title/></a></li>

<li><a expr:href='data:link.href' expr:id='data:link.title'><data:link.title/></a></li>

Sea cual sea el esquema elegido, el resto es CSS que también ponemos antes de </head>

<style>

  /* una imagen de fondo distinta par cada enlace */
  #pagina0 {background:  transparent url(IMAGEN_0) no-repeat 0 0;}
  #pagina1 {background:  transparent url(IMAGEN_1) no-repeat 0 0;}
  #pagina2 {background:  transparent url(IMAGEN_2) no-repeat 0 0;}
  #pagina3 {background:  transparent url(IMAGEN_3) no-repeat 0 0;}
  #pagina4 {background:  transparent url(IMAGEN_4) no-repeat 0 0;}

  /* la etiqueta LI contenedora */
  .PageList li {
    /* sobrescribir las reglas de Blogger */
    margin: 40px 0 20px !important;
    padding: 0 !important;
    /* las animamos un poco */
    -moz-transition: all 1s;
    -webkit-transition: all 1s;
    -o-transition: all 1s;
    -ms-transition: all 1s;
    transition: all 1s;
  }

  /* los enlaces tienen una imagen de fondo y un texto */
  .PageList li a {
    color: #666;
    display: inline-block;
    font-family: Shadows Into Light Two,cursive;
    font-size: 28px;
    /* establecemos la dimensión */
    height: 60px;
    padding-bottom: 0;
    padding-top: 110px;
    width: 120px;
    /* los animamos un poco */
    -moz-transition: all 0.3s;
    -webkit-transition: all 0.3s;
    -o-transition: all 0.3s;
    -ms-transition: all 0.3s;
    transition: all 0.3s;
  }

  /* el efecto hover anima las cosas */
  .PageList li a:hover {
    color: #000;
    font-size: 34px;
    text-decoration: none;
    /* invertimos la posición para que la imagen "baje" */
    background-position: 0 bottom !important;
    /* invertimos los padding para que el texto "suba" */
    padding-top: 0;
    padding-bottom: 110px;
  }

  /* la página atula se muestra "torcida" */
  .PageList a.selected {
    -moz-transform: rotate(-15deg);
    -webkit-transform: rotate(-15deg);
    -o-transform: rotate(-15deg);
    -ms-transform: rotate(-15deg);
    transform: rotate(-15deg);
  }
  /* y se endereza al poner el cursor encima */
  .PageList a.selected:hover {
    -moz-transform: rotate(0);
    -webkit-transform: rotate(0);
    -o-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
  }
</style>

Speech bubble es una herramienta online que nos facilita un método par crear íconos de tipo burbuja que se generan sólo con CSS. Las posibilidades son varias, entrando a la página, seleccionamos el modelo básico que puede ser tanto un ícono simple como un enlace integrado.

Todo lo que debe hacerse es copiar el CSS que luego podrá personalizarse a gusto y que colocaremos entre etiquetas <style> </style> y el HTML de la estructura que en un ejemplo específico, dice algo así:

<a class="spch-bub-inside" href="#">
  <span class="point"></span> 
  <em>10 comentarios</em>
</a>

lorem ipsum dolor 10 comentarios sed diam nonummy nibh

A simple vista, las reglas de estilo parecerían complejas pero no lo son tanto y son bastante fáciles de personalizar. En este ejemplo, uso las siguientes:

/* este es el contenedor principal (una etiqueta A) */
.spch-bub-inside {
  font-family: Tahoma;
  font-size: 18px;
  margin: 0 .2em;
  position: relative;
  text-decoration: none;
}

Allí es donde definimos la fuente del texto porque todos los demás valores, estarán expresados en unidades em, es decir, todo el modelo se adaptará a los distintos tamaños o tipos de fuentes elegidos.

La siguiente regla define el triángulo inferior:

.spch-bub-inside .point {
  border-bottom: 0.6em solid transparent;
  border-left: 0.6em solid #888; /* este es el color */
  display: block;
  height: 0;
  left: 0.6em; /* la posición /*
  overflow: hidden;
  position: absolute;
  top: 1.2em;
  width: 0;
}

Cuanto más alto sea el valor de left, más se desplazará ese triangulo hacia la derecha.
Cuanto más alto sean los valores de border, más ancho y alto será el triángulo.

La etiqueta EM es la que crea el rectángulo con el texto:

.spch-bub-inside em {
    background-color: #888; /* tiene el mismo color */
    border-radius: 0.2em 0.2em 0.2em 0.2em; /* se redondean los bordes */
    color: #FFF; /* el color del texto */
    font-style: normal; /* evitamos que se vea en itálica */
    padding: 0 0.5em; /* la separación entre el texto y los bordes */
    position: relative;
}

Y por último, los efectos hover que cambian el color de la burbuja cuando ponemos el cursor encima:

.spch-bub-inside:hover em {
  background-color: #ABC;
  color: #000;
}
.spch-bub-inside:hover .point {
  border-left: 0.6em solid #ABC;
}

A veces me pregunto si la gente de Blogger tiene alguna idea de lo que es un blog.

Hace rato que estoy seguro que sus conceptos de blog difieren radicalmente de los míos pero ya ni siquiera parece que habláramos el mismo idioma.

Obviamente, todos habrán visto o leído el tema de estas llamadas paginas dinámicas; aparecieron primero en modo Google, es decir "beta permanente" para luego ser parte integral del servicio.

Las promovieron a lo grande, con banda, desfile y decenas de artículos ... y siguen insistiendo:

Hoy estamos pre-visualizando cinco nuevas plantillas dinámicas de Blogger que pronto serán personalizables y podrán ser usadas en su blog. Estos nuevas plantillas utilizan lo último en tecnología web, incluyendo AJAX, HTML 5 y CSS3, para ofrecer una serie de beneficios tanto a usted como a sus lectores:

• Desplazamiento infinito: leer más entradas sin tener que recargar o abrir una segunda página
• Nuevos diseños: vistas diferentes adaptadas a los diferentes tipos de blogs
• Velocidad: las imágenes se cargan a medida que son vistas
• Interactividad: nuevas formas para experimentar y enriquecer el contenido del blog

Las trompetas y el auto-bombo suenan atractivos ¿pero, será verdad? Por supuesto, nadie puede responder a esa pregunta así que uno simplemente puede deducir y pensar: Si el Diseñador de Plantillas es un ejemplo de lo que Blogger propone para el futuro, "algo huele mal en Dinamarca".

A lo largo de estos meses, han ido cambiando el sistema, agregándole cosas (update#1, update#2) y la última es la posibilidad de incluir gadgets o de mantener los que existen en el blog cuando se cambia a este tipo de plantilla.

Curiosamente, esta última parece que ha ido cambiando desde el anuncio hasta el momento en que escribo estas líneas ya que al principio esa barra oscura a la derecha donde se expanden, se mostraba encima de la barra de scroll y ya no.

Y acá comienza lo subjetivo (o continua) pero no puedo evitarlo así que empiezo por el final: la parte más interesante de todo esto es la posibilidad de deshabilitarlo; gracias; por lo menos esta vez, me han dado la opción de decir NO.

NO por muchas razones, por todas las razones por las que uno ha creado un blog y que estas cosas desvirtúan, transformando eso que era un espacio personal, en una página ascética que podrá ser llamativa para algunos pero que nada aportan a los sitios más allá de la parafernalia de las cositas que suben bajan o se mueven y que podemos hacer nosotros mismos aún sin los recursos del gigante. Ni que decir que también las podríamos hacer mucho más fácilmente si en lugar de intentar estandarizar, se dedicaran a agregar las herramientas y facilitarnos su uso.

• ¿Podríamos usar Ajax? Sí, si ellos quisieran pero no quieren.
• ¿Podríamos tener desplazamiento infinito? Sí, si ellos permitieran un acceso más fluido a nuestros propios datos; pero por ahora, ni siquiera nos ofrecen un sistema de paginación elemental.
• ¿Podríamos tener mejor velocidad? Sí, si ellos centralizaran librerías, dejaran de agregar cosas que no utilizamos y no llenaran las páginas de scripts que siempre tienen algún error.
• ¿Podríamos tener mejor interactividad? Sí, si ellos nos permitieran gerenciar los comentarios, compartir las entradas con razonabilidad, generar resúmenes, etc, etc, etc.

NO porque un blog deja de ser blog para transformarse en un tablón de anuncios.

Es evidente que la idea es esa o ¿les sobraron "cositas" del fracasado Google Wave y no sabían qué hacer con todo eso y que no se notara el desperdicio de recursos?

¿Será que la ambición de querer entrar a toda costa en el mercado de redes sociales que es uno de los pocos bastiones donde Google no puede hacer pie los ha llevado a pensar que enchufarnos Google+ hasta en la sopa es insuficiente y que Blogger podría ser la punta de lanza de ese desembarco?

Me lo pregunto porque eso que veo no difiere demasiado del concepto de las redes sociales; posee esa uniformidad inevitable, las opciones pre-digeridas y les salió barato porque el contenido lo aportamos nosotros ¿Será paranoia? Quién sabe; "piensa mal y acertarás" es un consejo bastante derrotista así que mejor imaginar qué sólo se trata de una gafe, una más y ya van varias de esta gente que utiliza sus incontables recursos para ... ¿para qué?

Lo repito. Para mi, lo mejor de estos COSOS es que se puede deshabilitar y que, por ahora, no son obligtorios.

Ya los miré; ya los probé. Algunas andan y otras no andan para nada; vi como hace desastres en ciertas entradas de este sitio; vi blogs sin blogs, vi blogs sin gente detrás de ellos, no vi diferencias, no vi calidad humana, vi una máquina mostrando cuadraditos, páginas claritas, enlaces celestitos siempre subrayados y sentí que me querían meter en la picadora de carne para venderme como hamburguesa de McDonald.

Y claro, alguien podrá decir "a mi me gusta", y estará perfecto; yo hablo de eso, de esas diferencias. De mantenerlas, de permitirlas ¿se mantendrán o en algún momento no me dejarán decir NO?

Y claro, alguien podrá protestar y decir "si no te gusta, no lo veas", y tendrá razón, off course, pero, además de no verlo, también puedo decirlo porque, pese a Blogger, esto, sigue siendo un blog.