Devitácora

Un blog informático

Anular los ­­«scripts» de los «widgets» de Blogger

Al igual que con el CSS de los widgets, podemos hacer lo mismo con los scripts de los elementos de Blogger para evitar que se apliquen en nuestra plantilla, aprovechando que el servicio toma como referencia la etiqueta de cierre </body> para agregarlos y que el HTML en texto plano es interpretado:

&lt;/body&gt;&lt;!-- </body> --&gt;

Si reemplazamos </body> por lo anterior, en nuestro código fuente veremos que tanto la etiqueta como los scripts aparecen encerrados entre comentarios, perdiendo todo su efecto y quedando como válido el cierre del body que lleva definido al inicio.

Ese mismo procedimiento podemos seguir para retirar el script que se añade antes de la etiqueta de cierre </head>:

&lt;/head&gt;&lt;!-- </head> --&gt;

Cabe recordar que esos scripts son necesarios para el buen funcionamiento del blog, inhabilitarlos solo viene como anillo al dedo en esas situaciones en las que podamos prescindir de ellos.

Actualización (10/10/18): gracias a las nuevas etiquetas de Blogger, podemos retirar definitivamente los scripts de los elementos con simplemente copiar lo siguiente:

b:js='false'

Y pegarlo en la etiqueta de apertura HTML:

<html b:js='false' ...

Cabe anotar que lo anterior no retira el script de la cabecera.


Herramientas para «webmasters»

Presento una breve lista de algunas de mis herramientas en línea preferidas para testear el comportamiento de mis sitios y validar su estructura, entre otros aspectos:

  • Markup Validation Service, para validar nuestro HTML.
  • CSS Validation Service, para validar nuestro CSS.
  • Structured Data Testing Tool, para validar los datos estructurados (microdata) de nuestras páginas.
  • PageSpeed Insights, para optimizar la respuesta de nuestro sitio.
  • WebPagetest, para testear la respuesta de nuestras páginas en distintas conexiones y plataformas.
  • WooRank (de prueba), para analizar nuestro sitio web en materia de SEO.
  • Code Beautify, un conjunto de herramientas para optimizar nuestros documentos.
  • Otras herramientas:
    • Type Tools, para mantenernos en el número ideal de caracteres en los títulos y en las descripciones de nuestros artículos.
    • JSCompress, para simplificar nuestros scripts.
    • Adobe Color CC, para elegir o generar una paleta de colores.
    • Iconmonstr, para buscar iconos vectoriales gratuitos, con la posibilidad de obtenerlos como SVG y en Base64.
    • SVG Repo, un repositorio de iconos SVG.

Anular los estilos de los «widgets» de Blogger

Algo que me resultó muy molesto de Blogger fue la imposición de su propia hoja de estilos en mi plantilla, sin la posibilidad de retirarla; sin embargo, podemos valernos de un sencillo y conocido truco para impedir que se aplique:

El servicio destina la etiqueta b:skin (obligatoria) para que declaremos los estilos de nuestra plantilla:

<b:skin>
REGLAS DE CSS
</b:skin>

Lo primero que debemos hacer es sacar nuestro CSS de ahí:

<b:skin></b:skin>
<style type='text/css'>
REGLAS DE CSS
</style>

Cuando el «Archivo del blog» no funciona en la versión móvil

Si empleamos el elemento Archivo del blog (estilo jerarquía) en nuestra plantilla personalizada para móviles, es probable que no trabaje correctamente. Lo anterior se debe a que Blogger no añade en el CSS destinado a tales dispositivos cierta instrucción necesaria, más un error cuando se intenta obtener ciertos datos.

La instrucción omitida en la hoja de estilos es la siguiente:

#ArchiveList .collapsed ul {
  display: none;
}

Ese código es el responsable de mantener las fechas compactadas, debe estar predefinido para que se desplieguen y plieguen acertadamente.

El segundo problema radica con los elementos que vienen contraídos por defecto. El script que emplea el servicio se vale de las URL (data:interval.url) de los períodos (meses, semanas o días) para tomar y mostrar las entradas que comprenden, pero su comportamiento se verá entorpecido cuando la dirección no sea canónica, y como en los móviles las direcciones llevan como parámetro m=1 o m=0 (versión de escritorio accedida desde el móvil), el resultado no será el esperado.

¿Cómo lidiamos con ese detalle? Como no encuentro una etiqueta de la que podamos obtener la dirección canónica para ese caso, tocará apoyarnos en un sencillo script que simplemente retire ese parámetro. El siguiente código puede ir en cualquier parte de la plantilla posterior al widget:

<b:if cond='data:blog.url != data:blog.canonicalUrl'>
  <script>
    var e = document.getElementsByClassName("post-count-link");
    for (i = 0; i &lt; e.length; i++)
      e[i].href = e[i].href.split("?m=")[0];
  </script>
</b:if>

search-icon home-icon blog-icon about-icon envelop-icon calendar-icon tag-icon comment-icon share-icon gmail-icon blogger-icon twitter-icon facebook-icon printer-icon link-icon list-icon rss-icon logo-icon