martes, 31 de enero de 2012

Guía: Condiciones Blogger según tipo de página. Simples

Este es un recordatorio-guía sobre las distintas condiciones que podemos manejar en Blogger y que nos sirven para mostrar o ejecutar ciertas cosas, justo en el tipo de página que queremos y no en otras.

Anteriormente ya vimos una pequeña explicación sobre qué era esto de las condiciones y sobre cómo usarlas, pero como desde entonces ha llovido mucho, observo que es una pregunta habitual y sobre todo, entonces fui algo más desordenado, pues allá vamos.

Las páginas Blogger (esto no se aplica en otras plataformas) también manejan las direcciones de las páginas y sus distintos tipos con etiquetas data. Este sería el catálogo:

  • data:blog.homepageUrlDirección de la página Inicio
    Ejemplo: http://www.oloblogger.com
  • data:blog.pageTypeTipo de página
  • Puede tener los siguientes valores:
    • indexHome, páginas de etiquetas y recientes/antiguas
      Ejemplo: http://www.oloblogger.com/search/label/BPT
    • archiveNavegación a través del gadget Archivo
      Ejemplo: http://www.oloblogger.com/search?updated-min=2011-01-01T00...
    • static_pagePágina estática
      Ejemplo: http://www.oloblogger.com/p/contacto.html
    • itemUna entrada individual
      Ejemplo: http://www.oloblogger.com/2010/02/otra-pantalla-de-presentacion-facil.html

Otra variable que nos va a hacer falta para montar las condiciones es data:post.url, que nos remite a la dirección de la página dónde estamos actualmente.


Bien, ya tenemos todo lo necesario para empezar a condicionar cosas. Lo importante es entender la estructura porque a medida que avancemos la cosa se complica. Blogger no permite poner cosas del tipo "Si es este tipo de página y no este", ni ninguna otra combinación tipo AND/OR, así que hay que ir usando nuestra propia lógica para anidara las condiciones.

Una condición básica sería de la forma:

<b:if cond='data:post.dateHeader'>
Ejecuta lo que hay entre los dos if si la fecha del post existe
</b:if>


Pero para lo que nos ocupa -discriminar el tipo de página- necesitaremos hacer una comparación para ver si se cumple la igualdad y no sólo comprobar si un valor existe o no:

<b:if cond='data:post.dateHeader == &quot;17/02/2010&quot;'>
Ejecuta lo que hay aquí si la fecha del post es igual a 17/02/2010.
</b:if>


Hay dos tipos de operadores para comparar, == cuyo significado es evidente y !=, que quiere decir "no es igual". Por causa de que Blogger nos exige una redacción de código muy estricta, los valores a comparar y el operador deben ir entre comillas simples (') y si uno de los dos valores no es una etiqueta data sino una cadena de caracteres normal (caso de una fecha, caso de una dirección), ese valor literal debe ser escrito entre &quot; en sustitución de lo que normalmente serían comillas dobles.


Con todo esto ya podemos discriminar las cosas que sí queremos que se vean sólo en el Home y no en otras páginas:

<b:if cond='data:blog.url == data:blog.homepageUrl'>
Ejecuta lo que hay aquí si la dirección de la página en la que estamos coincide con la dirección pricipal del blog.
</b:if>


Por el contrario si queremos que algo se ejecute en todos los tipos de página excepto en la de inicio, tendríamos que usar !=:

<b:if cond='data:blog.url != data:blog.homepageUrl'>
Ejecuta lo que hay aquí sólo cuando la dirección de la página en la que estamos NO es la dirección pricipal del blog.
</b:if>


A partir de aquí obviaré que todas las expresiones con == tienen su contraria con != para no ser demasiado exhaustivo.


Para distinguir una entrada en concreto usaríamos este mismo tipo de expresión:

<b:if cond='data:blog.url == &quot;http://www.oloblogger.com/2010/02/codificacion-facil.html&quot;'>
Ejecuta lo que hay aquí únicamente cuando la dirección de la página coincide con la expresada a la derecha.
</b:if>


Seguimos con los casos fáciles. Ver algo sólo cuando estamos en una entrada individual cualquiera.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
Ejecuta lo que hay aquí únicamente cuando la dirección de la página coincide con la de una entrada.
</b:if>


Ver algo sólo cuando estamos en una página correspondiente a un elemento del gadget Archivo.

<b:if cond='data:blog.pageType == &quot;archive&quot;'>
Ejecuta lo que hay aquí si hemos accedido al sistema de navegación desde el Archivo.
</b:if>


Con las páginas estáticas lo más habitual es que queramos ocultar algo, así que en este caso el ejemplo va en negativo, aunque obviamente podría hacerse a la inversa.

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
Ejecuta lo que hay aquí siempre que NO estemos en una página estática.
</b:if>


Ver algo en Inicio, páginas de etiquetas y páginas recientes/antiguas. Recordamos que estas tres se agrupan en el tipo Index.

<b:if cond='data:blog.pageType == &quot;index&quot;'>
Ejecuta lo que hay aquí cuando la dirección de la página corresponde al Home o a una página de navegación.
</b:if>

sábado, 28 de enero de 2012

Un lustro ¿Eso es mucho o es poco para un blog?

Por estos lares no celebramos casi nada, ni los 100 primeros posts, ni los 1000 primeros seguidores, ni el primer millón de visitas... Creo que con lo único que lo hicimos fue con lo de los 20Blogs.

Pero más o menos, hoy es el aniversario de este blog y por eso apartamos un poco los temas habituales para hacer un poco de historia y unas pequeñas reflexiones.


Lo de más o menos tiene su explicación, claro, y es que los primeros artículos que escribí realmente los publiqué en lo que entonces era mi blog personal y el de mis amigos.

Sí, todos hemos tenido un pasado, yo también... pero aunque siga estando tan desfasado en cuanto a estilo como entonces, a mí me sigue gustando aquella plantilla oscura con tantos cacharritos. En serio. Incluso ahora al volverla a ver gracias a esa especie de máquina del tiempo interneteril que existe por ahí, la echo de menos. Soy así de cutre, que le vamos a hacer, aunque también puede ser cosa de la nostalgia.

Ver en WayBack Machine
Como ya he dicho en otras ocasiones, esos apuntes que tomaba para mí mismo se hicieron cada vez más frecuentes y viendo que a algunos torpones como yo también les interesaban esas notas, decidí abrir Oloblogger y traspasar allí este tipo de contenidos. Las dos plantillas eran prácticamente idénticas tal y como podéis comprobar en Wayback Machine.

Y aprovecho para contaros que ya llevo un tiempo cansado de esta, que además tiene infinidad de parches y pruebas y de vez en cuando hace aguas. Así que os anticipo que más pronto que tarde, aunque muchos siguen encantados con ella, cambiaré a una que seguro que no os va a gustar. Y es que la idea que llevo es muy muy distinta.


Pero volviendo al principio, hoy hace de eso un lustro y entre otras cosas me puse a pensar si cinco años eran muchos o eran pocos para un blog.

Cinco años no son nada en la vida de alguien y muchísimo menos en el reloj del tiempo del mundo. Sin embargo, parece que para un blog es sinónimo de senectud o al menos de madurez. Yo estoy en lo último, me siento maduro en esto de los blogs; al menos algo más maduro.


No recuerdo ahora los sitios, pero he leído mucho sobre la decadencia y el inminente fin de los blogs. El argumento principal es la fuga de blogueros a otras redes sociales por su facilidad de uso. Ya sabéis, Facebook, Tumblr, Twitter, Google Plus...

Pero que queréis que os diga ¿qué es lo que se comparte principalmente en esos sitios? Pues ni más ni menos que CONTENIDOS, cosas que otra gente publica en otros sitios, sitios como las bitácoras. Por tanto ¿qué sería de ellos sin nosotros? Pues seguramente lo mismo que de nosotros sin ellos. Poca cosa.

Internet es interactividad, intercambio. Ambos medios -blogs y redes- son en mi opinión perfectamente compatibles y pueden subsistir simultáneamente. De hecho incluso creo que se necesitan. Quizás, lo único que está pasando es que está habiendo un acoplamiento, un ajuste, una rectificación de la oferta y la demanda. Ni todo el mundo puede/debe ser twittero ni todo el mundo bloguero.


Los que nos consideramos fundamentalmente esto último, seguimos en la brecha porque nos gusta. Nos gusta escribir, tenemos alguna inquietud que queremos compartir y sobre todo, nos gusta interactuar con los que tienen la misma afición que nosotros. Dar y recibir. En esencia, compartir cosas.

Cuando no es así y no hablamos realmente sobre lo que nos gusta, lo fácil es sucumbir al desaliento, a la desidia, al aburrimiento o la sensación de que esto es un trabajo ¿Quién aguanta mucho tiempo haciendo algo que no le gusta y a lo que no está obligado?

Así que habrá quién opine que 5 años en un blog es mucho tiempo, pero a mí de verdad que hasta la fecha, me han parecido sólo un suspiro.

miércoles, 25 de enero de 2012

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

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:



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.

domingo, 22 de enero de 2012

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

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.

&lt;script defer='defer' expr:src='data:post.commentSrc' type='text/javascript'/&gt;

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

&lt;script async='async' expr:src='data:post.commentSrc' type='text/javascript'/&gt;


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.


<script src='http://www.google.com/jsapi' type='text/javascript'/>
<script type='text/javascript'>
google.load(&quot;prototype&quot;, &quot;1&quot;);
window.JSON = {
parse: function (st) { return st.evalJSON(); },
stringify: function(obj) { return Object.toJSON(obj); }
};
google.load(&quot;scriptaculous&quot;, &quot;1&quot;);
</script>

jueves, 19 de enero de 2012

Almacenar y recuperar datos Blogger. Variables DATA (2)

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.

martes, 17 de enero de 2012

Formato a imágenes con CSS. Particularidades Blogger.

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:

<div class="separator" style="clear: both; text-align: center;">
<a href="URL_IMAGEN_TAMAÑO_ORIGINAL" imageanchor="1" style="margin-left: 1em; margin-right: 1em;">
<img border="0" height="141" src="URL_IMAGEN_REDIMENSIONADA" width="400" />
</a></div>


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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLbqiG8zf8U85GvyXbLVng1D4vE1LVC0bSV1Y3r6rABnT9H2yCoISUfdtopBH9WR_uSDmY-VY-Md-BAKDHBoUulwp8ZQVK447CYyZMN4ijGZp_rs4EOUYRYiHRCxf-hreM3CJAcwMXaeY/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 separatortr-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.

viernes, 13 de enero de 2012

Blogger. Configurar comentarios anidados. Lista de clases.

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 {}

jueves, 12 de enero de 2012

Nuevos comentarios anidados en Blogger

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.

miércoles, 11 de enero de 2012

Formato a imágenes con CSS. Clases.

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;}

<div class='post'>
<img src='http://blog/imagen.jpg'>
</div>

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.