miércoles, 1 de febrero de 2012

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

En anterior entrada vimos cómo hacer todas las condiciones simples que Blogger nos permite para poder diferenciar contenidos según el tipo de página en el que estemos, pero si queremos distinguir más casos, ya no nos queda más remedio que empezar a combinar condiciones. Todas las combinaciones serían demasiadas, así que tras las nociones básicas relacionaré sólo las que creo más comunes y el resto ya son cosa de vuestra capacidad lógica ;)

Como pista, cuando queramos hacer un OR (esto o aquello), normalmente servirá con hacer dos condiciones sucesivas una para cada cosa, siempre que no se solapen en tipo de páginas. Esto ocurre por ejemplo con las Index y el Home, que tienen en común precisamente esta última. Por el contrario, cuando queramos simular un AND (esto y aquello), por lo general tendremos que meter condiciones una dentro de otra, de manera que si se cumple una y la anidada, se darán por cumplidas ambas.


Situación en la que algo se podrá ver en algo sólo en páginas de navegación y de archivo, pero no en la de Inicio.

Index y Archive son excluyentes por lo que tenemos que hacer dos comprobaciones seguidas.

  • Primero vemos si la página es del tipo Archive y en caso afirmativo, ejecutamos por ahí. En la siguiente condición no se llegará a entrar porque Archive != Index.
  • Por el contrario, si no es Archive entraremos en la segunda condición y si es tipo Index se hace una tercera para verificar que NO estamos en Inicio (Home), que también es del tipo Index. Sólo en ese caso mostramos.
  • En todos los demás casos, páginas estáticas o post individuales (Item), tampoco se muestra nada porque no entramos en el cumplimiento de ninguna de las dos condiciones.

<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<!-- Estamos en una página tipo Archive -->
Mostramos por ser página Archive
</b:if>

<b:if cond='data:blog.pageType == &quot;index&quot;'>
<!-- Estamos en una página tipo Index -->
<b:if cond='data:blog.url != data:blog.homepageUrl'>
Mostramos por ser página Index pero no Home
</b:if>
</b:if>


¿Y si queremos que algo se vea precisamente en entradas individuales y páginas estáticas pero no en todas las demás? Pues ya no bastaría con poner el signo del operador contrario, porque el anidamiento de condiciones daría un resultado indeseado. Como ambos tipos no están solapados como ocurría en el tipo Index que incluía Home, más fácil sería en este caso comprobar las dos cosas por separado.

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<!-- Estamos en una página estática -->
Mostramos por ser página estática
</b:if>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<!-- Estamos en una entrada individual -->
Mostramos por ser una entrada
</b:if>


El uso de else que permite anidar condiciones también nos puede ser práctico. Es una segunda oportunidad de seguir comprobando cosas dentro de una misma condicion, cuando no se cumple la primera opción.

Mostrar un contenido en Home y otro distinto en las páginas Index (distintas de Home), Archivo y Estáticas:

<b:if cond='data:blog.url == data:blog.homepageUrl'>
Se ejecuta sólo en Home
<b:else/>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
Se ejecuta sólo en páginas Index (y Estáticas)
</b:if/>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
Se ejecuta sólo en páginas Estáticas (e Index)
</b:if/>
</b:if/>

Obsérvese que las páginas individuales (item) no entrarían por ninguna de las condiciones, tal y como nos proponíamos en el enunciado.


Y para terminar, no con todas las combinaciones pero sí con un anidamiento que nos permitirá discriminar todos los casos uno por uno. Ahí va eso:

<b:if cond='data:blog.pageType == &quot;index&quot;'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
Se ejecuta sólo en Home
<b:else/>
Se ejecuta sólo en Etiquetas/Recientes/Antiguas
</b:if>
<b:else/>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
Se ejecuta sólo en páginas Estáticas
<b:else/>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
Se ejecuta sólo en páginas de Archivo
<b:else/>
Se ejecuta sólo en posts individuales
</b:if>
</b:if>
</b:if>

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.