ZKreations
Beta
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Buenas tardes amigos, antes de comenzar, este tutorial es para usuarios avanzados y que conozcan bien la plantilla que usan, de esa forma sabrán dónde poner el código. Otro requisito fundamental es que su plantilla cuente con lo que se conoce como "entradas magazine" o similar, ya que si es un blog normal, no tendría mucho sentido.
CSS Global
Prácticamente es el que hará la mitad del trabajo, es facil de implementar, simplemente vayan a Temas > presionan el botón naranja "Personalizar", Ya en el diseñador de plantillas de blogger busca Opciones avanzadas > Agregar css personalizado y agrega el siguiente código:
Insertar CODE, HTML o PHP:
/*!* 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;
}Ahora viene la parte complicada, y es detectar en que parte de sus plantillas podrían agregar este codigo. Es por eso que uno de los requisitos es que conocieran bien la plantilla que usan. Una de las formas para saber como encontrar la parte que buscan dentro del documento xml es ir directamente a su blog, presionar F12 para abrir la consola de desarrollo, y usar el inspector de elementos para localizar la parte en donde desean destacar la etiqueta. Luego buscan esa parte dentro de su plantilla en el editor HTML. Se que suena confuso pero lo explique a detalle en esta parte de un video que subi hace tiempo, les dejare el enlace del segundo exacto donde lo muestro: [Anchor #6] Destacar una etiqueta de las entradas - YouTube
porque básicamente tienen que hacer eso. Ya una vez detectado en donde quieren destacar la etiqueta, agregan el siguiente código:
Insertar CODE, HTML o PHP:
<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>Ahora 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:
Insertar CODE, HTML o PHP:
<b:loop values='data:post.labels first (tag => tag.name in {"recetas","desayuno","belleza","dibujos","vacaciones"})' var='i'>Una vez realizado guardan los cambios y deberían tener algo como esto:
https://4.bp.blogspot.com/-r2gYhvaf...GAs/s600/captura-etiqueta-destacada-leyre.PNG
Ahora bien como se que es un poco lioso encontrar la parte exacta de sus plantillas en donde deberian agregar el código, haganme saber si tienen problemas y yo intentare ayudarlos personalmente.
Este mismo tutorial lo publique en mi web, pero explicado para mis plantillas así que si quieres échale un vistazo y ya depaso si usas una de mis plantillas lo tendrás muy facil: Destacar etiquetas de las entradas en Blogger
Multiples etiquetas
Si lograste destacar tus etiquetas con exito, 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:
Insertar CODE, HTML o PHP:
<b:loop values='data:post.labels [B]where [/B](tag => tag.name in {"manga"})' var='i'>Explicacion:El operador "first" de la expresion lambda lo que hace es comprobar el primer valor que devuelve verdadero, por eso solo muestra una a la vez, al cambiarlo por "where" lo que hace es recorrer la tabla "labels" y buscar todos los valores que coincidan con los que nosotros indiquemos, que en este caso son las etiquetas que queremos destacar.
Eso seria todo, recuerden que este tutorial es un poco complicado, pero al realizarlo con éxito lograrás destacar etiquetas usando los propios datos de blogger, sin depender de javascript, lo cual te dará un gran rendimiento.
Adjuntos
Última edición:
