Oloblogger

Elemento que desaparece tras un tiempo. Portada de presentacion.

2012-01-27T17:00:00.000+01:00

Puede que en ocasiones nos sea útil mostrar algún contenido pero que este sólo permanezca unos segundos visible. Sería el caso de algún aviso, un elemento publicitario o incluso como me propuso alguien, una pantalla de presentación. Al final de esta entrada hay un ejemplo, por si queréis ver el resultado antes de comenzar a leer.

Para ello vamos a echar mano de lo que resulta más sencillo y que es la instrucción JavaScript setTimeout, que hace una tarea que se le indique, pero con una demora de tiempo que podemos programar.

Lo primero que necesitamos es un sistema para hacer que las cosas aparezcan/desaparezcan y vamos a utilizar uno bastante recurrente y que recomendamos tener siempre en plantilla, ya que sirve para bastantes cosas distintas. Si no lo tenéis todavía, aquí está el código para poner antes del </head>:

<style type='text/css'>
.visible {display:block;}
.invisible {display:none;}
</style>

<script type='text/javascript'>
function plegardesplegar(identificacion){
  var menu = document.getElementById(identificacion);
  if(menu.className == &quot;visible&quot;){menu.className = &quot;invisible&quot;; }
  else{ menu.className = &quot;visible&quot;; }
}
</script>

El código es sencillo. Primero creamos las clases visible e invisible que le dan esas mismas características respectivamente a las capas a las que se asignen esas clases. Luego se crea una función (plegardesplegar) que cuando le llega un id de una capa concreta, comprueba su clase actual y la cambia. Por tanto, pasará lo visible a invisible y viceversa.

Una vez hecho esto ya podemos montar nuestro elemento temporal. Sólo tenemos que crear una capa con una id única y justo detrás de ella, para que el contador de tiempo comience a correr tras su carga, este script:

En verde lo que hay que ajustar: la id de la capa a cerrar y el tiempo (en milisegundos).

Un ejemplo. Recordamos que para hacer una pantalla de presentación para el blog, propusimos hace tiempo un sistema relativamente sencillo con cookies, de manera que a un mismo usuario sólo le apareciera una vez cada cierto tiempo y no todas las veces que accediera al Home en la misma sesion. Pero este sistema todavía sería más sencillo por permitirnos prescindir de las galletitas... aunque también se podrían combinar las dos cosas.

Para hacer esto y una vez instalado el primer código de esta entrada (el de la función plegardesplegar), sólo habría que buscar el <body> y justo detrás pegar esto. El contenido interior del div es el que deberíais personalizar vosotros para que pareciera una auténtica presentación que, por supuesto, desaparecería tras unos segundos. No os paséis con el tiempo.

<b:if cond='data:blog.homepageUrl == data:blog.url'>

<div class='visible' id='capasuperpuesta' style='z-index:99999; position:fixed; top: 0; left: 0; overflow:visible; width:100%; height:100%; background: #F4F8F9;'>
<div style='width:600px; height:400px; position:absolute; top:50%; left:50%; margin-left:-300px; margin-top:-200px; padding:100px 30px 0px 0px; color:#000000; font-size:20px; line-height:20px; text-align:center;'>
Dentro de esta capa interior es dónde podemos poner una imagen, enlaces, texto, un menú, un vídeo, una lista, un flash... en fin, lo que sea.
</div>
</div>

<script type='text/javascript'>
window.load=setTimeout("plegardesplegar('capasuperpuesta')", 8000);
</script>

</b:if>

VER EFECTO AHORA MISMO
(Tras 8 segundos desaparecerá automáticamente)

Dentro de esta capa interior es dónde podemos poner una imagen, enlaces, texto, un menú, un vídeo, una lista, un flash... en fin, lo que sea. 

Una solución para la paginación de comentarios antiguos

2012-01-26T17:00:00.000+01:00

No sólo hemos tenido algunos problemas aquellos que nos hemos pasado forzosa o voluntariamente al nuevo sistema de comentarios hilados, agrupados o anidados (nomenclatura a elegir). También los que han conservado el antiguo sistema, igualmente de manera voluntaria o por causa de fuerza mayor, tienen algunos problemillas con ellos.

Los síntomas son distintos, pero el origen de la enfermedad es el mismo. De momento ya tengo conocimiento de dos. Uno es el que ayer comentaba J.Miur respecto a la desaparición del nuevo estilo que hasta ahora estaba insertado en la plantilla. Eso ha provocado que las modificaciones que pudieras haber hecho directamente en esa parte ya no estén y que los comentarios se vean de aquella manera.

La solución es volver a regenerar el estilo, pero si todavía no te lo han borrado de tu plantilla puedes aplicar una pequeña modificación preventiva que se explica en el anterior enlace de Vagabundia.

El segundo problema es el de la paginación de comentarios en posts con más de 200. Aquí lo que ocurre es que no se puede acceder a dichas páginas, siendo imposible ver nada a partir del que hace 201.

Pero también alguien -que no fui yo- ha encontrado una manera de arreglar esto. Se trata de un pequeño JavaScript que aprovechando las variables data oportunas y las direcciones que maneja Blogger para mostrar las distintas páginas, reproduce el sistema de paginación.

Aclaro que no restaura lo que sea que se haya perdido, sino que directamente construye las páginas y los enlaces a ellas con un código alternativo.

Ese alguien es el editor de Simplex Design y a continuación voy a intentar traducir lo mismo que allí podréis encontrar. Cuando no he probado algo lo advierto y esta es una de esas veces porque no tengo el sistema antiguo en ningún post con más de 200 comentarios, aunque siguiendo la lógica del código, debería funcionar y bien.

Y como hace tiempo que no lo digo, recuerdo que los experimentos se hacen con gaseosa y que para hacerlos con tu plantilla real, antes siempre deberías guardar una copia de seguridad por si se te va una tecla de más y borras algo importante accidentalmente.

Recomponer paginación de comentarios

1. Escritorio ► Pantilla ► Editar HTML ► Continuar ► Expandir plantillas de artilugios

2. Añadir estas líneas antes de ]]></b:skin>

#commentpaging {float:right;}
#commentpaging a {margin-right:5px;}

3. Añadir el JavaScript antes de <body> (supongo que también sirve antes de </head>)

4. Encuentra la línea <b:includable id='comments' var='post'> y justo a continuación insertas la llamada al script

<b:includable id='comments' var='post'>
<span id='commentpaging'>
<script type='text/javascript'>commentpagination("<data:post.url/>","<data:post.numComments/>");</script>
</span>

5. Graba los cambios.

Cómo funciona

Primero este script toma el número de comentarios del post y lo divide por 200. Redondea el resultado al entero mayor y así se sabe cuantas páginas hay que construir. Por ejemplo, si una entrada tiene 250 comentarios: 250:200=1,25 ► 2 páginas. De esta manera, la primera página tendrá 200 comentarios y la segunda 50.

La dirección a una página de comentarios tiene la estructura:
http://dirección del post.html?commentPage=número de página

Por ejemplo, en la página del autor, la página 2 de comentarios sería así:
http://www.thesimplexdesign.com/2011/02/simplexenews-latest-version-fixed.html?commentPage=2

Una vez conseguidos el número total de páginas de comentarios y la estructura de la dirección de cada página, el siguiente paso es muy simple, sólo escribimos debajo los enlaces a todas las páginas que pudiera haber con un bucle.

Conoce las preferencias de tus lectores con el nuevo contador+1

2012-01-25T18:48:00.000+01:00

Blogger ha incorporado hace pocas horas, un interesante dato sobre la popularidad de nuestros posts. Ahora en el escritorio, en la sección Entradas, junto con los comentarios y el número de visitas, aparece un contador que refleja la cantidad de veces que tus lectores han pinchado en el botón +1 correspondiente a cada post.

Adicionalmente, cuando pinchas en el dato se muestra con detalle la relación de usuarios que votaron esa anotación. Esta es una información privada que sólo puede ver el administrador, pero como todos los que incluye esta captura son buenos amigos del blog, supongo que no les importará ;)

Blogger Buzz dice que en las plantillas de vistas dinámicas el dato aparece por defecto y que para disponer de esta herramienta en las plantillas convencionales, hay que habilitar los botones sociales desde Diseño ► Blog ► Editar, pero supongo que es para que todos incluyamos sus botones de serie, ya que yo no los tengo activados y sí me sale la estadística. Es cuestión de seguir su recomendación si no os sale.

Si ya la incorporación de las estadísticas generales y los datos antes citados de comentarios y visitas, nos permitían hacernos una idea de entre todo lo publicado por nosotros, qué es lo que más va gustando a los que nos leen, este nuevo dato aporta una información adicional especialmente valiosa.

Creo que Google no va a dar marcha atrás en su actual política de integrar todos sus servicios y hacer el conjunto cada vez más social. El nexo de todo es Google Plus y la herramienta el botón +1. Primordial es para "existir" que Google te encuentre y te reconozca y el +1 va cogiendo peso en esto.

Recordamos que muchas de las últimas novedades van en este camino:

integración de perfiles Blogger-Google Plus
envío semi-automático de entradas publicadas a G+
gadget de seguidores
resultados de búsqueda y Adsense con botones +1
compartir con el botón +1 (sólo usuarios grupo de pruebas)

Así que si todavía no tienes instalado el botoncito de marras o no funciona como debería, no dejes de visitar esta otra entrada para ver cómo incluirlo en tu web correctamente: solucionando los problemas con el botón +1.

Avatar personalizado para comentarios (anidados) anónimos

2012-01-24T16:00:00.000+01:00

Para los comentarios tradicionales ya teníamos sistemas para mostrar un avatar personalizado en los comentarios anónimos, pero con los nuevos da un poco de respeto ponerse a trastear en el script. Sobre todo teniendo en cuenta que es posible que algo modifiquen en un futuro no muy lejano.

Pero vamos a explicar un par de truquillos usando CSS que no sólo nos facilitan bastante la tarea, sino que también nos permitirán volver atrás cuando queramos, borrando sólo una única línea. La misma que ahora vamos a insertar en nuestro código para arreglar esto.

En ambos casos, nuestra faena empieza por diseñar un avatar de 36x36px para utilizar en lugar del espacio en blanco que saldría si no hacemos nada. Aquí tenéis uno para las pruebas.

La primera opción es aplicar un fondo con el dibujo que queremos y que se aplicará en todos los casos. El truco está en que cuando existe avatar, este se mostrará por encima del fondo y no se apreciará que hay otra imagen debajo. Estamos hablando de CSS, así que esto habría que meterlo entre las dos etiquetas SKIN.

.comments .avatar-image-container {
background: url(http://4.bp.blogspot.com/-CCyY8H1_br0/Tx3wxWoTvmI/AAAAAAAABss/_SquuwCipG8/s1600/anonimo.jpg) no-repeat 50% 50%;
}

Este sistema sólo tiene un problema y es cuando el usuario utiliza una imagen con transparencia. En este caso, el avatar que usamos de fondo se verá a través de las zonas transparentes.

Segunda opción. Para solucionar eso echaremos mano de los selectores de atributos, que nos permiten filtrar dentro de una determinada clase, aquellos elementos con un característica peculiar.

Y esta característica en los comentarios anónimos es precisamente la imagen sin contenido que Blogger les aplica y cuya dirección es http://img1.blogblog.com/img/blank.gif. Si pincháis en el enlace veréis... nada, pues eso es lo que contiene la imagen. Bueno, en honor a la verdad es una imagen casi imperceptible de 1x1 px.

Teniendo en cuenta esto, la otra alternativa a mi parecer más completa, sería esta:

.avatar-image-container img[src$="img1.blogblog.com/img/blank.gif"] {
background:url(http://4.bp.blogspot.com/-CCyY8H1_br0/Tx3wxWoTvmI/AAAAAAAABss/_SquuwCipG8/s1600/anonimo.jpg) no-repeat 50% 50%;
}

Para los curiosos, lo que hace esto es buscar en todas las clases .avatar-image-container que haya en nuestra página y comprobar si la imagen que incluyen termina en la cadena img1.blogblog.com/img/blank.gif.

A las que cumplen con esa condición se les aplica un fondo que es el dibujo de nuestro anónimo amigo.

En este segundo sistema, el problema reside en que los navegadores más antiguos no reconocen los selectores de este tipo, pero afortunadamente, cada vez quedan menos.

¿Blog en blanco? Solución al problema con IE tras instalar los comentarios anidados

2012-01-22T18:07:00.000+01:00

Es posible que desde que instalaste los nuevos comentarios anidados, tu blog tenga problemas al intentar verlo con Internet Explorer.

Los síntomas son una pantalla congelada que no responde a ninguna acción del ratón y que incluso llega a quedarse totalmente en blanco. Si te ocurre eso, aquí tienes una forma de arreglar el problema mientras Blogger no lo hace y así poder mantener los nuevos comentarios.

Dentro del JavaScript del nuevo sistema (threaded_comment_js), existe una primera llamada que lleva un atributo defer. Esto hace que el navegador retrase (difiera) la ejecución del script hasta que la página se haya cargado. Por algún motivo, parece que este atributo es el causante del problema en Internet Explorer y quizás también, el origen de otros problemas, cosa sobre la que voy a solicitar vuestra ayuda al final de la entrada.

La solución rápida es cambiar el atributo defer por otro quizás no tan eficaz para la carga del resto de la página, pero algo mejor que la alternativa de hacer la carga normal. Este sería async. Aquí podéis obtener más información sobre los modos de carga de un script: normal, defer y async.

Para realizar ese cambio nos vamos a Plantilla ► Editar HTML ► Expandir Plantillas de artilugios y allí buscamos esta línea.

Luego tenemos simplemente que cambiar los dos defer que vemos por sendos async, quedando de esta otra manera:

Desde que he hecho este cambio, no he observado ninguna anomalía adicional en mi blog y en Internet Explorer ya funciona mi página tan mal como siempre ;)

Y aquí es dónde requiero vuestra ayuda. Necesitaría saber si otros problemas como que no funcione el botón Responder con scriptaculous, la incompatibilidad con los gadgets oficiales de Twitter, que en Firefox el foco se vaya al formulario de comentarios al acceder a un post y otros asuntos similares derivados de la activación de los comentarios anidados se solucionan también con este cambio o tenemos que seguir buscando soluciones mientras Blogger no se de por enterado de estos problemas y ponga algún remedio

El mérito de la idea es de Simple Blogger Tutorials y nosotros sólo la hemos traducido y explicado a nuestra manera.

Actualización:
~~El tema de la incompatibilidad con scriptaculous también se soluciona con este truco si utilizamos además el cargador de librerías en lugar de la llamada directa.~~

Tras varias comprobaciones adicionales no puedo garantizar que funcione esto último. Para el problema de IE sigue valiendo lo explicado en el post, pero seguimos sin poder simultanear comentarios anidados y scriptaculous. También parece que hay problemas con Motools, así como con ciertos gadgets de Twitter.

No obstante dejo el código del cargador por si a alguno le solucionara, por casualidad, el problema.

Cosas sencillas. Cambio tipografía para pie de fotos.

2012-01-20T17:00:00.000+01:00

Algunos tenéis blogs con bastantes imágenes y quizás gustéis de realzar los textos al pie (o leyendas en el argot de Blogger) con un sistema sencillo. Si es así os prometo que más fácil no puede ser.

Partimos de la base de que las imágenes se suben mediante el editor de entradas y luego se pincha en ellas para añadir una leyenda (habilitado sólo desde la pestaña Redactar). Si lo hacéis así, en principio se obtiene algo como esto.

Un bicho

Pues bien, el truco consiste en aprovechar que a la celda correspondiente al texto del pie, Blogger siempre le asigna automáticamente una clase determinada. Esta es tr-caption.

Sabiendo esto, sólo tenemos que incorporarla a nuestro CSS y asignarle las propiedades que queramos:

.tr-caption { font-family: Arial, Helvetica; font-weight: bold; color: red; }

Un bicho grande

Hemos escogido una fuente muy escandalosa adrede para que veáis la diferencia, pero ahí podéis poner a vuestro gusto itálica, negrita, cambiar el color, el tamaño y por supuesto la tipografía. En algunos casos incluso podría ser interesante usar una tipografía del tipo de las que imitan la escritura manual. Supongo que eso estaría bien para fotografías de viajes comentadas mediante este sistema y cosas similares.

Y para redondear recordamos también el posible uso de esta otra clase que corresponde a la tabla completa de imagen+leyenda y que nos permitía realzar el conjunto: tr-caption-container.

table.tr-caption-container { padding: 10px; background: #ffffff; box-shadow: 1px 1px 5px #000000; }
td.tr-caption { font-family: Courier, "Courier New", monospace; }

Un bicho grande y colorao

Almacenar y recuperar datos Blogger. Variables DATA (2)

2012-01-19T17:00:00.000+01:00

Viene de Almacenar y recuperar datos Blogger. Variables DATA (1).

Cada tipo de dato va en una data distinta y así el navegador puede ir dibujando nuestra página con ellos. Un dato único es el nombre del blog (data:blog.title), pero ¿cómo se gestionan los que almacenan diversos datos como por ejemplo data:post.title que sirve para conseguir los títulos de todos y cada uno de los posts?

Pues para distinguir elementos homogéneos, por ejemplo una fecha de un post de la fecha de otro post, cada entrada tiene asignada automáticamente un número distinto (id, identificación) que va asociado a cada petición. Así, cuando pida de la correspondiente tabla de la base de datos un título de un post y además indique de qué post se trata (con la id), inequívocamente tendremos justo el título que se necesita.

Nos falta ver qué utilidad tiene saber esto, pero si a estas alturas lo tengo que explicar....

Como la relación de etiquetas es extensísima (pensad que TODO se guarda en ellas), a continuación sólo relaciono algunas de las variables que más se usan en las modificaciones de plantilla, así las tenemos más a mano:

GLOBALES

data:blog.title: Título del blog
data:blog.pageType: Tipo de página. item, archive o index.
data:blog.url: La dirección de la página en la que se está.
data:blog.homepageUrl: La dirección Home del blog.

CABECERA

data:title: El título (nombre) del blog
data:description: La descripción del blog

POSTS

data:olderPageUrl: Dirección para navegar hacia entradas más antiguas
data:olderPageTitle: El texto del enlace hacia entradas más antiguas
data:newerPageUrl: Dirección para navegar hacia entradas más recientes
data:newerPageTitle: El texto del enlace hacia entradas más recientes
data:commentLabel: El texto a usar para los comentarios. Ej: Opiniones

data:post.dateHeader: La fecha de cada post
data:post.id: La identificación numérica de cada entrada
data:post.title: El título del post
data:post.body: Todo el contenido del post, excepto fecha y título.
data:post.url: Dirección de cada entrada

data:post.labels: Las etiquetas de cada post. Hay que extraerlas con un bucle.
data:post.comments: Los comentarios asociados a cada post
data:post.numComments: Número de comentarios de un post

Ahora que has visto estas ¿está más claro? No. Pues el tema es que si necesitamos por ejemplo mostrar el número de comentarios en una portada a la que le hemos quitado cosas para que parezcan sumarios y no nos muestra ese número, sólo tendremos que añadir un <data:post.numComments/> dónde queremos que se vea.

O bien, podemos replicar el código de data:olderPageUrl y data:newerPageUrl para que existan dos bloques de enlaces de navegación por antiguos/recientes en nuestro blog. Actualmente yo tengo tres de estos, uno en la cabecera del post, en su pie y en el footer.

Otra utilidad es poder reconocer qué variable tengo que quitar para poder personalizar algo con mi propio texto o código. Por ejemplo, data:post.jumpText contiene el texto que se muestra cuando existe un "leer más" en el post, pero si no quiero usar el de la variable, sólo tengo que buscarla en el código y luego sustituirla entera por la palabra "Más" o "¿Quieres ver el artículo completo?" o lo que nos plazca. Igual podríamos hacer con partes más complejas.

Este es otro tipo de DATA

Si alguien quiere ver más sobre etiquetas data, en esta página de la ayuda de Blogger viene una lista bastante completa. Falta todo lo que se ha ido incorporando después de su publicación (2010), que ha sido mucho, pero creo que está lo más importante.

Por ejemplo, faltan aquellas que usamos para hacer sumarios sin javascript y que contenían una miniatura de imagen de cada post (data:post.thumbnailUrl), así como la otra que nos proporcionaba un pequeño resumen de texto (data:post.snippet).

Pero en cierta manera es fácil reconocerlas con una plantilla de pruebas: quitamos una cuyo contenido desconozcamos, nos fijamos en qué cosa desaparece y ¡voilá!. Es un sistema rudimentario, pero mientras Blogger no se digne a explicar con más detalle estas cosas, es la única solución que se me ocurre.

Almacenar y recuperar datos Blogger. Variables DATA (1)

2012-01-18T17:00:00.000+01:00

En varios artículos hemos usado o hecho referencia a las etiquetas data, pero realmente nunca hemos explicado qué son. A continuación vamos a poner remedio a eso.

El nombre oficial que Blogger le da a lo que un servidor denomina variables data o etiquetas data, es Layouts Data Tags o lo que es lo mismo traduciendo literalmente, Etiquetas de datos de diseño, lo cual nos da una pista de para qué sirven. Lejana, una pista somera, pero pista al menos.

Esencialmente son variables, un tipo de elemento de almacenaje de datos absolutamente imprescindible en cualquier sistema de programación. Una variable es un elemento con nombre propio que puede guardar un dato. Ese dato puede ir cambiando con el tiempo y con el transcurrir del código. De ahí su denominación como variable en contraposición con los elementos constantes.

La típica variable por excelencia es x, profusamente vista desde que comenzamos a estudiar ecuaciones simples, pero recordamos que también se podría denominar y, z, sigma, alfa, perico, etc.

Pues Blogger lo que hace con estas variables es llamarlas a todas con el prefijo data. De esta manera, todas tienen la estructura data:nombre o data:id.nombre, por ejemplo: data:description o data:label.name.

Esto no siempre es así, pero la zona nos va a dar una pista sobre dónde pueden ser usadas, ya que ninguna puede ser usada fuera del flujo de la plantilla de artilugios Blogger y algunas ni siquiera pueden ser usadas mas que en determinadas áreas. Dicho de otra manera, no funcionarán con código HTML y para que lo hagan, hay que usarlas dentro de los peculiares include e includables de Blogger, que no son más que una especie de rutinas que gestionan el contenido directamente con la base de datos.

Otro ejemplo ilustrativo para este caso. data.title guarda el título de los gadgets que añadimos, mientras que data:label.name guarda el nombre de las distintas etiquetas utilizadas en una entrada determinada. Esta última sólo la podemos usar dentro del includable que tenga la id='label' y esta es la pista definitiva para saber cuáles van a funcionar y dónde. Si tienen id.nombre, esa etiqueta sólo funcionará dentro de la id con idéntica denominación, en el ejemplo, label.

¿Y cómo funcionan? Pues cuando por ejemplo creamos un nuevo post, todos sabemos que mágicamente aparece en la web. Evidentemente no. Ni esto es magia ni es directo. Lo que pasa por el camino es que los datos que vamos guardando (bien en borrador, bien como publicación definitiva), se almacenan en una base de datos del servidor de Blogger.

Luego, cada vez que cargamos una página, el sistema va leyendo según le manda la plantilla, a través de esas variables data. Su contenido le dice qué es lo que tiene que "pintar" y su ubicación en la plantilla, dónde. Hablamos de la parte HTML de la plantilla, ya que la parte de estilo (CSS) es otra historia.

Por ejemplo, la fecha del post se puede recuperar escribiendo en el código data:post.dateHeader (post, fecha en cabecera). Podéis buscar en vuestra plantilla y veréis que está antes del elemento cabecera del post (post-header). Pues allí dónde pongamos esa data, aparecerá la fecha de la entrada y en este ejemplo, encima del post-header.

Esto sucede de la misma manera con todos los datos de la entrada: imágenes, gadgets, contenido de una entrada, comentarios, fechas de comentarios, autores, etc.

Todo sobre el nuevo sistema de comentarios Blogger

2012-01-17T20:58:00.000+01:00

Parafreseando la divertida película de Woody Allen, aquí todo lo que siempre quiso saber sobre los nuevos comentarios y nunca se atrevió a preguntar.

A continuación, una pequeña guía de artículos publicados en sitios de toda confianza, que explican diversos aspectos sobre el nuevo sistema de comentarios anidados. Incluimos fuentes diversas por si algunos no nos explicamos adecuadamente y la manera de otros os resulta más fácil de entender.

Actualización (25-01-2012): Iré incorporando a esta entrada las nuevas publicaciones sobre este tema que aporten alguna novedad y sobre todo, que solucionen algún problema. De hecho ya hay algunas más.

Actualización (27-01-2012): Salvo lo de los gadgets de Twitter ya están todos los problemas solucionados con trucos fácilmente reversibles. Hoy incorporo enlace para resolver cuando el foco se va directo a los comentarios en IE y FF al cargar un post.

Resumen de artículos publicados sobre el nuevo sistema de comentarios anidados Blogger.

☑ LA NOTICIA.

Involucra a tus lectores con comentarios anidados. Blogger Buzz.
Nueva función en los comentarios del blog (responder comentarios). Compartidisimo.
Las nuevas plantillas añaden Reply (sistema de respuesta en comentarios). Gem@ Blog.
Nuevos comentarios anidados en Blogger. Oloblogger.

☑ ALGUNAS VENTAJAS.

3 grandes beneficios que ofrecen los comentarios anidados y cómo habilitarlos en plantillas personalizadas. Compartidisimo.

☑ PARA AQUELLOS A LOS QUE NO SE LES CARGÓ EL NUEVO SISTEMA.

Nueva función en Blogger: ¡Comentarios anidados y botón responder!. Ayuda Bloggers.
Blogger: Comentarios anidados, reply y dudas. Vagagundia.
Insertar respuestas (replies) Blogger en plantillas modificadas. Oloblogger.

☑ PROBLEMAS CONOCIDOS Y SOLUCIONES
* Incompatibilidad con gadgets oficiales Twitter (por resolver)
* Incompatibilidad con Internet Explorer (~~por resolver~~ resuelto)
* Incompatibilidad con Scriptaculous (~~por resolver~~ resuelto)
* Problemas de paginación en comentarios tradicionales (~~por resolver~~ resuelto)
* Desaparición del estilo en comentarios tradicionales (~~por resolver~~ resuelto)
* Foco en comentarios al acceder desde Firefox (~~por resolver~~ resuelto)

Los comentarios anidados en Blogger (Responder comentarios). Ciudad Blogger.
Blogger: Comentarios anidados, reply y dudas. Vagabundia.
Posible solución al no funcionamiento del 'botón' respuesta. Grupos Google.
Más problemas con los comentarios de Blogger. Vagabundia.
¿Blog en blanco? Solución al problema con IE tras instalar los comentarios anidadosOloblogger.
Otra alternativa para solucionar el problema con Internet Explorer. Felipe en un comentario.
Una solución para la paginación de comentarios antiguos. Oloblogger.
Los comentarios y el salto al final de la página. Vagabundia.

☑ CÓMO CONFIGURAR EL ESTILO VERSIÓN RELÁMPAGO.

Volver al diseño de comentarios previo a las replies. Oloblogger.

☑ CLASES PARA CONFIGURAR EL ESTILO A CONCIENCIA DE FORMA ORTODOXA.

Blogger. Configurar comentarios anidados. Lista de clases. Oloblogger.

☑ CÓMO ANULAR EL NUEVO SISTEMA Y DEJAR LAS COSAS COMO ESTABAN.

Blogger: Comentarios anidados, reply y dudas. Vagabundia.
Volver al diseño de comentarios previo a las replies. Oloblogger.

☑ CONTADOR NUMÉRICO CSS PARA LOS COMENTARIOS ANIDADOS.

Numerar comentarios anidados en Blogger. Ayuda Bloggers.
Numerar los nuevos comentarios de Blogger. Vagabundia.
Numerar los nuevos comentarios Blogger sin JavaScript. Opción con sub-índices. Oloblogger.
Alternativas para numerar los comentarios. Vagabundia.

☑ PERSONALIZAR EL ESTILO DE LOS COMENTARIOS DEL AUTOR DEL BLOG

Modificar los comentarios del autor en los nuevos comentarios. Emilio Cobos CMC.
Destacar los comentarios del autor. Compartidisimo.

☑ PERSONALIZACIONES DIVERSAS

Emoticones en el nuevo sistema de comentarios. Vagabundia.

Formato a imágenes con CSS. Particularidades Blogger.

2012-01-17T17:00:00.000+01:00

En entradas precedentes con similar título al de esta, hemos visto cómo aprovechar las propiedades CSS border, padding y box-shadow para que las imágenes de nuestras entradas luzcan un poco mejor y ahora vamos a ver la manera de usar en nuestro beneficio, todo ese código extraño que Blogger se empeña en meter automáticamente en todas las imágenes que subimos.

El código que se genera al cargar una imagen desde el editor es este:

Si bien la etiqueta style que aparece al principio tiene como objeto eliminar cualquier float precedente o posterior que pudiera modificar la posición de la imagen, así como alinear al centro la misma, la clase separator y el posterior imageanchor del enlace son todo un misterio.

Podéis probar a quitar esos dos elementos en cualquier imagen subida y comprobaréis que no se altera nada el resultado. Aquí un ejemplo sin ellos:

Pero en fin, estas son las cosas que tiene esta plataforma y mientras sean de sobra y no de falta, supongo que alguna razón tendrá Blogger para incluirlas. No podemos hacer nada por remediarlo más que quejarnos, así que ¿para qué vivir amargados?

Sin embargo, lo que sí podemos hacer es aprovechar este código sobrante para distinguir estilos distintos para la capa del enlace y la de la imagen, de manera que tengamos dos elementos con los que poder jugar.

Si por ejemplo intentamos hacer eso sin ninguna capa adicional, tendríamos que atacar con CSS la clase .post a y la .post img. Si lo hacemos así, con .post img las modificaciones afectarán efectivamente a las imágenes de los posts (sólo de los posts), pero con la primera, se cambiarán TODOS los enlaces de cada entrada y no sólo los correspondientes a imágenes. Podéis imaginar el resultado de poner padding, background, sombras y todo eso en todos los enlaces. Un desastre.

Pero ahora tenemos ese separator que nos puede ayudar. Por ejemplo de esta manera, para hacer un marco con border a todas las imágenes y otro exterior con padding, sólo tendremos que añadir en nuestro CSS:

.post .separator a {
display: inline-block;
background: url(http://2.bp.blogspot.com/-msS_GOal2RA/Twyb3nNNEYI/AAAAAAAABnE/rLETqcl0RNw/s1600/pergamino.jpg);
padding: 30px;
border: 1px solid #333333;
-webkit-box-shadow: 1px 1px 5px #000000;
-moz-box-shadow: 1px 1px 5px #000000;
box-shadow: 1px 1px 5px #000000;
}
.post img {
padding: 10px;
background: #000000;
-webkit-box-shadow: 1px 1px 2px #000000;
-moz-box-shadow: 1px 1px 2px #333333;
box-shadow: 1px 1px 2px #333333;
}

Lo de ahora lo marqué en negrita con toda la intención porque tengo que recordaros que si vuestro blog no es nuevo, anteriormente las imágenes se insertaban sin este tipo de código extra y por tanto, en posts antiguos no funcionará el truco. En los nuevos, sin problema.

¿Y qué ocurre cuando aplicamos una leyenda a la imagen? Pues que Blogger nos monta una tabla de dos filas y una columna (dos huecos), en la que la primera celda es para la imagen y la de abajo para la leyenda. Todo estiradito para que se vea mejor, sería esto:

<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;">
<tbody>
<tr>
<td style="text-align: center;">
<a href="URL_IMAGEN_TAMAÑO_ORIGINAL" imageanchor="1" style="margin-left: auto; margin-right: auto;">
<img border="0" height="141" src="URL_IMAGEN_REDIMENSIONADA" width="400" />
</a>
</td>
</tr>
<tr>
<td class="tr-caption" style="text-align: center;">
Leyenda
</td></tr>
</tbody>
</table>

Pues también a a esa tabla y a la clase tr-caption-container que incluye le podemos sacar también provecho de una manera similar. Ahora incorporaremos también un gran padding, un borde superior con dashed, otro interior con un padding y un par de esquinas redondas:

Imagen: Nosabemosquién

.tr-caption-container {
border-top: 2px dashed #cccccc;
padding: 40px 40px 30px 40px;
background: #ffffff;
-webkit-box-shadow: 1px 1px 5px rgba(50, 50, 50, 0.75);
-moz-box-shadow: 1px 1px 5px rgba(50, 50, 50, 0.75);
box-shadow: 1px 1px 5px rgba(50, 50, 50, 0.75);
-webkit-border-radius: 0px 0px 40px 40px;
-moz-border-radius: 0px 0px 40px 40px;
border-radius: 0px 0px 40px 40px;
}
.tr-caption-container1 img {
padding: 4px;
border:2px groove #ffffff;
}

Evidentemente podemos simultanear en nuestra plantilla ambos estilos, usando uno (.separator) para las imágenes normales y el otro (.tr-caption-container) para las que incluyan una leyenda. Y no será necesario que esa leyenda tenga necesariamente texto.

Y para terminar un pequeño experimento combinando varias cosas y en especial esta última clase (tr-caption-container), algunas rotaciones y nth-of-type, una interesante pseudo-clase que en otra ocasión veremos con más detalle:

Un poquito más

Calma

La caída de las hojas

Pies para que os quiero

Contemplando el paisaje

Manzana de otoño

La chispa de la vida

¿Qué miras?

.tr-caption-container {
display: inline-block;
text-align:center;
padding: 10px;
background: #ffffff;
-webkit-box-shadow: 1px 1px 5px rgba(50, 50, 50, 0.75);
-moz-box-shadow: 1px 1px 5px rgba(50, 50, 50, 0.75);
box-shadow: 1px 1px 5px rgba(50, 50, 50, 0.75);
}
.tr-caption-container:nth-of-type(4n-3) {
float:left;
-webkit-transform: rotate(-5deg);
-moz-transform: rotate(-5deg);
transform: rotate(-5deg);
}
.tr-caption-container:nth-of-type(4n-2) {
float:right;
-webkit-transform: rotate(3deg);
-moz-transform: rotate(3deg);
transform: rotate(3deg);
}
.tr-caption-container:nth-of-type(4n-1) {
float:left;
-webkit-transform: rotate(8deg);
-moz-transform: rotate(8deg);
transform: rotate(8deg);
}
.tr-caption-container:nth-of-type(4n) {
float:right;
-webkit-transform: rotate(-8deg);
-moz-transform: rotate(-8deg);
transform: rotate(-8deg);
}
.tr-caption-container:last-child {
clear:right;
}

Si algo de esto no os funciona, es muy posible que alguna definición en vuestra plantilla anule o interfiera en alguna de estas. Por ejemplo, si tenéis definido un .post img { border: 0; }, por más que intentéis hacer que desde separator o tr-caption-container se muestre un borde, img afecta desde "mas cerca" y por tanto tendrá prioridad. La forma de saltar esto es añadiendo un !important a las propiedades nuevas que no funcionen.

Numerar los nuevos comentarios Blogger sin JavaScript. Opción con sub-índices.

2012-01-16T17:00:00.000+01:00

Ahora que disfrutamos de los nuevos comentarios -algunos estamos como McGyver en un desguace con ellos- la mayoría de scripts instalados anteriormente para numerarlos han dejado de funcionar, así que creo que es un momento ideal para presentar una alternativa en mi opinión mucho más ventajosa.

Se trata de una interesante propiedad CSS2 llamada content que nos permite insertar casi cualquier tipo de contenido delante o detrás de un elemento cualquiera y que incluye un no menos preciado complemento denominado counter.

La combinación de ambas la leímos hace un tiempo entre otros sitios en Vagabundia y como ya habréis adivinado, con esas dos cosas es con lo que vamos a crear un contador y situarlo en cada comentario.

Como sólo vamos a utilizar CSS, el sistema tendrá una carga mucho más rápida que con JavaScript y además, no tendremos que tocar mas que la parte de estilo de nuestra plantilla; la menos arriesgada si la pifiamos.

La cuestión es encontrar una clase a partir de la cual poner el contador a cero sin problemas y otra por la que cada vez que pasemos se vaya imprimiendo e incrementando ese valor sin saltos ni duplicidades.

Pero una vez desgranado el nuevo estilo de los comentarios anidados esto se hace más fácil.

Si queréis probar ya y ver cómo funciona esto sobre la marcha, sólo tenéis que insertar en la parte CSS de la plantilla (antes de ]]></b:skin>) lo siguiente:

.comments-content {
counter-reset: contarcomentarios;
}

.comment-thread li:before {
content: counter(contarcomentarios);
counter-increment: contarcomentarios;
float: right;
font-size: 24px;
color: #666666;
}

Lo que hace esto casi que se puede leer:

Cuando se inicia el bloque general de comentarios (.comments-content) un contador que hemos llamado contarcomentarios se activa y se pone con un valor inicial de 1.
Luego, cada vez que el flujo del código pasa por un comentario de cualquier nivel, bien sea un comentario principal o una respuesta (.comment-thread li), content nos meterá delante (:before) del cuerpo del comentario, el número por el que va el contador en ese momento.
A continuación se incrementa en una unidad el contador (counter-increment).

La siguiente vez que el código lea otro comentario o lo que es lo mismo, pase de nuevo por un .comment-thread li, se repetirán los pasos 2 y 3, pero cada vez con un mayor valor.

El resto del estilo (float/font-size/color) sirve sólo para dar estilo al numerito que se mostrará. Si por causa de otras modificaciones en vuestros comentarios el número no quedara en el lugar exacto dónde deseáis, siempre podéis añadir en ese mismo sitio márgenes para reubicarlo.

Cuando probéis esto -si la impaciencia no os ha podido ya- observaréis que se numeran todos los comentarios y respuestas sucesivamente, sin distinción de si son de los primeros o de las segundas.

Esto para mí y seguramente para otros que con frecuencia usen esos números como referencia a algún comentario concreto, puede ser un inconveniente. Pensad que cuando se introduzca una reply, todos los comentarios y respuestas que haya más abajo se renumerarán.

Para solucionar esto nos complicamos un poco más la vida y reestructuramos el anterior código para hacer una numeración distinta como si fueran capítulos y secciones. Para eso tenemos que echar mano de otras clases distintas para distinguir cuándo contamos comentarios (contarcomentarios) y cuando respuestas (contarbis)

.comment-thread ol {
counter-reset: contarcomentarios;
}

.comment-thread li:before {
content: counter(contarcomentarios,decimal);
counter-increment: contarcomentarios;
float: right;
font-size: 24px;
color: #666666;
}

.comment-thread ol ol {
counter-reset: contarbis;
}

.comment-thread li li:before {
content: counter(contarcomentarios,decimal) "." counter(contarbis,lower-latin);
counter-increment: contarbis;
float: right;
font-size: 18px;
color: #666666;
}

Si preferís otra presentación para la numeración, podéis cambiar el decimal y/o el lower-latin. Los valores posibles son:

decimal: Números decimales, comenzando de 1.
decimal-leading-zero: Números decimales completados con ceros iniciales (01, 02, 03, ..., 98, 99).
lower-latin: Letras en minúsculas (a, b, c, etc.)
upper-latin: Letras en mayúsculas (A, B, C, etc.)
lower-roman: Números romanos en minúsculas (i, ii, iii, etc.)
upper-roman: Números romanos en mayúsculas (I, II, III, etc.)

La única diferencia con repecto a los sistemas con JavaScript es que perdemos el enlace permanente al comentario, que por cierto no he visto en las fechas del nuevo sistema y que sí estaban en las del anterior. Pero eso es algo que aunque podríamos arreglar nosotros haciendo unas pequeñas modificaciones, esperaré a que arregle Blogger para no interferir en las actualizaciones que posiblemente quedan por venir. En cualquier caso las ventajas de este método de numeración creo que superan a los inconvenientes.

Volver al diseño de comentarios previo a las replies

2012-01-14T12:30:00.000+01:00

Aquí vamos a ver dos cosas distintas. Una es anular el nuevo sistema de comentarios anidados con respuestas y la otra es una forma rápida de recuperar casi todo nuestro diseño anterior de comentarios manteniendo el nuevo sistema.

Llevo ya cuatro posts seguidos sobre el mismo tema, pero es que las preguntas se suceden y me cuesta menos redactar una entrada que contestar individualmente a cada uno. Además, si no lo hago así, todo lo que tengo visto se me olvida a mi también ;)

Siempre lo advierto cuando es así, pero es que las chapuzas que me evitan trabajar de más son mis favoritas y lo segundo que veremos es una de ellas. Así que ya va este aviso por delante.

Se supone que debería existir un opción en el escritorio para poder activar/desactivar los comentarios anidados y de hecho hay una nueva variable data que tiene toda la pinta de ser para ese fin: data:post.showThreadedComments. Pero de momento, o no sale en todos los blogs o a Blogger se le ha olvidado incluirla en dicho escritorio.

Por lo tanto para poder modificar eso ahora, no nos queda otro remedio que ir a la plantilla. Pero tranquilos, que dejar las cosas como estaban es sencillo.

Blogger gestionaba los comentarios tradicionales con una rutina llamada comments y lo que ha hecho ahora, ha sido introducir una nueva llamada threaded_comments para los nuevos. Ambas están ahora mismo en todas las plantillas y el que se vean o no, simplemente es cosa de un trozo de código que llama a una u otra.

En Insertar respuestas (replies) Blogger en plantillas modificadas precisamente explicamos el mecanismo inverso, que era habilitar los comentarios anidados. Pues para desactivarlos tenemos que hacer justo lo contrario. Dónde veamos un...

<b:if cond='data:post.showThreadedComments'>
<b:include data='post' name='threaded_comments'/>
<b:else/>
<b:include data='post' name='comments'/>
</b:if>

...sustituimos por un simple...

<b:include data="post" name="comments"/>

Con eso volveréis a tener los comentarios "normales". Cuando algún día incluyan la opción para quitar o poner los nuevos, mi recomendación es que se restituya el código original.

Y ahora el apaño que al menos a mí me ha dado resultado.

Podemos personalizar los nuevos comentarios con el CSS que incorpora ahora la plantilla, pero si tenéis prisa o no os aclaráis mucho con el CSS o con la maraña de clases y subclases, podéis hacer una sencilla conversión.

El resultado no será exactamente el mismo pero se aproximará bastante y no corremos peligro de cargarnos nada, ya que lo haremos todo desde la parte de estilo.

Partimos de la base de que teníais personalizados los comentarios clásicos. Para eso, necesariamente había una parte en la que a #comments-block, .comment-author y todas estas clases que se usaban anteriormente le teníais asignadas propiedades; las que venían de serie más vuestras propias modificaciones.

Pues bien, ahora lo que podéis hacer es añadir a la clase antigua la equivalente de entre las nuevas clases. Aquí es dónde el truco no funciona al 100% porque no todas tienen un equivalente exacto, pero haciendo esto podéis comprobar que si no igual, todo quedará casi igual que antes rápidamente. Luego es cuestión de terminar de ajustar si es necesario, pero en la mayoría de casos pienso que no lo será.

Para que varias clases tengan el mismo estilo sólo hay que ponerlas separadas por una coma. Así, cuando veamos un...

.claseantigua { propiedades }

...sólo tendremos que añadir una coma, un espacio y la clase nueva para que la cosa funcione:

.claseantigua, .clasenueva { propiedades }

Y estas son las equivalencias que yo he encontrado, figurando en la primera línea la clase antigua. Vosotros sólo tenéis que añadir las líneas sucesivas y dejar las propiedades tal y cómo estén.

.comment-form,
.comments .comments-replybox,
.comments .comment-replybox-single,
.comments .comment-replybox-thread { propiedades }

#comments h4,
.comments h4 { propiedades }

#comments-block,
.comments-content { propiedades }

.comment-author,
.comments .comments-content .user { propiedades }

.comment-body,
.comment-thread li { propiedades }

.comment-timestamp,
.comments .comments-content .datetime { propiedades }

Las clases para los avatares y para el pie del bloque de comentarios continúan con la misma denominación.

Si queréis dar un estilo distinto a las respuestas con respecto a los comentarios principales, para las replies podéis incorporar la clase .comment-thread li li con las propiedades que queráis. Por si acaso, el doble li no es un error ;)

Suerte.

Blogger. Configurar comentarios anidados. Lista de clases.

2012-01-13T15:19:00.001+01:00

Es muy probable que tuvieras personalizada la parte de los comentarios de tu blog y que con el nuevo sistema de comentarios anidados con respuestas, este se haya ido al garete. Lo probable es lo primero, pero si los tenías así, lo segundo es seguro.

Ocurre que el nuevo sistema incorpora un buen montón de código de todo tipo y ha cambiado radicalmente la nomenclatura de todas las clases que antes controlaban el aspecto de los comentarios. Si miráis en vuestro código, los .comment-author, #comment-block y todas esas clases que usábamos hasta ahora, siguen estando y el problema no es que se hayan borrado. El problema es que ya no sirven para nada porque los nuevos comentarios no están sujetos a ellas sino a otras con otros nombres.

Ante esto tenemos dos soluciones.

La primera que es la que mandan los cánones, sería definir las nuevas clases con las propiedades que nos interesan. La verdad es que en esta ocasión Blogger se ha portado bien dentro de lo que cabe y nos ha incluido la lista completa dentro de un includable que podéis localizar con Expandir plantillas de artilugios seleccionado y buscando la cadena threaded_comment_css.

Si queréis modificar algo lo podéis cambiar en ese mismo sitio según la guía que publico al final de esta entrada, pero si no vais a cambiar demasiadas cosas, quizás os convenga incluir en la parte CSS de la plantilla sólo las clases a modificar y las nuevas propiedades. Así dejamos el código original de Blogger por si alguna vez lo necesitamos.

Esto último se puede hacer teniendo presente que las propiedades que existan en la parte del includable que no se modifiquen en la parte CSS, persistirán.

Esto es que si por ejemplo hay un borde en la clase .comments del includable y nosotros no hacemos ninguna referencia a border en la clase .comments de nuestro CSS, el borde se dibujará igualmente. Siguiendo este ejemplo habría que incluir en nuestro CSS un .comments {border: 0;} para que se anulara.

Esta es la lista completa que como podréis ver cuando miréis allí, ya incorpora una serie de propiedades por defecto para cada clase.

Para que se entiendan las anotaciones, para mi un comentario es lo que antes se entendía como tal, un bloque, lo que queda totalmente a la izquierda con el estilo estándar. El comentario puede incluir respuestas o no. Estas respuestas son las que aparecen dentro del bloque de un comentario y se ven con un sangrado o margen izquierdo.

La segunda solución más chapucera y para una emergencia, otro día.

Contenedor general de todo el artilugio
.comments {}

Contenedor general de comentarios. Excluye encabezamiento
.comments .comments-content {}

Enlaces Responder (y Suprimir)
.comments .comment .comment-actions a {}
.comments .comment .comment-actions a:hover {}

Lista principal de comentarios. Cada elemento (li) incluye 1 comentario y sus respuestas
.comments .comments-content .comment-thread ol {}

En combinación con otras clases, insertar un padding para que quede de menor ancho
.comments .comments-content .inline-thread {}

Bloque de respuestas a un comentario. Incluye botón para desplegar
.comments .comments-content .comment-replies {}

Bloque interior de respuestas a un comentario
.comments .comments-content .comment-thread {}
Idem anterior para ocultar el bloque cuando no hay respuestas
.comments .comments-content .comment-thread:empty {}

Aspecto general de cada comentario/respuesta
.comments .comments-content .comment {}

Diferencia padding y border para el primer/último comentario
.comments .comments-content .comment:first-child {}
.comments .comments-content .comment:last-child {}

No lo encuentro en uso. Posiciona relativamente
.comments .comments-content .comment-body {}

Bloque de autor+icono+fecha
.comments .comments-content .comment-header {}
Nombre y enlace al autor del comentario/respuesta
.comments .comments-content .user {}
Un icono relacionado con el autor, actualmente sin contenido
.comments .comments-content .icon.blog-author {}
Fecha/hora del comentario/respuesta
.comments .comments-content .datetime {}

El texto de cada comentario/respuesta. Salen siempre con estilo blockquote si este está definido en la plantilla
.comments .comments-content .comment-content {}

Lo desconozco. Parecen los enlaces para suprimir el comentario por parte de quién lo grabó
.comments .comments-content .owner-actions {}

Formularios para escribir comentarios/respuestas
.comments .comments-replybox {}
.comments .comment-replybox-single {}
.comments .comment-replybox-thread {}

Desconocido para mí
.comments .continue {}
.comments .continue a {}

Enlace para mostrar más comentarios cuando hay más de 200
.comments .comments-content .loadmore {}
.comments .comments-content .loadmore.loaded {}

Enlace para plegar/desplegar respuestas
.comments .thread-toggle {}
Iconos flecha para plegar/desplegar respuestas
.comments .thread-expanded .thread-arrow {}
.comments .thread-collapsed .thread-arrow {}

Contenedor avatar comentarista
.comments .avatar-image-container {}
Imagen avatar comentarista
.comments .avatar-image-container img {}

Insertar respuestas (replies) Blogger en plantillas modificadas

2012-01-12T22:15:00.005+01:00

Hace un rato comentamos sobre la nueva función de comentarios anidados, así como la posibilidad de que a algunos no les funcionara si tenían su plantilla muy modificada. Pues realmente no es necesario que esté muy modificada pero si se ha tocado en un punto sensible, la cosa no pitará.

Sin embargo, creemos haber encontrado la solución y esta no es nada complicada.

Tenéis que editar la plantilla y con Expandir plantillas de artilugios seleccionado, buscar este trozo de código, que de todo lo que se ha insertado nuevo es la única parte que probablemente os haya quedado sin actualizar. En un principio, existen estas dos posibilidades:

<b:if cond='data:blog.pageType == "item"'>
<b:include data='post' name='comments'/>
</b:if>

<b:if cond='data:blog.pageType == "static_page"'>
<b:include data='post' name='comments'/>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<b:include data='post' name='comments'/>
</b:if>

Bien, pues tanto si tenéis una opción como la otra, todo eso hay que sustituirlo por este nuevo código y ya os funcionará lo de las respuestas:

<b:if cond='data:blog.pageType == "static_page"'>
<b:if cond='data:post.showThreadedComments'>
<b:include data='post' name='threaded_comments'/>
<b:else/>
<b:include data='post' name='comments'/>
</b:if>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:post.showThreadedComments'>
<b:include data='post' name='threaded_comments'/>
<b:else/>
<b:include data='post' name='comments'/>
</b:if>
</b:if>

Notaréis que el estilo de presentación de los comentarios y las respuestas os cambia, pero eso ya es cosa del CSS, porque este nuevo sistema utiliza unas clases distintas a las del anterior.

De momento, si os salen unas comillas o similar es porque tendréis definidas propiedades para blockquote. Si no os gustan, simplemente tenéis que cambiar de nombre en la parte CSS, vuestra clase blockquote por .post-body blockquote. De esa manera seguiréis teniendo el estilo que definisteis para citas en los posts, pero no se aplicará en los comentarios.

Actualización: Parece ser que cuando se usa scriptaculous, hay algún tipo de conflicto. Con esa librería los enlaces responder aparecen, pero al hacer clic en ellos no funcionan. Evidentemente, quitando la librería las respuestas funcionan al 100%, pero esto ya es decisión de cada cual: respuestas o efectos. A un servidor le vienen muy bien este tipo de comentarios así que he optado por lo primero. Posiblemente pronto cambie a jQuery que me da la impresión que actualmente da menos problemas y es más completa.

Nuevos comentarios anidados en Blogger

2012-01-12T20:44:00.003+01:00

Hace un par de semanas se introdujo un cambio en las plantillas Blogger, que incorporó un nuevo includable con un críptico pero ahora revelador nombre. Este era threaded_comment_js, comentarios enroscados.

La rutina es un nuevo sistema de comentarios anidados que nos permite responder a uno de ellos en concreto y así distinguirlos de los comentarios generales sobre el post.

Blogger Buzz informa sobre ello no con demasiados datos. Comentan que para activar este sistema en tu blog no hay que hacer nada. Bueno, nada siempre que tengas activada la posibilidad de comentar, activado el feed en "Completo" y marcada la opción comentarios incrustados "Debajo de la entrada".

Si tienes eso, tus lectores y tú podréis disfrutar de un sistema similar al de una conversación, cosa que a mi parecer es una muy buena mejora.

El sistema funcionará tanto en plantillas clásicas como en las del nuevo diseñador, pero la parte mala como con todo este tipo de cosas, es que si has trasteado demasiado en el código, puede que te hayas cargado algo que no haya permitido del todo la actualización.

Con más tiempo veremos la forma de poder restaurar este artilugio para esos casos.

Formato a imágenes con CSS. Padding.

2012-01-12T17:00:00.000+01:00

En la anterior entrada vimos la manera más sencilla de realzar imágenes en las entradas usando border. Una segunda propiedad que nos permite añadir posteriormente más cosas es la que genera un margen o espacio interno. Eso es lo que en CSS se controla con la propiedad padding.

La diferencia entre padding y margin es que la segunda propiedad forma una especie de borde (con anchura) vacío de contenido, que sirve de separación exterior del elemento. Lo que hace padding es dejar también un área vacía, pero interior. En esta imagen se pueden ver dos capas con un margin:10px y un padding:15px. Para que sea visible, en la primera se han marcado con colores los efectos de aplicar esas propiedades con esos valores:

Pues bien, continuando con los efectos fáciles, otro muy socorrido es el del marco que también se puede conseguir añadiendo un padding y un fondo que rellenará con color ese padding:

.post img {
background: #333333;
padding:10px;
}

El efecto es idéntico al de border, pero nos permite hacer otras modificaciones adicionales como la siguiente, que consiste en añadir una sombra que hace que la imagen parezca una fotografía con marco. Para eso, también añadimos una sombra con box-shadow.

.post-body img {
background: #ffffff;
padding:10px;
-webkit-box-shadow: 1px 1px 5px #000000;
-moz-box-shadow: 1px 1px 5px #000000;
box-shadow: 1px 1px 5px #000000;
}

Habréis observado que la propiedad box-shadow está triplicada pero con distintos prefijos. Esto es porque es una propiedad CSS3 relativamente nueva y sólo las últimas versiones de los navegadores la soportan. Para que sea visible en la mayor variedad de ellos posible, utilizamos los kits de compatibilidad. En el ejemplo y siguiendo el mismo orden, los de Safari y Mozilla.

Siguiendo por lo anterior, si queremos añadir un efecto Polaroid, sólo tendremos que aumentar el padding de la parte inferior. En el siguiente ejemplo se ha hecho de 50px frente a los 10px del resto.

.post img {
background: #ffffff;
padding:10px 10px 50px 10px;
-webkit-box-shadow: 1px 1px 5px #000000;
-moz-box-shadow: 1px 1px 5px #000000;
box-shadow: 1px 1px 5px #000000;
}

Al hilo de esto, recordamos que el orden en el que se muestran los distintos valores tanto en padding como en margin, son respectivamente arriba, derecha, abajo e izquierda:

padding: 1px 2px 3px 4px;
padding: arriba derecha abajo izquierda

Para formar una especie de marco alrededor de una imagen, el uso de padding frente a border, nos permite usar ese fondo no sólo con un color plano, sino también con una imagen. En este caso simulamos que el poster está sobre un corcho:

.post img {
background: url(http://4.bp.blogspot.com/s1600/corcho.jpg);
padding:30px;
-webkit-box-shadow: 1px 1px 5px #000000;
-moz-box-shadow: 1px 1px 5px #000000;
box-shadow: 1px 1px 5px #000000;
}

Formato a imágenes con CSS. Clases.

2012-01-11T17:00:00.000+01:00

Es muy fácil tomar una imagen, abrir un editor y añadirle efectos de todo tipo, pero cuando llevamos publicadas una buena cantidad de entradas con ilustraciones, puede que nos demos cuenta de que si esto lo tenemos que hacer para todas y cada una de ellas, la tarea se vuelve muy, muy pesada.

Ahora imaginemos que un buen día queremos cambiar la plantilla y aquello que añadimos a nuestras imágenes ya no pega, o bien que simplemente nos cansamos de ese estilo y queremos usar otro. Está claro que tendríamos que descargar TODAS las imágenes, volverlas a editar y reponerlas en su sitio. Un coñazo, vamos.

Pues bien, las hojas de estilo (CSS) están para lo que están y que es principalmente facilitarnos la tarea de cambiar el aspecto de todos los elementos de todas nuestras páginas, desde un sólo sitio y de una sola vez.

Precisamente eso es lo que vamos a ver a continuación para las imágenes de las entradas de nuestro sitio: algunos sencillos sistemas para formatearlas desde la hoja de estilo.

El resultado puede no ser tan espectacular como con un editor de imágenes, pero seguro que la ventaja del ahorro de tiempo nos compensa con creces.

En un principio, para cambiar cualquier cosa que afecte a las imágenes sólo tenemos que incluir en nuestra plantilla las propiedades necesarias para la etiqueta img, que es con seguridad la que llevan todas. Por ejemplo, pongamos un borde negro sólido de 10px. Nótese que no lleva ningún punto delante, ya que no se trata de una clase creada ex-profeso para nuestro sitio, sino una etiqueta general de HTML:

img {border: 10px solid #000000;}

Podéis probar esto pero teniendo en cuenta dos cosas:

La primera es que atacando directamente la etiqueta img, cambiaremos en un principio, el estilo de TODAS las imágenes del sitio web, tanto las de las entradas como las de la barra lateral o las de los gadgets. Hasta los iconos de edición rápida que sólo vemos los administradores se verán con un borde con el código del ejemplo.
La segunda es que si hay otra clase más cercana (rodeando) a la imagen que incluya también esta etiqueta (img), el código que se ejecutará con prioridad será este último más cercano, quedando sin efecto el primero para esos elementos en concreto

Es el caso genérico de las plantillas Blogger, que suelen incluir formatos específicos para las imágenes de las entradas. Si buscáis en vuestro código hay muchas posibilidades de que encontréis algún .post img o un .post-body img.

Así las cosas, si por ejemplo tenemos el siguiente CSS y HTML, todas las imágenes se verán con un borde negro excepto las de las entradas, ya que las propiedades de la clase .post mandarían sobre las genéricas por estar las imágenes dentro de esa clase:

img {border: 5px solid #000000;}

.post img {border: 0px;}

Esto de la prioridad se puede saltar añadiendo !important a los valores de cualquier propiedad. Esa instrucción hace que lo que está junto con ella se ejecute prioritariamente, obviando lo antes explicado de la cercanía. Por tanto, para probar lo del borde a todas las imágenes y saltarnos cualquier otra clase que modifique ciertas imágenes, habría que añadir ese comando:

img {border: 5px solid #000000 !important;}

Otra opción para no usar !important sería buscar a mano las clases existentes que modifican imágenes y cambiar sus propiedades o incluso eliminarlas, según el caso.

En las plantillas estándar que proporciona Blogger, las clases utilizadas son .post img para las plantillas clásicas y .post-body img para las del nuevo diseñador. Buscando en vuestra plantilla podréis encontrar cual es la que corresponde en vuestro caso particular.

Feliz 2011 ¡Oops! (transiciones)

2011-12-31T19:41:00.000+01:00

Actualización: Me hubiera gustado poner el código con el que hice esto, pero no sé por qué motivo, por más que lo he intentado, parte se interpreta y se va todo al carajo. Será otra vez... quizás el año que viene.

❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄ . ❄

Pasa el puntero por encima para arreglar esto...

FELIZ

201

Solucionando los problemas con el botón +1

2011-12-29T17:00:00.000+01:00

Como es habitual, los misterios de Blogger (y por tanto Google) son a menudo insondables. En este caso estamos ante el gran misterio de los botones +1, esos que si uno quiere tener un buen posicionamiento en el gigante del buscador, parece que cada vez toman mayor importancia.

El botón no sale, sale pero no refleja los +1 que realmente lleva acumulados, cuando coinciden dos botones en la misma página lo mismo desaparece un botón que el otro sale a cero... En fin, diversos avatares que con lo sencilla que es la instalación del botón, parecen increíbles.

Servidor no había tenido nunca este problema hasta que hace unos días se puso a trastear la plantilla y tocó algo sin recordar qué. Eso provocó estos problemas que comento.

Pero afortunadamente, el Sr. Pizcos publicó ayer un artículo que me hizo recordar dónde estaba el quid de la cuestión. Y este no es otro que saber el lugar adecuado dónde colocar el código del script.

Hay que distinguir entre el propio código que captura y genera los datos del botón y el código que lo "pinta" en web.

El primero hay que situarlo antes de </body> ya que precisamente las pegas surgen cuando se coloca en el sitio que para nosotros debería ser el normal (<head>). Podéis usar el script normal o el asíncrono. Este último sirve para que la página cargue sin la interferencia del botón. Aquí están los dos y podéis usar el que prefiráis, siempre teniendo en cuenta situarlo antes de </body>:

Estándar

<script type='text/javascript' src='https://apis.google.com/js/plusone.js'></script>

Asíncrono

<script type='text/javascript'>
//<![CDATA[
window.___gcfg = {lang:"es"};

(function() {
var po = document.createElement("script"); po.type = "text/javascript"; po.async = true;
po.src = "https://apis.google.com/js/plusone.js";
var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(po, s);
})();
//]]>
</script>

Una vez metido esto en la plantilla, ahora sólo tenemos que poner el siguiente código dónde queramos que aparezca el botón (post-footer, post-header, etc.)

<g:plusone></g:plusone>

Pero si por cuestiones de diseño, el botón debe aparecer más de una vez por página, por ejemplo como ocurre en el Home cuando se ven varios posts de una tacada, a este código hay que añadirle la dirección de la entrada correspondiente para que no haya conflictos. En Blogger, esta dirección la conocemos por la variable data:post.url:

<g:plusone expr:href='data:post.url' ></g:plusone>

Y cómo ya comentamos en una entrada anterior, si además queremos poner un botón adicional para hacer +1 en nuestra dirección principal, directamente ponemos dicha dirección y listo:

<g:plusone href="http://www.oloblogger.com" ></g:plusone>

Como podéis comprobar, actualmente en esta misma entrada coexisten sin problemas ese botón de arriba que va sólo sobre la dirección principal, el de la barra lateral con el mismo destino, otro en la parte superior del post con referencia a la dirección de la entrada y otro en el pie del post con idéntico puntaje.

Y tampoco habrá ningún inconveniente si se utilizan simultáneamente los botones sociales que nos proporciona Blogger de serie.

Sólo necesitas 5 herramientas para escribir los mejores posts

2011-12-28T10:30:00.000+01:00

Crédito

Existen millares de artículos sobre los mejores trucos para crear un blog de éxito y seguro que alguna vez habéis leído artículos de esta guisa:

12 consejos para tener éxito con un blog
Decálogo de errores de los malos blogueros
Crear un blog exitoso
Cómo tener un blog de éxito y tener un buen negocio en Internet
Las 3,1416 herramientas imprescindibles para los mejores sitios

Yo siempre me he preguntado cómo es posible que muchos de esos sitios que conocen tan bien los secretos del buen bloguero y que son capaces hasta de sintetizarlos en unos pocos puntos, tienen un lugar digamos discreto en el universo de La Red.

La respuesta es evidente y es que cualquiera sabe dar consejos. Otra cosa es que esas recomendaciones sean realmente útiles o que sean fáciles de aplicar y sobre todo, que sean acertadas. Tampoco olvidemos que no existen fórmulas universales y que lo que a unos les funciona, a otros no tiene por qué.

Así es como excuso que yo nunca haya realizado ninguna entrada de este estilo hasta ahora, pero como alguna vez hay que empezar, hoy voy a romper esa dinámica.

Me ha llevado mucho tiempo y trabajo llegar a esta conclusión, pero estas sí que son sin lugar a dudas, las 5 herramientas imprescindibles para escribir los mejores posts. Espero que os sean útiles.

Feliz 28 de Diciembre

Text-shadow y el brillo de la Navidad

2011-12-24T19:18:00.001+01:00

El protocolo navideño es una cosa que todavía no tengo muy bien desarrollada. Comidas, felicitaciones, espumosos, espirituosos, compras, regalos, árbol, adornos, pesebre... Mucho ajetreo para mí. Pero hoy toca lo que toca y aquí no podemos dejar que penséis que somos ajenos al buen rollo que circula entre todos por estas fechas. Todos tenemos nuestro corazoncito aunque no lo parezca.

Así que hoy vamos a hacer un dos en uno y vamos a cumplir con la tradición sin dejar de hacer lo que por aquí acostumbramos, aprender cosillas de código y en esta ocasión, a costa de la propiedad text-shadow. También usaremos un poquito de posicionamiento.

Las sombras con CSS3 se pueden acumular, esto es, situar distintas sombras a distintas distancias del objeto principal, cada una con un color distinto. Si a eso le añadimos un desenfoque (blur), podemos conseguir un efecto halo, neón, brillo o cómo prefiráis llamarlo.

Un ejemplo sería el siguiente:

text-shadow: -1px -1px 0px #ffffff, 1px 1px 0px #00000;

El primer dígito es el desplazamiento vertical, el segundo el horizontal, el tercero la imprecisión o amplitud del desenfoque y el último el color a utilizar (arriba-izquierda, preciso, color blanco). Con una coma es como se pueden ir añadiendo más sombras. En el ejemplo, la segunda sombra se ha proyectado abajo-derecha, sin blur y con color negro.

Ahora bien, si todas las sombras las fijamos en 0,0 -bajo el caracter- y lo que vamos cambiando es el color y la amplitud del desenfoque, podemos obtener cosas como las que hemos hecho con estas letras -que no dibujos- superpuestas sobre una imagen.

FELIZ

NAVIDAD

Para vosotros,
con mis mejores deseos.

Botones CSS con rollover sencillo

2011-12-23T21:00:00.000+01:00

Este trata sobre cómo construir botones similares a los que antes hacíamos con imágenes, pero que desde que existe el CSS3, podemos hacer simplemente desde la hoja de estilo.

El que se puedan hacer así tiene varias ventajas. Por un lado serán visibles para las arañas de los navegadores (las imágenes no lo son tanto), pero quizás las más importantes son la facilidad para cambiar el diseño o la redimensión automática.

Como hablamos de CSS sólo tendremos que crear una clase, darle propiedades y por último añadírsela al enlace que queremos convertir en botón. Nuestra clase se llamará boton -somos así de originales- y para que se entienda le iremos añadiendo propiedades poco a poco.

Un enlace básico sería así:

<a class="boton" href="URL_DESTINO1">Destino 1</a>

Destino 1

Como la clase boton todavía no existe, el enlace se verá con las propiedades por defecto que tengamos en nuestra plantilla. Lo primero que le incorporamos es un borde, un margen interno (padding), colores para fondo, texto y tamaño de este último. Por si los enlaces aparecen con un subrayado, también forzamos la eliminación de este detalle para que el aspecto sea más limpio.

.boton {
border: 1px solid #cccccc;
padding: 10px;
color: #ffffff;
background: #999999;
font-size: 28px;
line-height: 30px;
text-decoration: none;
}

Destino 1

Ahora le añadimos un efecto redondeado en las esquinas. Si todos los navegadores trabajaran igual nos bastaría con la primera propiedad. Las otras dos son para aumentar la compatibilidad:

Destino 1

Ya va tomando forma la cosa. Ahora es el momento de incorporar unas sombras que le den realismo y "altura". Al igual que con los bordes redondeados, las sombras hay que declararlas de tres maneras para que se puedan interpretar en más navegadores distintos. Y ya que estamos, también añadimos una sombra al texto con text-shadow.

Destino 1

Nos falta un último toque que será el degradado del fondo.

.boton {
border: 1px solid #cccccc;
padding: 10px;
color: #ffffff;
background: #999999;
font-size: 28px;
line-height: 30px;
text-decoration: none;

border-radius: 16px;
-webkit-border-radius: 16px;
-moz-border-radius: 16px;

box-shadow: 1px 1px 2px rgba(0,0,0,.5);
-webkit-box-shadow: 1px 1px 2px rgba(0,0,0,.5);
-moz-box-shadow: 1px 1px 2px rgba(0,0,0,.5);

text-shadow: #000000 0px 1px 1px;

background: -webkit-gradient(linear, left top, left bottom, from(#eeeeee), to(#999999));
background: -moz-linear-gradient(top, #eeeeee, #999999);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee', endColorstr='#999999');
}

Destino 1

Mola ¿verdad? Pues ya el último detalle es que el botón sea "pulsable". Esto es, que cuando pinchemos haga algo. Para eso eliminaremos las sombras y desplazaremos 1 píxel abajo-derecha. La pseudoclase active es lo que nos permite hacer esto, ya que es la que detecta esa pulsación.

Destino 1

En este último podéis pinchar y ver el efecto.

A partir de aquí vuestra imaginación es la que os permitirá cambiar la apariencia normal y la activa, así como también incorporar otra pseudoclase hover para cuando simplemente se pase el puntero por encima. Estos tres tienen tres estados: normal, hover y active. A probar...

Contacto Bio Portfolio

Feliz Navidad Blogger. Iconos.

2011-12-21T20:32:00.000+01:00

Como con esto de las fiestas navideñas ando muy pero que muy perezoso; ingánico que creo que diría una felina que conozco. Sin embargo he encontrado por casualidad unos bonitos iconos navideños con el logo de Blogger y me he dicho ¿y por qué no le pongo hoy a mis parroquianos esos y algunos más por si todavía andan buscando para decorar su bog?

Pues dicho y hecho. Aquí están. Espero que a alguien les sean de utilidad.

Diseña la portada de tu nuevo timeline de Facebook

2011-12-16T19:27:00.001+01:00

Pues sí, ya todo el mundo tiene acceso a lo que en español se denomina Biografía de Facebook y como siempre ocurre, no faltarán los que quieren personalizar ese espacio, no muy flexible, pero que la creatividad de cada uno puede convertir en un punto original de su perfil.

En primer lugar, para el que todavía no se haya enterado, el nuevo perfil se consigue accediendo a esta página de presentación, pinchando en el botón inferior que reza .

Una vez en marcha, una advertencia en la cabecera os indica que de momento sólo vosotros podéis ver este nuevo diseño y que en siete días se producirá el cambio automáticamente. Esto es para que comprobéis qué cosas son visibles ahora, por si quisierais ocultar o completar, alguna de las que aparecen en primera plana antes de que se haga público.

El enlace Hacer el recorrido del nuevo diseño, os permitirá ver a modo de visita guiada, cuáles son las nuevas funciones. Si está todo correcto no tenéis que agotar el plazo el plazo de siete días, pues pinchando en , el cambio se hará instantáneamente.

Y ahora viene lo del diseño. Además de la clásica foto de perfil, ahora se puede poner una imagen bastante grande a modo de cabecera para vuestro timeline. La incorporación es muy fácil pues encima del espacio destinado para ella, hay otro botón (esto parece una camisería con tantos) que con el texto Agrega una portada, nos los indica.

Facebook dice que la imagen debe tener al menos 399px de ancho, pero eso es porque la amplia hasta ajustarla al ancho disponible (851px) y si es de mucho menos ancho, entonces quedará muy distorsionada. Lo recomendable es un mínimo de 720px.

Por contra, si la imagen es más alta o ancha que el hueco, Facebook presentará sólo la parte que quepa, permitiéndonos moverla para centrarla dónde gustemos.

En cualquier caso, podéis subir una imagen desde el disco duro o añadir algunas de las existentes en vuestros álbumes.

Las dimensiones exactas del espacio para la portada por si alguno quiere hacer alguna virguería son de 851x315px y las de la foto de perfil, 125x125px. Este es el esquema y os puede servir de plantilla si la descargáis en su tamaño real. Advierto que el borde de 5px de la foto de perfil, es imborrable.

Si eres mañoso con el Photoshop, tienes también esta otra plantilla, mucho más completa y muy bien maquetada que encontré en Hongkiat.

Por medios que no quede, pero si lo que te falta es inspiración, aquí tienes unos cuantos ejemplos creativos. Puedes ver más en el anterior enlace de Hongkiat, que es de dónde hemos obtenido estas.

Error bX-l4u1mh (Diciembre 2011)

2011-12-15T19:54:00.000+01:00

Muchos usuarios de Blogger ~~están~~ estamos teniendo problemas desde hace dos o tres días, con este error que se produce normalmente al acceder a la sección Diseño. Al parecer es indiferente que se use la nueva o la antigua interfaz

Es algo de lo que ya tiene conocimiento el equipo de Blogger, por lo que será cuestión de tiempo que lo resuelvan. En Known Issues for Blogger puedes ver la nota.

El aviso es para que no os volváis locos pensando que habéis estropeado algo en vuestra plantilla y que no toquéis nada por ese motivo.

Mientras llega la solución, puedes probar muy poquitas cosas pero he leído que en ocasiones a algunos se les ha solucionado el problema:

1. Borrar cookies
2. Borrar caché
3. Utilizar otro navegador
4. Repetir 1 y 2 con ese nuevo navegador
5. Acceder a la interfaz desde Draft

Suerte y paciencia.