Adaptar el gadget Etiquetas de Blogger a una plantilla HTML/Bootstrap
Cuando adaptas una plantilla HTML para utilizarla en Blogger, es habitual encontrar bloques que originalmente fueron creados para mostrar contenido estático. Un ejemplo muy común es el bloque de Categories, donde las categorías, sus nombres y sus enlaces están escritos directamente en el HTML de la plantilla.
El problema es que Blogger ya dispone de su propio sistema de Etiquetas. Si simplemente dejamos las categorías de la plantilla original, tendremos que escribir y actualizar los enlaces manualmente, y el contenido no estará conectado con las publicaciones reales del blog.
En esta adaptación vamos a conservar el diseño original de la plantilla y sustituir únicamente la parte estática por el contenido dinámico que proporciona Blogger.
No necesitamos construir un sistema de etiquetas desde cero. Blogger ya se encarga de gestionar las etiquetas, sus enlaces y las opciones de configuración. Nuestro trabajo consiste en adaptar su presentación para que encaje con el diseño de la plantilla.
De esta forma, el resultado mantiene la apariencia de la plantilla original, pero las etiquetas se actualizan automáticamente cuando modificas el contenido del blog.
2. ¿Qué vamos a conseguir?
La plantilla original utiliza un bloque de categorías estáticas. Por ejemplo, la demostración puede mostrar elementos como:
Categories
Web Design
HTML
Freebies
JavaScript
CSS
TutorialsEstos nombres están escritos directamente en el HTML de la plantilla y sus enlaces también se definen manualmente. En otras palabras, forman parte del contenido de demostración de la plantilla y no están conectados con las etiquetas reales del blog.
Después de la adaptación, conservaremos el mismo bloque visual, pero sustituiremos los elementos estáticos de la lista por las etiquetas que Blogger proporciona al gadget. Por ejemplo, el resultado podría mostrar:
Etiquetas
Blogger
Linux
CSS
HTML
Tutoriales
RecursosLa diferencia importante es que estos nombres ya no estarán escritos directamente en el HTML. Blogger los generará a partir de las etiquetas que utilizas en las publicaciones del blog.
Lo mismo ocurre con los enlaces. En la plantilla original cada categoría utiliza una URL escrita manualmente, mientras que después de la adaptación Blogger genera automáticamente la URL correspondiente para cada etiqueta.
Por ejemplo, no tendremos que crear manualmente un enlace para Blogger, otro para Linux y otro para CSS. El gadget recorrerá las etiquetas disponibles y generará cada elemento junto con su enlace correspondiente.
Si posteriormente creas una nueva etiqueta, la utilizas en nuevas entradas o modificas la información del blog, Blogger podrá actualizar el contenido que muestra el gadget sin que tengas que escribir nuevamente cada elemento en el HTML de la plantilla.
No estamos convirtiendo el texto Categories en una función de Blogger. Estamos conservando el bloque visual de la plantilla y sustituyendo las categorías estáticas de su lista por las etiquetas dinámicas que Blogger genera automáticamente.
De esta manera, elementos como <ul>, <li> y
<a> siguen formando parte de la estructura visual, pero su contenido
ya no se escribe manualmente. Blogger se encarga de generar las etiquetas y sus enlaces,
mientras la plantilla conserva su diseño.
Así conseguimos mantener el diseño de la plantilla HTML sin perder la funcionalidad nativa de Blogger.
3. Demostración
Antes de comenzar con la adaptación, puedes ver el resultado final del gadget integrado en la plantilla. El bloque mantiene la apariencia del diseño original, pero ahora utiliza las etiquetas reales del blog.
En la demostración puedes comprobar cómo las etiquetas se generan directamente desde Blogger y cómo cada una conserva su enlace correspondiente.
- Las etiquetas proceden de Blogger: no es necesario escribirlas manualmente en el HTML.
- Los enlaces se generan automáticamente: cada etiqueta apunta a su página correspondiente dentro del blog.
- El diseño se conserva: la estructura visual de la plantilla sigue siendo la misma, pero ahora muestra contenido dinámico.
- La distribución es responsive: el CSS permite que las etiquetas se adapten a diferentes tamaños de pantalla.
La idea es conseguir que el gadget se integre en la plantilla sin que parezca un elemento añadido posteriormente. Blogger se encarga de la información y el diseño de la plantilla se encarga de la presentación.
4. Antes de comenzar
Antes de realizar cualquier modificación, asegúrate de tener todo lo necesario para trabajar con la plantilla. La adaptación se realiza directamente desde el código HTML de Blogger, por lo que es recomendable seguir los pasos con calma y conservar una copia de seguridad.
- Un blog creado con Blogger: necesitas un blog donde puedas realizar modificaciones en la plantilla.
- Una plantilla basada en la estructura que se está adaptando: el código mostrado en este tutorial corresponde a la estructura de la plantilla utilizada como referencia.
- Acceso a Tema → Editar HTML: desde aquí podrás localizar y modificar el gadget de Etiquetas.
- Conocimientos básicos de HTML de Blogger: no necesitas ser experto, pero conviene conocer la estructura básica de una plantilla XML de Blogger.
- Una copia de seguridad de la plantilla: antes de modificar el código, guarda una copia para poder restaurarla si algo sale mal.
Si es la primera vez que modificas una plantilla de Blogger, realiza una copia de seguridad antes de comenzar. Así podrás recuperar fácilmente la versión anterior si necesitas deshacer algún cambio.
5. Identificar el gadget Etiquetas
El primer paso es localizar dentro de la plantilla el gadget de Etiquetas que utiliza Blogger. Para hacerlo, entra en Blogger → Tema → Editar HTML y utiliza la búsqueda del editor.
Una forma sencilla de identificarlo es buscar:
type='Label'Encontrarás una estructura similar a esta:
<b:widget id='Label1' locked='false' title='Etiquetas' type='Label' visible='true'>
<b:widget-settings>
<b:widget-setting name='sorting'>ALPHA</b:widget-setting>
<b:widget-setting name='display'>LIST</b:widget-setting>
<b:widget-setting name='selectedLabelsList'/>
<b:widget-setting name='showType'>ALL</b:widget-setting>
<b:widget-setting name='showFreqNumbers'>false</b:widget-setting>
</b:widget-settings>
<b:includable id='main' var='this'>
<b:include name='widget-title'/>
<b:include name='content'/>
</b:includable>
<b:includable id='cloud'>
<b:loop values='data:labels' var='label'>
<span class='label-size'>
<b:class expr:name='"label-size-" + data:label.cssSize'/>
<a class='label-name' expr:href='data:label.url'>
<data:label.name/>
<b:if cond='data:this.showFreqNumbers'>
<span class='label-count'><data:label.count/></span>
</b:if>
</a>
</span>
</b:loop>
</b:includable>
<b:includable id='content'>
<div class='widget-content'>
<b:class expr:name='data:this.display + "-label-widget-content"'/>
<b:include cond='data:this.display == "list"' name='list'/>
<b:include cond='data:this.display == "cloud"' name='cloud'/>
</div>
</b:includable>
<b:includable id='list'>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<a class='label-name' expr:href='data:label.url'>
<data:label.name/>
<b:if cond='data:this.showFreqNumbers'>
<span class='label-count'><data:label.count/></span>
</b:if>
</a>
</li>
</b:loop>
</ul>
</b:includable>
</b:widget>
El atributo type='Label' indica que se trata del gadget de Etiquetas de Blogger. Por su parte, Label1 es el identificador que Blogger utiliza para ese gadget dentro de la plantilla.
No es necesario que intentes entender todo el código del gadget de una sola vez. Blogger divide su funcionamiento en diferentes bloques llamados b:includable. Cada uno cumple una función determinada dentro del gadget.
Para esta adaptación nos interesa principalmente el bloque:
<b:includable id='list'>
Este es el bloque que controla la presentación de las etiquetas cuando el gadget está configurado como Lista. Dentro de él encontramos la lista <ul>, los elementos <li> y el enlace que muestra cada etiqueta.
También encontraremos otros bloques, como cloud y content. No vamos a modificarlos indiscriminadamente. En este tutorial trabajaremos sobre la presentación en forma de lista, porque es la estructura que vamos a integrar con el bloque Categories de la plantilla.
Por eso, una vez localizado el gadget, no debes pensar que tienes que reemplazar todo el código que aparece después de type='Label'. Primero debemos identificar qué parte genera la lista de etiquetas y, en el siguiente paso, compararla con la estructura visual de la plantilla.
En la adaptación conservaremos la lógica que Blogger utiliza para generar las etiquetas. Lo que modificaremos principalmente será la estructura HTML que las rodea, para incorporar el diseño de la plantilla.
En otras palabras, Blogger seguirá proporcionando las etiquetas, sus nombres y sus enlaces; nosotros adaptaremos la forma en que esos elementos se presentan visualmente.
Si estás empezando a trabajar con plantillas XML de Blogger, lo más práctico es buscar primero type='Label'. Una vez localizado el gadget, busca dentro de él id='list'. Esa será la parte que utilizaremos como punto de partida para la adaptación.
No intentes modificar el código todavía. Primero localiza el gadget y su bloque list. En la siguiente sección veremos qué estructura utiliza la plantilla y compararemos ambas partes antes de realizar cualquier cambio.
6. Analizar el bloque original de la plantilla
Una vez identificado el gadget de Blogger, el siguiente paso es revisar el bloque que queremos adaptar. En la plantilla original, la demostración utiliza un bloque de Categories creado con HTML y Bootstrap.
Su estructura es similar a esta:
<!-- Categories widget-->
<div class="card mb-4">
<div class="card-header">Categories</div>
<div class="card-body">
<div class="row">
<div class="col-sm-6">
<ul class="list-unstyled mb-0">
<li><a href="#!">Web Design</a></li>
<li><a href="#!">HTML</a></li>
<li><a href="#!">Freebies</a></li>
</ul>
</div>
<div class="col-sm-6">
<ul class="list-unstyled mb-0">
<li><a href="#!">JavaScript</a></li>
<li><a href="#!">CSS</a></li>
<li><a href="#!">Tutorials</a></li>
</ul>
</div>
</div>
</div>
</div>Aunque el contenido de la demostración es sencillo, cada elemento cumple una función dentro del diseño:
card: es el contenedor principal del bloque.card-header: contiene el título que aparece en la parte superior.card-body: contiene el contenido del bloque.row: crea la fila utilizada por Bootstrap para organizar las columnas.col-sm-6: divide el contenido en dos columnas en determinados tamaños de pantalla.ul: define la lista donde se muestran las categorías.li: representa cada elemento de la lista.a: contiene el enlace asociado a cada categoría.
¿Qué vamos a conservar?
La plantilla ya tiene una estructura visual que nos interesa conservar. Por eso no vamos a eliminar todo el bloque de Categories ni a construir otro diseño desde cero.
Vamos a conservar principalmente los elementos que definen la apariencia del bloque:
<div class="card mb-4">
<div class="card-header">
...
</div>
<div class="card-body">
...
</div>
</div>
También conservaremos la estructura de la lista, ya que Blogger necesita generar cada etiqueta dentro de elementos como ul, li y a.
El contenedor, el encabezado y el cuerpo del bloque pertenecen a la presentación de la plantilla. Esas partes son las que queremos mantener para que el gadget de Blogger tenga la misma apariencia que el bloque original.
¿Qué vamos a reemplazar?
Lo que no nos sirve es el contenido que está escrito manualmente dentro de la lista.
Por ejemplo, la plantilla contiene elementos como estos:
<li><a href="#!">Web Design</a></li>
<li><a href="#!">HTML</a></li>
<li><a href="#!">Freebies</a></li>
Aquí encontramos dos problemas. El nombre de la categoría está escrito directamente en el HTML y el enlace también está definido manualmente mediante href.
Si queremos que el bloque funcione con las etiquetas reales del blog, esos elementos estáticos deben ser sustituidos por la información que Blogger proporciona al gadget.
En lugar de escribir cada etiqueta manualmente, utilizaremos el sistema que ya vimos en el gadget de Blogger:
<b:loop values='data:labels' var='label'>
<li>
<a expr:href='data:label.url'>
<data:label.name/>
</a>
</li>
</b:loop>
Aquí se produce la verdadera adaptación. El li y el enlace siguen formando parte de la estructura de la lista, pero ahora el contenido ya no está escrito manualmente.
b:loop: recorre las etiquetas que proporciona Blogger.data:label.name: coloca el nombre de cada etiqueta.data:label.url: genera el enlace correspondiente a cada etiqueta.
La transformación
Podemos verlo de una forma muy sencilla:
Antes: la plantilla contiene categorías escritas manualmente.
<li><a href="#!">Web Design</a></li>
<li><a href="#!">HTML</a></li>
<li><a href="#!">Freebies</a></li>Después: Blogger genera las etiquetas dentro de la misma estructura.
<b:loop values='data:labels' var='label'>
<li>
<a expr:href='data:label.url'>
<data:label.name/>
</a>
</li>
</b:loop>Por tanto, no estamos reemplazando el diseño de la plantilla. Estamos reemplazando el contenido estático que estaba escrito dentro de ese diseño por el contenido dinámico que proporciona Blogger.
La plantilla proporciona la estructura visual y Blogger proporciona el contenido dinámico. Conservamos el diseño que ya funciona y sustituimos únicamente las categorías escritas manualmente por las etiquetas reales del blog.
En el siguiente paso vamos a aplicar exactamente esta idea dentro del gadget de Etiquetas. Tomaremos el bloque list del gadget de Blogger y colocaremos dentro de él la estructura visual que acabamos de analizar.
7. Adaptar el gadget de Blogger
Ahora que ya hemos identificado el gadget de Etiquetas y analizado el bloque Categories de la plantilla original, podemos realizar la adaptación. La idea es sencilla: no vamos a crear nuevamente el sistema de etiquetas, porque Blogger ya se encarga de ello. Vamos a conservar esa funcionalidad y modificar la estructura que utiliza para mostrar las etiquetas.
En otras palabras, vamos a tomar la estructura visual de la plantilla y colocar dentro de ella los datos dinámicos que Blogger ya utiliza para generar las etiquetas.
Blogger proporciona las etiquetas, sus nombres, sus enlaces y su configuración, mientras que la plantilla HTML proporciona la estructura visual en la que queremos mostrar esos datos.
1. ¿Qué tenía originalmente el gadget de Blogger?
Cuando localizamos el gadget de Etiquetas en la plantilla, encontramos un bloque includable encargado de mostrar la lista de etiquetas. En una plantilla de Blogger puede tener una estructura similar a esta:
<b:includable id='list'>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<a class='label-name' expr:href='data:label.url'>
<data:label.name/>
<b:if cond='data:this.showFreqNumbers'>
<span class='label-count'>
<data:label.count/>
</span>
</b:if>
</a>
</li>
</b:loop>
</ul>
</b:includable>Este código ya contiene la parte dinámica que necesitamos. El gadget sabe obtener las etiquetas de Blogger y generar cada elemento de la lista.
Por eso, no necesitamos modificar la lógica que genera las etiquetas. Lo que vamos a cambiar es la estructura HTML que las rodea para que tenga la apariencia de la plantilla que estamos adaptando.
2. ¿Qué tenía la plantilla original?
Por otro lado, la plantilla HTML utiliza un bloque visual para mostrar sus categorías. La estructura original es similar a esta:
<div class="card mb-4">
<div class="card-header">
Categories
</div>
<div class="card-body">
...
</div>
</div>Aquí no encontramos ninguna función de Blogger. Se trata simplemente de HTML utilizado para construir la apariencia del bloque.
El elemento card crea el contenedor principal, card-header
corresponde al encabezado y card-body contiene la lista de categorías.
Por tanto, esta estructura es precisamente la parte que podemos reutilizar.
3. ¿Qué vamos a modificar?
En lugar de eliminar el sistema de etiquetas de Blogger y reconstruirlo dentro del HTML de la plantilla, vamos a hacer lo contrario: mantendremos el código dinámico de Blogger y cambiaremos el HTML que lo rodea.
El resultado será esta estructura:
<b:includable id='list'>
<div class='card mb-4'>
<div class='card-header'>
<data:title/>
</div>
<div class='card-body'>
<ul class='list-unstyled mb-0 ob-label-list'>
<b:loop values='data:labels' var='label'>
...
</b:loop>
</ul>
</div>
</div>
</b:includable>
Observa que el b:loop continúa dentro de la lista. Lo que hemos hecho es
colocar la estructura visual de la plantilla alrededor de ese contenido dinámico.
4. ¿Qué parte de Blogger debemos conservar?
Esta es una de las partes más importantes de la adaptación. Hay elementos del gadget que no debemos eliminar, porque son los encargados de obtener y mostrar la información de Blogger.
data:labels
data:labels es la colección de etiquetas que Blogger proporciona al gadget.
Es la información que posteriormente recorreremos para generar cada elemento de la lista.
Por eso no debemos sustituirla por nombres escritos manualmente. Si lo hacemos, volveríamos a convertir el contenido en una lista estática.
b:loop
El b:loop recorre la colección de etiquetas una por una:
<b:loop values='data:labels' var='label'>Todo lo que coloquemos dentro de este bucle se generará para cada etiqueta que Blogger encuentre.
Por ejemplo, si el blog tiene seis etiquetas, Blogger generará seis elementos de la lista. Si posteriormente existen diez, el mismo código podrá generar diez sin que tengamos que escribirlos manualmente.
data:label.name
Esta expresión obtiene el nombre de la etiqueta actual:
<data:label.name/>
Por ejemplo, si una de las etiquetas del blog se llama Blogger, Blogger
mostrará ese nombre en el lugar donde se encuentre data:label.name.
Esto reemplaza directamente a los nombres que encontrábamos escritos en la plantilla original, como Web Design, HTML o Freebies.
data:label.url
Esta expresión proporciona la URL correspondiente a la etiqueta:
<a class='label-name' expr:href='data:label.url'>
<data:label.name/>
</a>Aquí ocurre otra parte importante de la adaptación. Ya no necesitamos escribir una dirección manualmente para cada categoría. Blogger genera la URL correspondiente y la coloca en el enlace.
data:label.count
El contador también puede conservarse porque forma parte de la funcionalidad del gadget:
<b:if cond='data:this.showFreqNumbers'>
<span class='label-count'>
<data:label.count/>
</span>
</b:if>
La condición comprueba si en la configuración del gadget está habilitada la opción para
mostrar el número de entradas. Si está activada, Blogger proporciona el número mediante
data:label.count.
5. ¿Qué parte de la plantilla vamos a incorporar?
Ahora que conocemos qué parte debe permanecer intacta, podemos identificar qué elementos de la plantilla original vamos a reutilizar.
La estructura visual que nos interesa es:
<div class='card mb-4'>
<div class='card-header'>
Categories
</div>
<div class='card-body'>
<ul class='list-unstyled mb-0'>
...
</ul>
</div>
</div>
El contenedor card, el encabezado card-header, el contenido
card-body y las clases visuales de la lista pertenecen al diseño de la
plantilla.
Lo que debemos hacer es conservar esa estructura, pero reemplazar las categorías estáticas por el contenido dinámico de Blogger.
6. Sustituir las categorías estáticas
En la plantilla original encontramos elementos como estos:
<li><a href="#!">Web Design</a></li>
<li><a href="#!">HTML</a></li>
<li><a href="#!">Freebies</a></li>Estos elementos solamente sirven para mostrar el contenido de demostración de la plantilla. No necesitamos conservar esos nombres ni sus enlaces.
En su lugar, dejamos que Blogger genere cada elemento mediante el b:loop:
<b:loop values='data:labels' var='label'>
<li>
<a class='label-name' expr:href='data:label.url'>
<data:label.name/>
<b:if cond='data:this.showFreqNumbers'>
<span class='label-count'>
<data:label.count/>
</span>
</b:if>
</a>
</li>
</b:loop>
De esta manera, li y a siguen formando parte de la estructura
HTML, pero su contenido ya no está escrito manualmente. Blogger se encarga de generar
cada elemento.
7. El resultado de la adaptación
Uniendo ambas partes obtenemos el bloque que utilizaremos en el gadget:
<b:includable id='list'>
<div class='card mb-4'>
<div class='card-header'>
<data:title/>
</div>
<div class='card-body'>
<ul class='list-unstyled mb-0 ob-label-list'>
<b:loop values='data:labels' var='label'>
<li>
<a class='label-name' expr:href='data:label.url'>
<data:label.name/>
<b:if cond='data:this.showFreqNumbers'>
<span class='label-count'>
<data:label.count/>
</span>
</b:if>
</a>
</li>
</b:loop>
</ul>
</div>
</div>
</b:includable>
Aquí podemos ver claramente qué ocurrió durante la adaptación. El contenedor visual
de la plantilla fue incorporado al includable de la lista, mientras que
la lógica de Blogger para generar las etiquetas permanece dentro del mismo bloque.
8. ¿Qué debemos tocar y qué debemos dejar intacto?
Para realizar esta adaptación de forma segura, es importante distinguir entre la configuración del gadget y la estructura que controla su presentación.
No debemos modificar <b:widget-settings> para realizar
esta adaptación. Allí se encuentran opciones como el orden, la forma de mostrar las
etiquetas, las etiquetas seleccionadas y el contador. Esas opciones pertenecen a la
configuración del gadget y Blogger las utiliza para determinar cómo debe funcionar.
Tampoco debemos eliminar los elementos dinámicos que proporcionan la información:
data:labels→ proporciona la colección de etiquetas.b:loop→ recorre cada etiqueta.data:label.name→ muestra el nombre.data:label.url→ proporciona la URL.data:label.count→ proporciona el número de entradas cuando está habilitado.
Lo que adaptamos principalmente es la estructura HTML que rodea esos datos: el contenedor, el encabezado, el contenido, la lista y las clases necesarias para que el bloque adopte la apariencia de la plantilla.
No estamos reemplazando el funcionamiento del gadget. Estamos modificando su presentación. Blogger continúa generando las etiquetas y nosotros utilizamos la estructura visual de la plantilla para decidir cómo se muestran.
9. ¿Qué parte debemos reemplazar en la plantilla?
Si estás trabajando sobre una plantilla que ya contiene el gadget de Etiquetas, no es
necesario reemplazar todo el bloque <b:widget>.
La modificación principal se realiza en el bloque:
<b:includable id='list'>Dentro de ese bloque se encuentra la estructura que Blogger utiliza para mostrar la lista. Es ahí donde incorporamos el diseño de la plantilla.
De esta forma, el proceso es mucho más sencillo: localizamos el includable
de la lista, conservamos la lógica de Blogger y sustituimos la estructura HTML necesaria
por la estructura visual que queremos utilizar.
Si estás comenzando con la adaptación de plantillas Blogger, no intentes modificar
todo el gadget de una sola vez. Identifica primero el b:includable id='list',
comprende qué parte genera las etiquetas y después sustituye únicamente la estructura
visual que necesitas adaptar.
Con esto ya tenemos la parte funcional de la adaptación. Blogger genera las etiquetas y sus enlaces, mientras que la plantilla proporciona la apariencia. En el siguiente paso añadiremos el fixer CSS necesario para distribuir dinámicamente esas etiquetas y conseguir que el resultado mantenga la apariencia de la demostración.
8. Adaptación rápida
Además de adaptar el gadget completo de Etiquetas, existe una segunda posibilidad cuando no necesitas conservar todas sus opciones de configuración.
En determinados bloques de una plantilla puede ser suficiente mantener la estructura HTML original y utilizar directamente las funciones que Blogger proporciona para generar las etiquetas. De esta manera, puedes integrar las etiquetas dinámicas dentro de un bloque concreto sin tener que conservar toda la estructura del gadget.
La parte fundamental es utilizar el b:loop para recorrer las etiquetas que Blogger proporciona:
<b:loop values='data:labels' var='label'>Dentro del bucle puedes utilizar los datos de cada etiqueta. Por ejemplo, para generar su nombre y su enlace:
<b:loop values='data:labels' var='label'>
<a expr:href='data:label.url'>
<data:label.name/>
</a>
</b:loop>
En este caso, data:label.name muestra el nombre de la etiqueta y data:label.url genera automáticamente su enlace correspondiente.
¿Cuándo utilizar esta alternativa?
Esta opción resulta útil cuando solamente necesitas mostrar las etiquetas dentro de un bloque concreto de la plantilla y no necesitas conservar todas las opciones configurables del gadget de Blogger.
Por ejemplo, si una plantilla tiene un bloque de categorías perfectamente definido y solamente quieres sustituir las categorías escritas manualmente por las etiquetas reales del blog, puedes conservar el HTML de ese bloque y utilizar el b:loop para generar su contenido dinámicamente.
Este es el resultado de la adaptación rápida
En esta adaptación rápida metemos directamente nuestra estructura visual dentro de
main, sin mantener la separación entre main,
content y list. Esto hace que el código sea mucho más
sencillo y corto, pero también implica una adaptación más directa y específica,
ya que estamos indicando que, para este gadget, main mostrará
directamente la estructura visual que hemos diseñado. Es una solución práctica
cuando no necesitamos conservar toda la estructura original del gadget y queremos
centrarnos únicamente en conseguir el resultado visual que buscamos.
<b:widget id='Label1' locked='true' title='Etiquetas' type='Label' version='2' visible='true'>
<b:widget-settings>
<b:widget-setting name='sorting'>ALPHA</b:widget-setting>
<b:widget-setting name='display'>LIST</b:widget-setting>
<b:widget-setting name='selectedLabelsList'/>
<b:widget-setting name='showType'>ALL</b:widget-setting>
<b:widget-setting name='showFreqNumbers'>false</b:widget-setting>
</b:widget-settings>
<b:includable id='main' var='this'>
<div class='card mb-4'>
<!-- Título -->
<div class='card-header'>
<data:title/>
</div>
<!-- Contenido -->
<div class='card-body'>
<ul class='list-unstyled mb-0 ob-label-list'>
<b:loop values='data:labels' var='label'>
<li>
<a class='label-name' expr:href='data:label.url'>
<data:label.name/>
<b:if cond='data:this.showFreqNumbers'>
<span class='label-count'>
<data:label.count/>
</span>
</b:if>
</a>
</li>
</b:loop>
</ul>
</div>
</div>
</b:includable>
<b:includable id='cloud'>
<b:loop values='data:labels' var='label'>
<span class='label-size'>
<b:class expr:name='"label-size-" + data:label.cssSize'/>
<a class='label-name' expr:href='data:label.url'>
<data:label.name/>
<b:if cond='data:this.showFreqNumbers'>
<span class='label-count'><data:label.count/></span>
</b:if>
</a>
</span>
</b:loop>
</b:includable>
<b:includable id='content'>
<div class='widget-content'>
<b:class expr:name='data:this.display + "-label-widget-content"'/>
<b:include cond='data:this.display == "list"' name='list'/>
<b:include cond='data:this.display == "cloud"' name='cloud'/>
</div>
</b:includable>
<b:includable id='list'>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<a class='label-name' expr:href='data:label.url'>
<data:label.name/>
<b:if cond='data:this.showFreqNumbers'>
<span class='label-count'><data:label.count/></span>
</b:if>
</a>
</li>
</b:loop>
</ul>
</b:includable>
</b:widget>La adaptación rápida es una alternativa más sencilla, pero tiene menos opciones que adaptar el gadget completo. Si necesitas conservar la configuración nativa de Blogger, como el orden de las etiquetas, el contador de entradas o la selección de etiquetas, es preferible utilizar el gadget adaptado.
9. ¿Qué diferencia hay entre ambos métodos?
Las dos opciones permiten mostrar las etiquetas de Blogger dentro del diseño de una plantilla, pero no ofrecen el mismo nivel de integración con las funciones del gadget.
| Característica | Gadget adaptado | Adaptación rápida |
|---|---|---|
| Etiquetas dinámicas | Sí | Sí |
| URLs de Blogger | Sí | Sí |
| Configuración del gadget | Sí | Limitada |
| Integración con el diseño | Sí | Sí |
| Complejidad | Media | Baja |
| Recomendado para esta adaptación | Sí | Alternativa |
¿Cuál conviene utilizar?
Para esta adaptación recomiendo conservar y modificar el gadget de Etiquetas. De esta manera, Blogger continúa ofreciendo sus opciones de configuración y nosotros solamente modificamos la presentación para integrarla con el diseño de la plantilla.
La adaptación rápida sigue siendo una opción útil cuando solo necesitas mostrar las etiquetas dentro de un bloque específico y no necesitas las funciones adicionales del gadget.
10. Fixer CSS y distribución de las etiquetas
La plantilla original utiliza las clases de Bootstrap row y col-sm-6 para distribuir las categorías en dos columnas. Esto funciona bien cuando las categorías están escritas directamente en el HTML y su cantidad es conocida.
En Blogger, en cambio, las etiquetas son dinámicas. El número de etiquetas puede aumentar o disminuir según el contenido del blog, por lo que no resulta práctico crear manualmente una columna para cada grupo de etiquetas.
Por esta razón, en esta adaptación añadimos un pequeño fixer CSS. Su función es tomar la lista dinámica que genera Blogger y distribuir automáticamente sus elementos en dos columnas, manteniendo además un comportamiento adecuado en pantallas pequeñas.
El fixer CSS
Este es el código utilizado en la adaptación:
.ob-label-list {
columns: 2;
column-gap: 30px;
}
.ob-label-list li {
break-inside: avoid;
}
@media (max-width: 575.98px) {
.ob-label-list {
columns: 1;
}
}Este CSS no sustituye el código del gadget ni modifica la forma en que Blogger genera las etiquetas. Solamente controla la manera en que la lista resultante se distribuye visualmente.
¿De dónde sale .ob-label-list?
La clase .ob-label-list no pertenece originalmente a Bootstrap ni es una clase que Blogger añada automáticamente. La incorporamos nosotros al adaptar el gadget.
En el código del gadget adaptado, la clase se añade directamente al elemento ul:
<ul class='list-unstyled mb-0 ob-label-list'>De esta manera podemos aplicar el fixer específicamente a la lista de etiquetas sin afectar a otras listas que pueda tener la plantilla.
Porque necesitamos identificar de forma precisa la lista que queremos distribuir en columnas. Las clases list-unstyled y mb-0 pertenecen al diseño de Bootstrap, mientras que ob-label-list es nuestra clase de identificación para aplicar los ajustes propios de esta adaptación.
columns: 2;
Esta propiedad indica que el contenido de .ob-label-list debe distribuirse en dos columnas:
.ob-label-list {
columns: 2;
}
La ventaja de utilizar columns en lugar de crear manualmente dos bloques con col-sm-6 es que no necesitamos saber cuántas etiquetas existen.
Blogger puede generar cinco, diez, veinte o más etiquetas y el navegador se encarga de distribuirlas dentro de las dos columnas disponibles.
column-gap: 30px;
La propiedad column-gap establece el espacio horizontal que queda entre las dos columnas:
.ob-label-list {
column-gap: 30px;
}En esta adaptación utilizamos un espacio de 30 píxeles. Esto evita que las dos columnas queden demasiado juntas y ayuda a mantener una distribución similar a la presentación original de la plantilla.
break-inside: avoid;
También añadimos una regla para los elementos li:
.ob-label-list li {
break-inside: avoid;
}Su función es evitar, en la medida de lo posible, que un elemento de la lista se divida entre una columna y otra.
Así, cada etiqueta permanece como una unidad dentro de la distribución de columnas.
Comportamiento responsive
En pantallas pequeñas no resulta conveniente mantener las dos columnas porque el espacio disponible es mucho menor. Por eso el fixer incluye una regla @media:
@media (max-width: 575.98px) {
.ob-label-list {
columns: 1;
}
}Cuando el ancho de la pantalla es igual o inferior a 575.98 píxeles, la lista cambia de dos columnas a una sola.
De esta forma, en pantallas grandes las etiquetas se muestran en dos columnas, mientras que en dispositivos pequeños se presentan en una columna para aprovechar mejor el espacio disponible.
¿Qué hace todo el fixer?
Las tres partes trabajan juntas:
columns: 2;: distribuye la lista en dos columnas.column-gap: 30px;: establece la separación entre ambas columnas.break-inside: avoid;: evita dividir un elemento de la lista entre columnas.@media (max-width: 575.98px): cambia la lista a una sola columna en pantallas pequeñas.
El resultado es que Blogger continúa generando las etiquetas de forma dinámica y el CSS se ocupa únicamente de organizar visualmente esa lista.
El fixer no modifica Bootstrap ni reemplaza sus estilos. Añade únicamente las reglas necesarias para integrar el gadget de Etiquetas de Blogger con el diseño de la plantilla.
Por eso la clase ob-label-list y el fixer CSS forman parte de la adaptación: el gadget proporciona las etiquetas y sus enlaces, mientras que estas reglas controlan cómo se presentan dentro del bloque visual de la plantilla.
11. Configuración del gadget
Una de las ventajas de adaptar el gadget de Etiquetas de Blogger en lugar de reemplazarlo por HTML estático es que sus opciones de configuración continúan disponibles.
La adaptación modifica principalmente la presentación visual del gadget. Las opciones que controlan qué etiquetas se muestran, cómo se ordenan o si aparece el número de entradas siguen perteneciendo a Blogger.
Estas opciones se encuentran dentro de <b:widget-settings>, que forma parte del gadget:
<b:widget-settings>
<b:widget-setting name='sorting'>ALPHA</b:widget-setting>
<b:widget-setting name='display'>LIST</b:widget-setting>
<b:widget-setting name='selectedLabelsList'/>
<b:widget-setting name='showType'>ALL</b:widget-setting>
<b:widget-setting name='showFreqNumbers'>false</b:widget-setting>
</b:widget-settings>No necesitamos modificar estas opciones para realizar la adaptación visual. Lo importante es conservarlas para que Blogger pueda seguir gestionándolas desde la configuración del gadget.
Orden de las etiquetas
El orden de las etiquetas se controla mediante:
<b:widget-setting name='sorting'>ALPHA</b:widget-setting>
El valor ALPHA corresponde al orden alfabético. Si desde la configuración del gadget seleccionas Por frecuencia, Blogger cambia este valor para utilizar el orden correspondiente.
Por tanto, no necesitamos programar manualmente el orden dentro del b:loop. El gadget continúa utilizando la configuración que proporciona Blogger.
Lista o nube
La forma en que se muestran las etiquetas se controla mediante:
<b:widget-setting name='display'>LIST</b:widget-setting>
En esta adaptación utilizamos LIST, porque la estructura que estamos adaptando está diseñada para mostrar las etiquetas como una lista.
El gadget de Blogger también dispone de la opción Nube, pero esta genera una estructura diferente. Por ese motivo, el código que hemos adaptado está pensado para trabajar con Lista.
Etiquetas mostradas
La opción que determina si se muestran todas las etiquetas o solamente algunas se refleja en:
<b:widget-setting name='showType'>ALL</b:widget-setting>
El valor ALL indica que el gadget está configurado para mostrar todas las etiquetas disponibles.
Si desde Blogger seleccionas Etiquetas seleccionadas, la configuración cambia y Blogger utiliza también la información almacenada en:
<b:widget-setting name='selectedLabelsList'/>De esta manera, la adaptación no necesita crear una lógica propia para decidir qué etiquetas mostrar. Esa tarea continúa siendo responsabilidad del gadget de Blogger.
Mostrar número de entradas
La opción para mostrar el número de publicaciones asociadas a cada etiqueta se controla mediante:
<b:widget-setting name='showFreqNumbers'>false</b:widget-setting>
Cuando el valor es false, el contador no se muestra. Si activas la opción Mostrar número de entradas por etiqueta desde Blogger, el gadget cambia este valor.
El código que adaptamos anteriormente ya está preparado para utilizar esa configuración:
<b:if cond='data:this.showFreqNumbers'>
<span class='label-count'>
<data:label.count/>
</span>
</b:if>
La condición comprueba si el contador está habilitado. Si lo está, Blogger proporciona el número mediante data:label.count y la adaptación lo muestra dentro del enlace.
¿Qué ocurre al cambiar una opción?
Una de las ventajas de conservar el gadget original es que no tenemos que modificar nuevamente el HTML cada vez que queremos cambiar una opción.
Por ejemplo, puedes cambiar desde Blogger:
- El orden: entre alfabético y frecuencia.
- Las etiquetas mostradas: todas o solamente las seleccionadas.
- El contador: mostrar u ocultar el número de entradas.
- La presentación: lista o nube, aunque esta adaptación está preparada para Lista.
La información continúa siendo gestionada por Blogger y el código adaptado utiliza esos datos para generar la presentación.
Los valores de <b:widget-settings> siguen perteneciendo al gadget original de Blogger. Nosotros modificamos principalmente la estructura HTML que presenta las etiquetas, mientras Blogger continúa gestionando su configuración y sus datos.
Esta es nuevamente la idea principal de esta adaptación: adaptar, no reemplazar.
¿Qué debemos modificar y qué debemos conservar?
| Elemento | ¿Se modifica? | Función |
|---|---|---|
b:widget-settings |
No | Conserva la configuración del gadget. |
sorting |
No | Controla el orden de las etiquetas. |
display |
No | Controla Lista o Nube. |
showType |
No | Controla qué etiquetas se muestran. |
showFreqNumbers |
No | Controla el contador de entradas. |
Estructura HTML del bloque list |
Sí | Integra las etiquetas con el diseño de la plantilla. |
| CSS del fixer | Sí | Controla la presentación y distribución visual. |
De esta forma queda clara la separación entre ambas partes: Blogger conserva la funcionalidad y la configuración, mientras que la adaptación se ocupa de integrar esa funcionalidad dentro del diseño de la plantilla.
Si necesitas cambiar el orden, las etiquetas mostradas o el contador, hazlo desde la configuración del gadget en Blogger. No es necesario modificar el código adaptado para realizar estos cambios.
12. Personalización
Una vez instalada la adaptación, puedes modificar su apariencia para que combine con el resto de la plantilla sin alterar la funcionalidad del gadget de Blogger.
La personalización se realiza mediante CSS. Blogger continúa encargándose de generar las etiquetas, sus enlaces y las opciones del gadget, mientras que el CSS controla cómo se presentan visualmente.
Para principiantes
Si estás comenzando con CSS, lo recomendable es modificar únicamente las propiedades visuales relacionadas con la lista y sus enlaces. No necesitas cambiar la estructura del gadget de Blogger para personalizar su apariencia.
Estas son algunas de las propiedades que puedes modificar directamente:
Cambiar el color de las etiquetas
El color de los enlaces se puede controlar mediante la propiedad color. Puedes añadir esta regla al fixer:
.ob-label-list a {
color: #0077cc;
}
Cambia #0077cc por el color que quieras utilizar. Por ejemplo, puedes utilizar el color principal o de acento de tu plantilla.
color: modifica el color del texto de las etiquetas.
Cambiar el tamaño del texto
Para aumentar o reducir el tamaño de las etiquetas puedes utilizar font-size:
.ob-label-list a {
font-size: 15px;
}
Puedes cambiar 15px por el tamaño que necesites.
font-size: controla el tamaño del texto.
Cambiar la separación entre las columnas
El fixer ya utiliza column-gap para separar las dos columnas:
.ob-label-list {
column-gap: 30px;
}Si quieres que las columnas estén más juntas, reduce el valor. Si quieres aumentar la separación, utiliza un valor mayor.
column-gap: controla el espacio horizontal entre las columnas.
Cambiar el espacio entre las etiquetas
La separación vertical entre los elementos puede ajustarse añadiendo un margen inferior a los elementos li:
.ob-label-list li {
margin-bottom: 6px;
}
Puedes aumentar o reducir 6px según el espacio que quieras dejar entre una etiqueta y otra.
margin-bottom: controla el espacio debajo de cada etiqueta.
Cambiar el color al pasar el cursor
También puedes definir un color diferente cuando el usuario coloca el cursor sobre una etiqueta:
.ob-label-list a:hover {
color: #005fa3;
}
La propiedad :hover se aplica mientras el cursor se encuentra sobre el enlace.
:hover: permite modificar la apariencia del enlace al pasar el cursor.color: define el color que tendrá durante ese estado.
Si estás empezando con CSS, puedes concentrarte en unas pocas propiedades: color, font-size, column-gap y margin-bottom. Cambia un valor cada vez y comprueba el resultado antes de realizar otro cambio.
Para usuarios con conocimientos de CSS
Si ya tienes experiencia con CSS, puedes modificar otros aspectos de la distribución y presentación del bloque. En este caso, conviene trabajar sobre la clase .ob-label-list y sus elementos en lugar de modificar la estructura del gadget de Blogger.
Número de columnas
El fixer utiliza:
.ob-label-list {
columns: 2;
}
El valor 2 indica que la lista se distribuye en dos columnas. Puedes cambiarlo si necesitas otra distribución.
columns: determina el número de columnas utilizadas para distribuir la lista.
Separación entre columnas
La separación horizontal se controla mediante:
.ob-label-list {
column-gap: 30px;
}Puedes aumentar o reducir este valor para adaptar el bloque al ancho disponible en la plantilla.
Separación y márgenes
Además de column-gap, puedes utilizar propiedades como margin y padding para controlar el espacio exterior e interior del bloque.
.ob-label-list {
margin: 10px 0;
padding-left: 0;
}margin: controla el espacio exterior del elemento.padding: controla el espacio interior.
En el caso de esta adaptación, es importante tener en cuenta que Bootstrap ya proporciona algunas reglas para la lista mediante list-unstyled. Por eso conviene comprobar el resultado antes de modificar estas propiedades.
Tipografía
Los usuarios con conocimientos de CSS también pueden modificar la tipografía de los enlaces:
.ob-label-list a {
font-family: inherit;
font-size: 15px;
font-weight: 400;
}font-family: controla la familia tipográfica.font-size: controla el tamaño.font-weight: controla el grosor del texto.
Fondos y bordes
Si quieres integrar visualmente la lista con otros elementos de la plantilla, también puedes añadir fondos o bordes:
.ob-label-list {
background: #ffffff;
border: 1px solid #dddddd;
}Estas propiedades son opcionales. Utilízalas solamente si el diseño de la plantilla necesita ese tipo de separación visual.
background: establece el fondo del elemento.border: añade un borde alrededor del elemento.
Comportamiento responsive
El fixer ya incluye una regla @media que cambia la lista de dos columnas a una columna en pantallas pequeñas:
@media (max-width: 575.98px) {
.ob-label-list {
columns: 1;
}
}Los usuarios con conocimientos de CSS pueden modificar el punto de ruptura o ajustar las reglas utilizadas en este bloque para adaptarlo a las necesidades de la plantilla.
@media: permite aplicar reglas diferentes según el tamaño de la pantalla.max-width: establece el ancho máximo a partir del cual se aplican esas reglas.columns: 1: cambia la lista a una sola columna.
Los cambios de personalización deben realizarse sobre el CSS, no sobre la lógica que genera las etiquetas. No es necesario modificar data:labels, b:loop, data:label.name ni data:label.url para cambiar colores, tamaños, espacios o distribución.
¿Qué modificar según tu nivel?
| Nivel | Propiedades recomendadas | Qué puedes cambiar |
|---|---|---|
| Principiante | color |
Color de las etiquetas. |
| Principiante | font-size |
Tamaño del texto. |
| Principiante | column-gap |
Separación entre columnas. |
| Principiante | margin-bottom |
Separación entre etiquetas. |
| Intermedio/avanzado | columns |
Número de columnas. |
| Intermedio/avanzado | margin / padding |
Espacios del bloque. |
| Intermedio/avanzado | font-family / font-weight |
Tipografía. |
| Intermedio/avanzado | @media |
Comportamiento responsive. |
| Intermedio/avanzado | background / border |
Fondos y bordes. |
Si estás empezando con CSS, modifica únicamente las propiedades visuales del fixer y cambia un valor cada vez. Evita modificar la estructura del gadget de Blogger o eliminar las expresiones que generan las etiquetas si no tienes claro qué función cumple cada una.
Si ya tienes conocimientos de CSS, puedes ampliar la personalización, pero mantén separadas las dos partes de la adaptación: Blogger genera el contenido y CSS controla su presentación.
13. Solución de problemas
Si después de realizar la adaptación el gadget no se muestra como esperabas, lo primero es identificar si el problema está relacionado con los datos de Blogger, la estructura del gadget, la configuración o el CSS.
Como ya hemos visto en las secciones anteriores, cada parte tiene una función diferente. Por eso, en lugar de modificar el código al azar, conviene revisar directamente el elemento relacionado con el problema.
No aparecen las etiquetas
Si el bloque aparece pero no muestra ninguna etiqueta, comprueba primero que tus entradas tengan etiquetas asignadas.
El código utiliza:
<b:loop values='data:labels' var='label'>
Este b:loop necesita recibir las etiquetas que Blogger proporciona mediante data:labels. Si no existen etiquetas disponibles para mostrar, el bucle no tendrá elementos que generar.
Comprueba también que el gadget esté configurado para mostrar las etiquetas que necesitas mediante las opciones de <b:widget-settings>.
- Que las entradas tengan etiquetas asignadas.
- Que el gadget esté mostrando todas las etiquetas o las etiquetas seleccionadas correctamente.
- Que no hayas eliminado o modificado
data:labels. - Que el
b:loopsiga presente dentro del bloquelist.
Las etiquetas aparecen, pero no tienen el diseño esperado
Si las etiquetas aparecen correctamente pero el aspecto visual no coincide con la adaptación, el problema probablemente está en el CSS.
El primer selector que debes revisar es:
.ob-label-list
Esta es la clase que añadimos al elemento ul del gadget:
<ul class='list-unstyled mb-0 ob-label-list'>También debes comprobar las reglas que afectan directamente a los elementos de la lista y a sus enlaces:
.ob-label-list li
.ob-label-list a
.label-name
.label-count
Una regla de la plantilla puede estar sobrescribiendo alguno de estos estilos. Esto es especialmente frecuente cuando la plantilla ya contiene reglas generales para elementos como ul, li o a.
Comprueba primero .ob-label-list y después las reglas que afectan a los enlaces y contadores. Si utilizas las herramientas de desarrollador del navegador, puedes seleccionar una etiqueta y comprobar qué regla CSS está aplicándose y cuál está siendo sobrescrita.
Las etiquetas aparecen en una sola columna
La distribución en columnas depende principalmente de .ob-label-list.
Revisa que el fixer conserve la propiedad:
.ob-label-list {
columns: 2;
}
El valor 2 indica que la lista debe distribuirse en dos columnas.
También debes revisar la regla @media, porque en pantallas pequeñas el propio fixer cambia deliberadamente la distribución a una sola columna:
@media (max-width: 575.98px) {
.ob-label-list {
columns: 1;
}
}Por tanto, si estás viendo una sola columna en un teléfono o en una ventana muy estrecha, puede tratarse del comportamiento responsive esperado y no de un error.
.ob-label-list { columns: 2; }- La regla
@media. - Que otra regla de la plantilla no esté sobrescribiendo
columns.
No aparece el número de entradas
El contador depende de la configuración del gadget y de la condición que incorporamos en el código adaptado.
Primero comprueba que esté habilitada la opción Mostrar número de entradas por etiqueta en la configuración del gadget.
Después revisa que el código conserve:
<b:if cond='data:this.showFreqNumbers'>
<span class='label-count'>
<data:label.count/>
</span>
</b:if>
La condición data:this.showFreqNumbers comprueba si el contador está habilitado y data:label.count proporciona el número de entradas asociado a la etiqueta.
- La opción Mostrar número de entradas por etiqueta.
data:this.showFreqNumbers.data:label.count.- La clase
label-county sus estilos CSS.
El bloque aparece como nube
Si las etiquetas aparecen utilizando el formato de nube en lugar de la lista utilizada en esta adaptación, revisa la configuración del gadget.
La opción se controla mediante:
<b:widget-setting name='display'>LIST</b:widget-setting>
Esta adaptación está diseñada para trabajar con Lista, por lo que debes utilizar el valor LIST.
No es necesario modificar el b:loop para solucionar este problema. La presentación de lista o nube forma parte de la configuración del gadget.
Comprueba display dentro de <b:widget-settings> y utiliza la opción Lista desde la configuración de Blogger.
Las etiquetas aparecen desordenadas
Si las etiquetas aparecen en un orden diferente al esperado, revisa la configuración sorting:
<b:widget-setting name='sorting'>ALPHA</b:widget-setting>
Esta configuración pertenece al gadget de Blogger y no al CSS. Por eso no debes intentar solucionar el orden modificando .ob-label-list o el b:loop.
Si necesitas ordenar las etiquetas alfabéticamente o por frecuencia, utiliza la configuración correspondiente del gadget.
Las etiquetas aparecen en columnas, pero la separación no es correcta
Si las dos columnas aparecen demasiado juntas o demasiado separadas, revisa la propiedad column-gap del fixer:
.ob-label-list {
column-gap: 30px;
}Aumenta el valor si necesitas más espacio entre las columnas o redúcelo si quieres acercarlas.
Si el problema es la separación entre las propias etiquetas, revisa las reglas aplicadas a:
.ob-label-list liNo confundas la separación entre columnas con la separación entre elementos de la lista. Son ajustes diferentes.
El diseño cambia en dispositivos móviles
La adaptación está preparada para cambiar de dos columnas a una cuando el espacio disponible es reducido.
Esta función depende de:
@media (max-width: 575.98px) {
.ob-label-list {
columns: 1;
}
}
Si quieres modificar el momento en que se produce ese cambio, revisa el valor de max-width.
Si el diseño móvil presenta otros problemas, comprueba también si la plantilla contiene reglas responsive que estén afectando a .ob-label-list, li o los enlaces.
El contador aparece, pero tiene un aspecto incorrecto
Si el número de entradas aparece pero su apariencia no coincide con el diseño, la funcionalidad del gadget probablemente está funcionando correctamente. En este caso debes revisar el CSS asociado al contador:
.label-countLa estructura que genera el contador es:
<span class='label-count'>
<data:label.count/>
</span>
Por tanto, si el número aparece pero necesitas cambiar su tamaño, color, separación o apariencia, el ajuste debe realizarse mediante CSS y no modificando data:label.count.
Una regla de la plantilla está sobrescribiendo el fixer
Si el código parece correcto pero algún estilo no se aplica, puede existir otra regla CSS con mayor prioridad que está sobrescribiendo el fixer.
En este caso, utiliza las herramientas de desarrollador del navegador para seleccionar la etiqueta afectada y comprobar qué regla está controlando la propiedad.
Los selectores principales que debes comprobar son:
.ob-label-list
.ob-label-list li
.ob-label-list a
.label-name
.label-countEsto permite localizar el conflicto sin tener que modificar todo el CSS de la plantilla.
No modifiques varias partes del código al mismo tiempo. Primero determina si el problema está en Blogger, en la estructura del gadget o en el CSS. Después modifica únicamente la parte relacionada con ese problema.
Por ejemplo, si las etiquetas no aparecen, revisa data:labels y b:loop. Si aparecen pero están en una sola columna, revisa columns y @media. Si aparecen pero tienen un aspecto incorrecto, revisa .ob-label-list, .label-name y .label-count.
14. Preguntas frecuentes
¿Esta adaptación reemplaza el gadget de Etiquetas de Blogger?
No. La adaptación modifica la presentación visual del gadget, pero conserva su funcionamiento y las opciones que Blogger ofrece para configurarlo.
¿Las etiquetas se actualizan automáticamente?
Sí. Blogger genera las etiquetas y sus enlaces a partir de las etiquetas asignadas a las entradas del blog. No es necesario actualizar manualmente el HTML cada vez que agregas o eliminas una etiqueta.
¿Tengo que escribir las etiquetas manualmente en el HTML?
No. El <b:loop> recorre las etiquetas que Blogger proporciona al gadget
y genera cada elemento automáticamente.
¿Puedo ordenar las etiquetas por frecuencia?
Sí. Al utilizar el gadget adaptado, puedes cambiar el orden desde su configuración de Blogger entre orden alfabético y frecuencia.
¿Puedo mostrar el número de entradas?
Sí. Puedes activar la opción Mostrar número de entradas por etiqueta. Cuando está habilitada, el número de publicaciones asociadas aparece junto a cada etiqueta.
¿Puedo utilizar la opción Nube?
El gadget de Blogger permite utilizar la opción Nube, pero esta adaptación está diseñada para trabajar con Lista. La vista de nube utiliza una estructura diferente y, por eso, no mantiene el diseño utilizado en esta adaptación.
¿Cuál de los dos métodos debería utilizar?
Para esta adaptación recomiendo el gadget adaptado, especialmente si quieres conservar las opciones de configuración que Blogger ofrece desde el panel del gadget.
La adaptación rápida puede ser útil cuando solamente necesitas mostrar las etiquetas dentro de un bloque concreto de la plantilla y no necesitas todas esas opciones.
15. Conclusión para esta adaptación
Adaptar una plantilla para Blogger no significa reemplazar las funciones de Blogger por HTML estático. En este caso, la estructura visual de la plantilla se conserva mientras Blogger continúa encargándose de las etiquetas, sus enlaces y su configuración.
El resultado es un bloque que mantiene la apariencia original de la plantilla, pero que trabaja de forma dinámica con el contenido real del blog. Así, cuando cambias las etiquetas o las opciones del gadget, el bloque puede actualizarse sin tener que modificar nuevamente el HTML de la plantilla.
Esta es precisamente la idea detrás de este tipo de adaptaciones: conservar la funcionalidad de Blogger y adaptar únicamente la presentación para que encaje con el diseño de la plantilla.
¿Quieres seguir aprendiendo a adaptar plantillas a Blogger?
Si quieres aprender desde cero cómo analizar una plantilla HTML, conservar su diseño e integrar las funciones de Blogger paso a paso, puedes continuar con el Training Blogger desde Cero. Allí encontrarás las clases y recursos que te ayudarán a avanzar con este tipo de adaptaciones de forma práctica.
Aún no hay comentarios, sé el primero en comentar.
Publicar un comentario