Tutorial blogger: Mostrar etiquetas específicas en las entradas
20 jun 2019
•
tutorial blogger
¡Hola! Seguimos con los tutoriales para blogger. Esta vez es algo bien sencillo pero bastante práctico (necesario también, creo), para que nuestro blog esté más organizado y se vea mejor estéticamente hablando.
Como bien dice el título, se trata de mostrar ciertas etiquetas en el título de las entradas, de forma que se puedan usar como categorías. Normalmente en las entradas ponemos muchas etiquetas, entonces lo que haremos es elegir cuáles mostrar y cuáles no, manipulando el código original que en una plantilla a la que no se le haya hecho muchas modificaciones, se vería más o menos así:
Primero, como siempre, haremos copia de seguridad: PLANTILLA → Crear/Restablecer copia de seguridad → Descargar plantilla completa. Después de esto, seleccionamos donde dice EDITAR HTML y donde dice IR AL WIDGET, seleccionamos Blog1. Un poco más abajo veremos la etiqueta <b:includable id='post' var='post'> y contenida dentro de este includable, un poco más abajo veremos la línea <b:if cond='data:post.labels'> que es la primera de todo el código correspondiente a las etiquetas:
Primero, como siempre, haremos copia de seguridad: PLANTILLA → Crear/Restablecer copia de seguridad → Descargar plantilla completa. Después de esto, seleccionamos donde dice EDITAR HTML y donde dice IR AL WIDGET, seleccionamos Blog1. Un poco más abajo veremos la etiqueta <b:includable id='post' var='post'> y contenida dentro de este includable, un poco más abajo veremos la línea <b:if cond='data:post.labels'> que es la primera de todo el código correspondiente a las etiquetas:
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<div id='post-labels'>
<span id='post-labels-span'>
<a expr:href='data:label.url' rel='tag'>
<data:label.name/>
</a>
</span>
</div>
</b:loop>
</b:if>
<b:loop values='data:post.labels' var='label'>
<div id='post-labels'>
<span id='post-labels-span'>
<a expr:href='data:label.url' rel='tag'>
<data:label.name/>
</a>
</span>
</div>
</b:loop>
</b:if>
Pues bien, vamos a cambiar este código por el siguiente, donde elegiremos qué etiquetas mostrar:
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.name in ["Etiqueta1","Etiqueta2","Etiqueta3"]'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>
<b:if cond='data:label.isLast != "true"'>, </b:if>
</b:if>
</b:loop>
</b:if>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.name in ["Etiqueta1","Etiqueta2","Etiqueta3"]'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>
<b:if cond='data:label.isLast != "true"'>, </b:if>
</b:if>
</b:loop>
</b:if>
En lugar de Etiqueta1, Etiqueta2 y Etiqueta3 vamos a poner las de nuestra elección. No hay un límite, así que podemos poner la cantidad que queramos, teniendo en cuenta que cada nombre debe estar entre comillas (").
Reemplazando el anterior código con este, y poniéndolo justo encima de la línea <h3 class='post-title entry-title' itemprop='name'> (o <div id='post-title' itemprop='name'> si aplicaste el tutorial para mostrar las entradas en forma de resumen) en la parte de la plantilla en la que nos ubicamos, tendremos sobre el título sólo una etiqueta representativa para la entrada. Si la queremos poner debajo del título, vamos más abajo y lo ponemos debajo de la etiqueta de cierre para el título </h3> (o antes de <h2 id='date'> dado el caso).
Para darle estilos con CSS buscamos ]]></b:skin> en la plantilla y arriba de este código ponemos el código siguiente:
Es muy sencillo, así que espero que se animen a ponerlo si no lo han hecho; cualquier duda, en los comentarios ;)
-Jisela
Reemplazando el anterior código con este, y poniéndolo justo encima de la línea <h3 class='post-title entry-title' itemprop='name'> (o <div id='post-title' itemprop='name'> si aplicaste el tutorial para mostrar las entradas en forma de resumen) en la parte de la plantilla en la que nos ubicamos, tendremos sobre el título sólo una etiqueta representativa para la entrada. Si la queremos poner debajo del título, vamos más abajo y lo ponemos debajo de la etiqueta de cierre para el título </h3> (o antes de <h2 id='date'> dado el caso).
Para darle estilos con CSS buscamos ]]></b:skin> en la plantilla y arriba de este código ponemos el código siguiente:
div#post-labels {
width: fit-content;
margin-left: auto;
display: flex;
margin-right: auto;
}
span#post-labels-span, span#post-labels-span a {
font: normal 12px arial, sans serif; /*tamaño y estilo de la tipografía*/
background: #333; /*coor del fondo*/
padding: 13px 20px; /*para el tamaño de la caja*/
letter-spacing: 3px; /*espacio entre letras*/
color: #fff; /*color de la letra*/
display: inline;
text-transform: uppercase; /*texto en mayúsculas*/
margin: 0px 0px 15px; /*márgenes arriba, derecha y abajo respectivamente*/
}
span#post-labels-span a:hover{
background: #fff; /*color del fondo al pasar el cursor*/
color: #333; /*color del texto al pasar el cursor*/
display: inline;
}
width: fit-content;
margin-left: auto;
display: flex;
margin-right: auto;
}
span#post-labels-span, span#post-labels-span a {
font: normal 12px arial, sans serif; /*tamaño y estilo de la tipografía*/
background: #333; /*coor del fondo*/
padding: 13px 20px; /*para el tamaño de la caja*/
letter-spacing: 3px; /*espacio entre letras*/
color: #fff; /*color de la letra*/
display: inline;
text-transform: uppercase; /*texto en mayúsculas*/
margin: 0px 0px 15px; /*márgenes arriba, derecha y abajo respectivamente*/
}
span#post-labels-span a:hover{
background: #fff; /*color del fondo al pasar el cursor*/
color: #333; /*color del texto al pasar el cursor*/
display: inline;
}
Es muy sencillo, así que espero que se animen a ponerlo si no lo han hecho; cualquier duda, en los comentarios ;)
-Jisela
¡Hooooola!
ResponderEliminarAy, la verdad es que no suelo usar etiquetas. ¿Debería? ¿Qué aportan? No sé, es algo de lo que no estoy informada en absoluto, por lo que no las uso. Supongo que debería buscar más, ¿no? Jaajajaj :P
¡MUCHAS GRACIAS POR LA ENTRADA! SIEMPRE ADORO TUS PRECIOSAS ENTRADAS <3
¡Un beso! Nos leemos :)
Pues la verdad, no sé. Me estaba preguntando sobre cómo ponerlo en el blog y ví ese tutorial y me gustó, así que lo compartí. A alguien, como a mí, habrá de servirle xD
EliminarBesos!