sinhojas.net

A diferencia de Wordpress, sin duda más popular, Blogger sobrevive como un servicio de nicho cuyas virtudes parecieran ser vistas sólo por sus no tan jóvenes usuarios. La mayor de ellas es que, distinto de otros proveedores —sea la versión gratuita plagada de anuncios de WordPress o las siempre inestables páginas de Wix y similares—, Blogger permite acceder al código fuente del sitio, lo que habilita una mayor personalización y abre la posibilidad de importar plantillas externas creadas por la propia comunidad.

De entre las múltiples plantillas, de paga o gratuitas, JetTheme destaca por ser la más completa, por su diseño moderno y por su optimización. Es creación original de un desarrollador de Indonesia, que la ofrece de forma gratuita en su sitio web.1 Aunque hay una versión de paga que ronda los siete dólares, si optas por la versión gratuita obtendrás la mayor parte de la funcionalidad requerida por cualquier usuario común.

Portada de la web de JetTheme

Algunas características de esta plantilla, y que no he visto en ninguna otra, son:

Cómo instalar la plantilla

Ya que la web del desarrollador sólo está disponible en indonesio, quise hacer esta entrada para que más personas puedan utilizar esta plantilla, mil veces mejor que las que incluye Blogger por defecto o que otras externas.

  1. Descarga. Ve al repositorio en GitHub y descarga los archivos. Haz clic en «Code» y luego en «Download ZIP». Ya descomprimido el archivo, obtendrás cuatro documentos, de los cuales sólo dos nos serán útiles: blank.xml y jettheme-v2.xml. Repositorio en Github
  2. Respaldo. Antes de la instalación, respalda la actual configuración de tu blog. Si es un blog nuevo, puede que no importe mucho. En el panel de administración, ve a Tema → Sección «Mi tema» → Desplegable de «Personalizar» → Copia de seguridad → Descargar. Guarda el documento en un lugar seguro. Respaldo en Blogger
  3. Limpieza. En la misma página Tema, vuelve a seleccionar el desplegable del botón «Personalizar». Ahora haz clic en «Editar HTML». Blogger te abrirá el código fuente de tu sitio. Abre ahora el primer archivo que descargaste, blank.xml (abrirá con Bloc de notas en Windows o con TextEdit en macOS), y copia todo. El contenido lo pegarás ahora en la página que Blogger te abrió. La idea es reemplazar todo el código original por el que aparece en blank.xml. Esto asegurará la correcta instalación de la plantilla. Cuando finalices, haz clic en el ícono del disquete, «Guardar». Código en Blogger
  4. Instalación. Ahora abre el segundo archivo, jettheme-v2.xml. Igual que antes, la idea es copiar todo el contenido de este archivo y pegarlo en el editor de código de Blogger. Nuevamente, da clic en «Guardar». Con esto, habrás instalado exitosamente la plantilla.

Cómo personalizar la plantilla

Una vez instalada, puedes personalizar la plantilla desde la sección «Diseño» del panel de administración de Blogger o editando el código fuente. Los distintos elementos se presentan en recuadros de este tipo, con un pequeño lápiz que indica que puede editarse.

Diseñador de Blogger

Logo

Aquí podrás pegar un enlace que lleve al archivo de imagen (jpg o png) del logo de tu blog. En caso de que no desees uno, puedes poner el título de tu blog.

Íconos de redes sociales

La cabecera de la plantilla incluye un espacio para añadir enlaces a tus redes sociales. Estos enlaces se muestran en la forma de los logos de dichas redes.

Enlaces de íconos en Blogger

Para añadir un enlace, haz clic en «Añadir otro enlace». Tendrás dos campos: el «nombre del sitio» y la «URL del sitio». En «nombre del sitio» deberás escribir el nombre de la red social sin espacios y todo en minúsculas. Por defecto, la plantilla sólo incluye íconos para las siguientes redes: WhatsApp, Pinterest, Tumblr, Twitter, Linkedin, Facebook, Instagram, YouTube, Telegram y GitHub.

Menú

La plantilla proporciona un menú para redirigir a otras páginas, sean externas o internas. Los enlaces del menú funcionan de forma similar al caso anterior. Para añadir un enlace, haz clic en «Añadir otro enlace». Tendrás dos campos: el «nombre del sitio» y la «URL del sitio».

Enlaces del menú en Blogger

Si deseas que una sección del menú despliegue un submenú al hacer clic o al pasar el ratón, deberás organizar los enlaces de forma especial. Los enlaces del submenú deben estar dentro de dos enlaces: #sub-start y #sub-end. Añade los enlaces como de costumbre y solamente desplázalos hasta que queden dentro de esos dos límites.

Pie de página

El pie de página incluye cuatro secciones:

Opciones avanzadas

Existen dos métodos para modificar aspectos como los colores, el tamaño de la fuente o la familia tipografía.

Metadatos del blog

Para que el blog puede ser identificado correctamente y que Google y otros buscadores lo indexen, la plantilla incluye una serie de parámetros que conviene rellenar (no son obligatorios). Dentro del código fuente, aparecen en la sección encabezada por JetTheme v2.9 Setting. Lo que se cambia es lo que viene luego de value.

Parámetros de la plantilla en Blogger

Tipografía

La plantilla utiliza las llamadas fuentes del sistema: la familia tipográfica que el sistema operativo usa para mostrar todo el texto del dispositivo. Por ejemplo, macOS usa San Francisco, mientras que Windows usa Segoe.3

Si deseas cambiar la tipografía, lo más recomendable es hacerlo a través de un servicio de terceros, ya que Blogger no te permite autoalojar tus propias fuentes (mediante @font-face). Por ejemplo, si queremos usar DM Sans, podemos hacerlo usando Google Fonts.

Selección de fuentes en Google Fonts
  1. Selección. Busca en Google Fonts las fuentes de tu agrado. Para seleccionar, haz clic en el ícono ⊕ («Select»). Recuerda seleccionar todos los pesos necesarios. Lo mínimo es formar un conjunto de cuatro pesos: redonda (normal o regular, 400), itálica (italic, 400), negrita (bold, 700) y negrita itálica (bold italic, 700). Puedes reducirlo si no planeas usarlos todos.

  2. Copiado. Una vez seleccionadas las fuentes, Google muestra a la derecha un apartado titulado «Use on the web», junto con el código necesario. En el caso presentado, muestra lo siguiente:

    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
    
  3. Discriminación. De las tres líneas, sólo es necesaria la última. Pero, para poder incluirla en nuestro blog, deberemos cambiar todas las instancias de & por &amp;. También es necesario cerrar la etiqueta <link>. En lugar de <link … rel='stylesheet'>, deberá ser <link … rel='stylesheet'/>. Usando el ejemplo, el código será:

    <link href='https://fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,400;0,700;1,400;1,700&amp;display=swap' rel='stylesheet'/>
    
  4. Pegado. Abre el editor de código de Blogger, en el panel de administración. Tema → menú del botón «Personalizar» → Editar HTML. Un buen lugar para pegar el enlace previamente modificado es en línea aparte luego de <b:include data='blog' name='all-head-content'/>. Puedes buscar pulsando Ctrl + F (Windows) o ⌘ + F (macOS). Guarda los cambios.

Hasta aquí concluye la parte de importar las fuentes, ahora corresponde invocarlas, de forma que la plantilla las use en lugar de las que vienen por defecto.

La plantilla contempla tres instancias: fuente para el cuerpo, fuente para los titulares, y fuente para el menú. Pueden ser distintas o todas iguales. Adicionalmente, si modificas la clase .entry-text, puedes cambiar también la tipografía de la entrada (porque «cuerpo» afecta a más elementos además del propio texto de la entrada).2

En cualquier caso, se usa la nomenclatura abreviada de la propiedad font. Lo que se va a cambiar es lo que viene luego de value. La nomenclatura es: estilo (normal o italic) + peso (400 o 700) + tamaño (17px, por ejemplo) y familia (‘DM Sans’, por ejemplo).

En el caso planteado, será como sigue:

Una vez hechos los cambios en el código, procede a guardar y las nuevas fuentes serán utilizadas.

  1. Debo mi encuentro con esta plantilla al blog Marginalise(d).

  2. Puedes descargar una versión ya modificada. Me he encargado de traducir la plantilla al español, así como de hacer algunos ajustes tipográficos usando DM Sans y Lora.

  3. La ventaja es que esto ahorra recursos y reduce los tiempos de carga, ya que no hay que importar ningún archivo. Las desventajas, sin embargo, son todo lo demás. Si no te importa un bledo la tipografía de tu blog, puedes obviar esta sección.