Devitácora

Blogger no nos brinda la posibilidad de subir archivos CSS o JavaScript para enlazarlos en nuestra plantilla, sino que tenemos que insertarlos directamente o recurrir a otros sitios que provean alojamiento para esta clase de documentos. Uno de esos servicios viene de la mano de Google, se trata de Firebase Hosting, aunque obviamente el proceso no es tan sencillo si lo comparamos con otras opciones. Si estás interesado en hacer uso de esta bondadosa herramienta para simplemente subir un par de archivos, te describo los pasos:

1. Lo primero que debemos hacer es descargar Node.js e instalarlo en nuestro equipo, otorgándole los permisos que pueda solicitar.
2. Nos dirigimos a Firebase console y creamos un nuevo proyecto (Agregar proyecto).
3. Ahora nos ubicamos en nuestro equipo, creamos una carpeta para el proyecto con el nombre que prefiramos e ingresemos a ella.
4. Presionamos la tecla Shift (Mayús) y, sin soltarla, hacemos clic derecho en cualquier área de la carpeta. Del menú contextual que se despliega, elegimos Abrir ventana de comandos aquí.
5. En la ventana de comandos, escribimos npm install -g firebase-tools y presionamos la tecla Enter (Intro, Entrar). Esperamos a que el proceso de instalación culmine.

Hace poco me encontré en la situación de que las secciones (b:section) que solo deseaba mostrar en determimadas páginas del blog, no aparecían en la página de Diseño de Blogger, complicándome la tarea de agregar nuevos elementos (widgets). Para aclarar el asunto, consideremos lo siguiente:

<b:if cond='data:blog.canonicalUrl == data:blog.canonicalHomepageUrl + "/p/example.html"'>
  <b:section id='section-1' showaddelement='yes' />
</b:if>

Si llevamos ese código a nuestra plantilla de prueba y disponemos de una página con nombre example, veremos que la nueva sección no aparecerá cuando estemos en modo Diseño; no es que no se haya creado, simplemente que solo la veremos en la página que indicamos. Al principio no daba con una solución práctica, lo que me llevó, en un intento desesperado, a revolver el código de las nuevas plantillas en busca de una ayuda divina, puesto que si hay nuevos temas, hay una nueva familia de etiquetas; fue ahí en donde la etiqueta informativa data:view.isLayoutMode hizo su aparición, la cual devolverá true (verdadero) cuando se esté editando el blog en la página de los elementos:

<b:if cond='data:view.isLayoutMode or data:blog.canonicalUrl == data:blog.canonicalHomepageUrl + "/p/example.html"'>
  <b:section id='section-1' showaddelement='yes' />
</b:if>

Los iconos SVG están desplazando a los iconos tradicionales (imágenes en mapa de bits: PNG, GIF, etc.) en los proyectos web, ya que son livianos, pueden adoptar cualquier tamaño sin distorsionarse, no es necesario alojarlos, entre otros aspectos; sin embargo, cuando decidimos embarcarnos en el bote de la modernidad, nos topamos con algo desconocido que ni se puede subir a este servicio. ¿Cómo emplearlos y no morir embrollados en el intento? Basta con solo descargarlo, abrir el documento en un editor de texto (como el Bloc de notas de Windows) y llevarnos el código que contiene, el cual, en su forma básica, vendría siendo similar al siguiente:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 112.196 112.196" width="32" height="32">
  <circle style="fill:#3B5998;" cx="56.098" cy="56.098" r="56.098" />
  <path style="fill:#FFFFFF;" d="M70.201,58.294h-10.01v36.672H45.025V58.294h-7.213V45.406h7.213v-8.34c0-5.964,2.833-15.303,15.301-15.303L71.56,21.81v12.51h-8.151c-1.337,0-3.217,0.668-3.217,3.513v7.585h11.334L70.201,58.294z" />
</svg>

Si nos llevamos el código anterior a nuestra plantilla, como resultado veremos un bonito icono de Facebook de 32×32 píxeles. El tamaño del icono se define con los ya familiares atributos width, para el ancho, y height, para el alto. Usualmente, esos dos valores están ausentes en los SVG que descargamos, por lo que veremos el icono en su tamaño original si nos olvidamos de ese detalle. Con esto dicho, ya puedes hacer uso de ellos.

Una de las cosas que me llamó la atención de los nuevos temas de Blogger fue el diseño de la caja de comentarios, mucho más simpático que el tosco formulario que me hacía utilizar. Obtenerlo sin tener que cambiar mi vieja plantilla resultó ser muy sencillo, bastó con buscar las siguientes líneas en ella:

<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>

Y añadir como parámetro el nombre del tema deseado:

<a expr:href='data:post.commentFormIframeSrc + &quot;&amp;skin=contempo#%7B%7D&quot;' id='comment-editor-src'/>