Agrega secciones personalizadas basadas en etiquetas para blogger
Retomando el proyecto de mi blog luego de mucho tiempo, hoy quiero compartirles un script que estoy seguro de que les será de mucha ayuda. Se trata de un complemento o plugin para crear una o más secciones en Blogger basadas en etiquetas. Sin mucho más que decir, sigue leyendo y entérate de cómo utilizar este plugin.
Instalación
Como todo buen tutorial, empezaremos haciendo la instalación del código necesario. Ve a tu panel de Blogger y en la pestaña "Tema", debes ir al editor HTML. Aquí debemos buscar el código </head> y justo por encima de dicha etiqueta, agregamos el siguiente código:
<!-- CDN bloggerUtils --> <script defer='defer' src='https://cdn.jsdelivr.net/gh/Karasu-themes/bloggerSection/dist/bundle.js'></script>
Ahora, sin salir del editor HTML, buscamos la etiqueta </body> y justo por encima, pegamos el código para poder iniciar las secciones:
<script>
document.addEventListener("DOMContentLoaded", () => {
if (typeof window["BloggerSection"] !== "undefined") {
const bs = BloggerSection;
bs.init();
}
});
</script>
Guardamos los cambios y listo.
Agregar estilos
Espero no te hayas salido del editor HTML, porque ahora necesitamos agregar los estilos CSS. Ten muy en cuenta que los estilos son básicos y lo mejor es que adaptes los colores y demás elementos al diseño de tu plantilla (si tienes problema con esto, no dudes en hablarme). En el editor HTML, busca el siguiente código ]]></b:skin> y pega encima los estilos:
/*!=> BloggerSection©2023 (https://github.com/Karasu-themes/bloggerSection) - karasu.themes */
.bs-core {
/*! Columnas */
--xs-cols: 2;
--sm-cols: 3;
--lg-cols: 3;
--gap-cols: 1rem;
/*! Personalizar colores*/
--bs-wrapper-color: #f4f4f5;
--bs-text-color: #27272a;
--bs-light-color: #f4f4f5;
--bs-accent-color: #4f46e5;
}
.bs-core__spinner{grid-column:1/-1;width:100%;padding:1rem;text-align:center}.bs-core__spinner span{border-color:var(--bs-light-color);border-top-color:var(--bs-accent-color);margin-left:auto;margin-right:auto;display:block;height:2rem;width:2rem;animation:1s linear infinite spin;border-radius:9999px;border-width:4px}@keyframes spin{to{transform:rotate(1turn)}}.bs-core .bs-container{display:grid;gap:var(--gap-cols);grid-template-columns:repeat(var(--xs-cols),minmax(0,1fr))}@media (min-width:640px){.bs-core .bs-container{grid-template-columns:repeat(var(--sm-cols),minmax(0,1fr))}}@media (min-width:1024px){.bs-core .bs-container{grid-template-columns:repeat(var(--lg-cols),minmax(0,1fr))}}.bs-card{background-color:var(--bs-wrapper-color)}.bs-card__title{color:var(--bs-text-color);display:block;font-size:1rem;line-height:1.5rem;font-weight:700;transition-duration:.2s;color:currentColor}.bs-card__timestamp{color:var(--bs-text-color);font-size:.875rem;line-height:1.25rem;font-weight:600;opacity:.5}
Personalizar estilos
En los estilos encontrarás algunas variables CSS que te permitirán manipular el color y algunos valores que espero te ayuden a modificar el código si no conoces mucho de CSS. En la siguiente tabla se explican cada uno de ellos:
| variable css | Explicación | valor |
|---|---|---|
—xs-cols |
Total de elementos a mostrar por fila en móviles | 2 |
—sm-cols |
Total de elementos a mostrar por fila en pantallas sobre los 640px | 3 |
—lg-cols |
Total de elementos a mostrar por fila en pantallas sobre los 992px | 3 |
—gap-cols |
Espaciado entre cada elemento | 1rem |
—bs-wrapper-color |
Color de fondo de la tarjeta | #f4f4f5 |
—bs-text-color |
Color del texto | #27272a |
—bs-light-color |
Color de fondo del loader | #f4f4f5 |
—bs-accent-color |
Color del texto cuando se pasa el ratón por encima | #4f46e5 |
Agregar secciones
Ve a tu panel de Blogger y en la pestaña "Diseño", agrega un nuevo widget de tipo HTML y en el campo de contenido pega el siguiente HTML:
<div class='bs-wrapper' data-label='NOMBRE_ETIQUETA' data-results='NUMERO__DE_RESULTADOS'>
<div class='bs-container'></div>
<!-- [[ START TEMPLATE -->
<template class='bs-render' hidden>
<div class="card">
<h2>{title}</h2>
<p>{summary}</p>
</div>
</template>
<!-- END TEMPLATE ]] -->
</div>
Si nos fijamos en el código HTML, nos encontraremos con dos atributos data (cambia el valor por el especificado), además de los dos ya mencionados. Aquí abajo encuentras todos los atributos disponibles y su explicación:
| Atributo data | Explicación del atributo | Tipo de dato |
|---|---|---|
label |
Es la etiqueta de la cual queremos obtener sus últimas entradas. Si no se pasa este valor, se tomarán las últimas entradas publicadas. | String |
results |
Es el total de entradas que se mostrarán. Por defecto, mostrará 8 entradas. | Number |
homeUrl |
URL de un blog de Blogger. Este blog debe ser público y ser capaz de obtener su feed. | URL/String |
hook |
Callback/gancho que te permite llamar una función para utilizar código adicional después de haberse montado la sección (más detalles en el repositorio). | function_name |
Una vez configurados los datos, guardamos los cambios y ya deberíamos poder ver la sección que hemos creado en nuestro sitio. Puedes crear tantas secciones como gustes y ponerlas en el lugar que desees, claro está que dependiendo del sitio, deberás editar el HTML para que se adapte a dicho sitio.
Sección modo slider
Este ejemplo funciona con la librería Splide.js, por lo que necesitamos instalar los archivos necesarios para que funcione correctamente. Ve a tu panel de Blogger y en el editor HTML de la pestaña "Tema", busca la etiqueta </head> y justo por encima, pega el siguiente código:
<script src="//cdn.jsdelivr.net/npm/@splidejs/splide@4.1.4/dist/js/splide.min.js" defer></script> <link href="//cdn.jsdelivr.net/npm/@splidejs/splide@4.1.4/dist/css/splide.min.css" rel="stylesheet"/>
Ahora debemos buscar la etiqueta <script> que habíamos agregado al inicio y reemplazarla por una nueva que contiene lo necesario para poder usar el modo slider. Busca la etiqueta <script> que instalamos anteriormente y reemplázala por esta nueva etiqueta:
<script>
document.addEventListener('DOMContentLoaded', () => {
if (typeof window['BloggerSection'] !== "undefined") {
const bs = BloggerSection;
bs.init();
}
// Revisamos que la librería splide éste disponible para usar
if (typeof window['Splide'] !== "undefined") {
// Ejecutamos el modo "_slider"
window["_slider"] = function (node, wrapper, config) {
node.classList.add('splide');
const splide = new Splide(node, {
perPage: 3,
gap: '1rem',
});
splide.mount();
}
}
})
</script>
Guarda los cambios y listo. Ahora, basta con crear un nuevo gadget como lo hemos hecho antes, solo que ahora debemos pegar el atributo data-hook con el valor _slide en el contenedor principal (donde agregamos los otros atributos data).
Haciendo lo anterior, ya podremos acceder al modo slider de las secciones como puedes ver en el ejemplo.
Motor de plantilla
Esto es algo en lo que no planeo profundizar en este post, pero a modo de resumen: cada sección que crees está basada en un template proporcionado por mi librería bloggerUtils (hablaremos de ella en otro momento) y cuenta con unas variables que te permitirán maquetar de forma cómoda tu HTML sin tocar JavaScript. Todo lo que se incluya entre llaves dentro de la etiqueta <template> se intercambiará por un dato perteneciente a una entrada de Blogger. A continuación, te comparto una lista de algunas de las variables que te permitirán extender la sección aún más según tus necesidades.
Lista de variables
| Variable | Dato obtenido |
|---|---|
{title} |
Título de la entrada |
{summary} |
Resumen de la entrada |
{url} |
URL de la entrada |
{image} |
URL de la primera imagen de la entrada |
{thumbnail} |
URL de la miniatura de la entrada |
{body} |
Contenido de la entrada |
Comentario final
El plugin de secciones que he desarrollado te permitirá crear secciones de una manera muy flexible y sencilla de llevar, ya que su principal fortaleza es no tocar JavaScript y solo centrarse en el diseño. Su creación está pensada para ayudar a desarrolladores e interesados en Blogger a crear secciones basadas en etiquetas para sus plantillas sin mucho esfuerzo, así que espero le des un buen uso y le saques todo el potencial que puede ofrecer.
Si tienes sugerencias y/o has encontrado un error o algo, no dudes en hablarme. Estaré feliz de escucharte.
Y bueno, hemos llegado al final del post. ¡Muchas gracias si has llegado hasta aquí! Si te ha sido de ayuda, no dudes en compartirlo con algún amigo o interesado en Blogger. Agradecería mucho que, si puedes, dejes tu estrella en el repositorio del proyecto en GitHub para ganar algo de visibilidad en la web y mostrarle al mundo que Blogger es una excelente herramienta para trabajar. Sin mucho más que decir, ¡un saludo!