Destacar etiquetas entradas Blogger Destacar etiquetas entradas Blogger

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. Tambien dejare una alternativa global si no usas mis plantillas.


Instalar includable

Ve a Temas, presiona el botón "Personalizar", opciones avanzadas y da clic en "Agregar CSS", en este campo pega lo siguiente:


/*!
* Custom name: firstag v2.0.2
* by zkreations
*/
.firstag{position:relative;font-size:14px}.firstag__content{position:absolute;top:.5em;right:.5em;z-index:20;display:inline-block}.firstag__name{text-transform:capitalize;float:left;text-decoration:none;cursor:pointer;-webkit-transition:background .3s;transition:background .3s}
/*
=> Personalizacion
*/
.firstag__name {
    padding: 4px 8px;
    background-color: #00BCD4;
    color: #fff;
    border-radius: 2px;
    margin: 2px;
    font-size: 1rem;
}
.firstag__name:hover {
    color: #fff;
    background-color: #212121;
}
/*
=> Colores propios
*/
.firstag__name--TAG {
   background-color: COLOR;
}

Ahora vamos a instalar un includable que permitirá agregar fácilmente las etiquetas destacadas a las entradas de la página principal, para ello busca:


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

Arriba de eso pega el siguiente código:


<b:includable id='post-firstag'>
   <b:class name='firstag'/>
   <div class='firstag__content'>
      <b:loop values='data:post.labels first (tag => tag.name in data:tags)' var='i'>
         <a expr:href='data:i.url' expr:class='"firstag__name firstag__name--" + data:i.name'><data:i.name/></a>
      </b:loop>
   </div>
</b:includable>

Guarda los cambios y listo, ya tenemos instalado tanto el css como el código encapsulado en un includable de Blogger, ya solo resta un paso y esto dependerá de la plantilla que tengas.


Instalar en Anime.xml

Ve a Temas > Editar HTML y busca el siguiente código:


<b:includable id='post-card-cover'>

Debajo de eso pega el siguiente código:


<b:with value='{"Fotos", "Art", "Viaje"}' var='tags'>
   <b:include cond='!data:this.isSearch' name='post-firstag'/>
</b:with>

Y reemplaza "Fotos", "Art", "Viaje" por las etiquetas que quieras destacar, separadas por comas. Si lo hiciste correctamente verás algo como esto:


anime etiqueta destacada

Cualquier plantilla

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:with value='{"Fotos", "Art", "Viaje"}' var='tags'>
   <b:include name='post-firstag'/>
</b:with>

Mostrar varias etiquetas

Por defecto solo se muestra una etiqueta a la vez de todas las especificadas. Si quieres mostrar varias etiquetas que coincidan con las que hayas especificado, cambia first por where de la siguiente manera:


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

Colores personalizados

El codigo tambien agrega 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:


.firstag__name--TAG {
   background-color: COLOR;
}

En donde reemplazas TAG 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. Si no agregas colores personalizados se usará el color por defecto para todas las etiquetas.


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 o sacando mas plantillas agregaré la forma de destacar la etiqueta ese diseño 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.