Categorias de Wordpress para Blogger Destacar etiquetas entradas Blogger

Blogger cuenta con un sistema para categorizar los artículos y en esta entrada lo vamos a aprovechar, la idea es poder especificar etiquetas de entre todas las que posee una entrada para destacarlas, esto nos permite organizar mejor el contenido del blog.


Contenido


Instalar includable

Lo primero es agregar estilos a la plantilla, para ello ve a Temas Personalizar Opciones avanzadas Agregar CSS y pega el siguiente código:


/*!
 * Featured tags 2.0.0
 * Copyright 2020 zkreations
 * Developed Daniel Abel M. (fb.com/danieI.abel)
 * Licensed under MIT
 */
/*! Core (No modificar) {{*/
.ftag {position: relative;}
.ftag-content {
   position: absolute;
   z-index: 20;
   display: inline-block
}
.ftag-name {
   text-transform: capitalize;
   float: left;
   text-decoration: none;
   cursor: pointer;
   transition: background .3s
}
/*}} Fin del core */

/*! Personalización */
/* Etiqueta
-------------------------------------*/
.ftag-name {
   padding: 4px 8px; /* relleno */
   background-color: #00BCD4; /* color de fondo */
   color: #fff; /* color del texto */
   border-radius: 2px; /* borde redondeado */
   margin: 2px; /* separación */
   font-size: 14px; /* tamaño de fuente */
}
.ftag-name:hover {
   color: #fff; /* color del texto (hover) */
   background-color: #212121; /* color del fondo (hover) */
}
/* Posicion
-------------------------------------*/
.ftag-content {
   top: 8px; /* separación superior */
   right: 8px; /* separación derecha */
}
/* Colores propios
-------------------------------------*/
.ftag-etiqueta {
   background-color: color;
}

Ahora vamos a instalar un includable que vamos a llamar después para destacar etiquetas en las entradas de la página principal, para ello busca:


<b:includable id='status-message'>

Justo arriba pega el siguiente código:


<b:includable id='postFeaturedTags'>
   <b:if cond='data:post.labels any (t => t.name in data:tags)'>
      <b:class name='ftag'/>
      <div class='ftag-content'>
      <b:loop values='data:post.labels filter (t => t.name in data:tags)' var='i'>
         <a expr:class='"ftag-name ftag-" + data:i.name' expr:href='data:i.url'><data:i.name/></a>
      </b:loop>
      </div>
   </b:if>
</b:includable>

Guarda los cambios y ya tenemos todo listo.


Modo de uso

Hasta el momento si revisamos el blog no veremos ningún cambio, ya que hay que llamar al módulo que acabamos de instalar y su respectiva configuración. Si usas una de mis plantillas solo debes buscar el siguiente código:


<div class='card__content'>

Debajo de eso pega el siguiente código:


<b:with value='{"ejemplo","foo"}' var='tags'>
   <b:include name='postFeaturedTags'/>
</b:with>

Guarda los cambios. Si por el contrario no usas una plantilla desarrollada en zkreations, deberás conocer bien el diseño que estás usando o contactar al diseñador respectivo para solicitar ayuda o recomendaciones.


Seleccionar etiquetas

En el último código debes agregar el nombre exacto de tus etiquetas, entre comillas y separadas por comas, puedes agregar hasta un máximo de 40 etiquetas, por ejemplo:


<b:with value='{"Viajes","Comida","Deportes","Noticias"}' var='tags'/>

Colores personalizados

El codigo tambien agrega una clases CSS dependiendo de las etiquetas seleccionadas, esto te permitirá agregar colores personalizados a las etiquetas individualmente. Agrega tus colores usando este código css de ejemplo:


.ftag-etiqueta {
   background-color: color;
}

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


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

Si no agregas colores personalizados se usará el color por defecto para todas las etiquetas.


Conclusión

Destacar etiquetas puede ayudarte a organizar mejor el contenido de tu blog, ya que estas se van a diferenciar de todas las demás, algo parecido a las categorías de Wordpress pero en Blogger.


Si te ha servido no olvides compartir esta entrada, eso me ayuda mucho y también ayudarás a más personas que busquen lo mismo. Cualquier duda o consulta déjala en los comentarios, respondo a todos.