Destacar etiquetas de las entradas en Blogger

Destacar etiquetas entradas Blogger Destacar etiquetas entradas Blogger

Ya hace un tiempo que estoy actualizando mis plantillas a mi nueva filosofía, que se resumen en "Si no es personalizable, no sirve". Esta actualización la denomine "Creative Update" y debido a esto, uno de mis tutoriales en youtube se volvio obsoleto.


En esta entrada explicare cómo destacar una o varias etiquetas en las entradas de la página principal, según la plantilla que estés utilizando con "Creative Update". Y tambien dejare una alternativa global si no usas plantillas de zkreations.


CSS Global

Este codigo no varía, asi independientemente de la plantilla puedes agregarlo sin problemas. Para ello, ve a Temas, presiona el boton naranja "Personalizar", opciones avanzadas y da clic en "Agregar CSS personalizado", en ese campo pega lo siguiente:


/*!
* Custom name: firstag
* by zkreations
*/
.firstag {
   position: relative;
   display: block;
   font-size: 14px;
}
.firstag__content {
   position: absolute;
   top: .5em;
   right: .5em;
   z-index: 20;
   display: inline-block;
}
.firstag__name {
   padding: .25em .5em;
   background-color: #00BCD4;
   color: #fff;
   border-radius: 2px;
   text-transform: capitalize;
   float: left;
   margin: 2px;
}

Con eso ya tenemos prácticamente la mitad del trabajo hecho, ahora la otra mitad es en donde dependerá de la plantilla actualizada que estés utilizando, asi que vamos a ir por partes.


Anime.xml

La plantilla Anime tiene un diseño distinto para búsquedas, por eso el código blogger:data necesario es otro. Para destacar las etiquetas ve a Temas > edición html y busca esto:


<a expr:class='data:isSearch ? "card__image--search" : "card__image dan-search"' expr:href='data:post.url' expr:title='data:post.title'>

Si no lo encuentras, prueba buscando solo una parte del código y no completo, ya que blogger reemplaza algunos carácteres por su version html. Una vez ubicado debajo de eso pegas esto:


<b:if cond='!data:isSearch'>
<b:class name='firstag'/>
   <abbr class='firstag__content'>
   <b:loop values='data:post.labels first (tag => tag.name in {"fotos","frases","art"})' var='i'>
      <span expr:href='data:i.url' expr:class='"firstag__name firstag__name--" + data:i.name'><data:i.name/></span>
   </b:loop>
   </abbr>
</b:if>

Y procede a cambiar los valores de la tabla {"fotos","frases","art"} por el nombre de tus propias etiquetas, luego procede a guardar los cambios, si lo hiciste correctamente veras algo como esto:


anime etiqueta destacada

Leyre.xml

En Leyre el proceso es similar, pero ya que no cuenta con un diseño para búsqueda personalizado, el código es más corto. En la edicion html busca esto:


<a class='card__image' expr:href='data:post.url' expr:title='data:post.title'>

Una vez ubicado debajo de eso pegas esto:


<b:class name='firstag'/>
<abbr class='firstag__content'>
   <b:loop values='data:post.labels first (tag => tag.name in {"fotos","frases","art"})' var='i'>
      <span expr:href='data:i.url' expr:class='"firstag__name firstag__name--" + data:i.name'><data:i.name/></span>
   </b:loop>
</abbr>

Cambia los valores de la tabla {"fotos","frases","art"} por el nombre de tus propias etiquetas, guardar los cambios y al comprobar verás algo como esto:


leyre etiqueta destacada

Cualquier plantillas

En este caso es necesario saber al menos un poco de html y conocer bien la plantilla que usas, si cumples estos requisitos, agrega el siguiente código para destacar una etiqueta:


<b:class name='firstag firstag--custom'/>
<abbr class='firstag__content'>
   <b:loop values='data:post.labels first (tag => tag.name in {"fotos","frases","art"})' var='i'>
      <span expr:href='data:i.url' expr:class='"firstag__name firstag__name--" + data:i.name'><data:i.name/></span>
   </b:loop>
</abbr>

Elegir etiquetas destacadas

Una vez realizada la instalación en tu plantilla correspondiente, necesitas especificar las etiquetas que quieras destacar, para ello del código que he compartido busca esta parte:


<b:loop values='data:post.labels first (tag => tag.name in {"fotos","frases","art"})' var='i'>

Solo debes cambiar los valores de la tabla personalizada {"fotos","frases","art"} por el nombre exacto de la etiqueta que quieres destacar. También puedes agregar más valores separándolos con una coma "," ejemplo:


<b:loop values='data:post.labels first (tag => tag.name in {"recetas","desayuno","belleza","dibujos","vacaciones"})' var='i'>

Mostrar varias etiquetas

Por defecto el código recorre la tabla data:labels mediante la expresión lambda en busca del primer valor que devuelva verdadero, es por eso que solo muestra una etiqueta a la vez. Si quieres mostrar varias etiquetas, cambia el operador first por where, de la siguiente forma:


<b:loop values='data:post.labels where (tag => tag.name in {"manga"})' var='i'>

Definitivamente puedes hacer más cosas, pero para ello debes conocer la expresión que se está utilizando, así que te invito a leer mi articulo sobre los operadores lambda (avanzado).


Colores personalizados

El codigo tambien agrega clases CSS dependiendo de las etiquetas seleccionadas, esto te permitirá agregar colores personalizados a cada etiqueta individualmente. Agrega tus colores agregando este código al css personalizado en el diseñador de plantillas de blogger:


.firstag__name--{{label}} {
   background-color: {{color}};
}

En donde reemplazas {{label}} por el nombre de tu etiqueta y {{color}} por el color deseado para esa etiqueta, ejemplo:


.firstag__name--fotos {
   background-color: #8BC34A;
}

Puedes repetir el código anterior para darle color a las etiquetas que hayas especificado, aunque si no agregas colores personalizados no pasa nada, ya que de todas formas se usará un color por defecto en caso de que esto ocurra.


Conclusión

Destacar etiquetas es una manera de decirle rápidamente a tu usuarios de qué va tu articulo, ademas de que es mas estetico. A medida que vaya actualizando mis plantillas a Creative Update agregare la forma de destacar la etiqueta en dicha plantilla en este mismo articulo.


Si te ha servido no olvides compartir, eso me ayudaria mucho y también ayudarás a mas personas, cualquier duda o consulta dejala en los comentarios, respondo a todos.


Quizás te interese