Usamos cookies propias y de terceros para ofrecer info personalizada según su navegación. Si continua navegando consideramos que acepta el uso de cookiesOKMás información

Personalizar las etiquetas del post-footer

Podemos resaltar las etiquetas con un color de fondo o un recuadro para que destaquen más.
Tanto los colores como el grosor y estilo de los marcos puede modificarse con unos códigos CSS















Buscaremos un código similar a este:
span class='post-labels'>
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>
<b:if cond='data:label.isLast != "true"'> , </b:if>
<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=20"' type='text/javascript'/>
</b:if>
</b:loop>
</b:if>
<!-- quickedit pencil -->
<b:include data='post' name='postQuickEdit'/>
</span>
Le añadimos las líneas que están en color rojo para otorgar una clase única y poder así utilizar el CSS necesario.

span class='post-labels'>
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<span class='laredteayudara'><a expr:href='data:label.url' rel='tag'><data:label.name/></a></span><b:if cond='data:label.isLast != "true"'> , </b:if>
<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=20"' type='text/javascript'/>
</b:if>
</b:loop>
</b:if>
<!-- quickedit pencil -->
<b:include data='post' name='postQuickEdit'/>
</span>


La coma destacada (,) es la encargada de separar nuestras etiquetas. Puede reemplazarse por una imagen o icono utilizando este código:

<img src="URL IMAGEN"/>

Buscamos la etiqueta 
]]></b:skin> 
y justo encima incluimos los dos bloques de CSS pertenecientes al estilo deseado


.laredteayudara a:link, .laredteayudara a:visited {
background: #fff; /* Color de fondo */
color: #000; /* Color del texto */
padding: 4px 8px; /* Distancia entre el texto y el marco */
border-right: 2px dashed #000;
border-left: 2px dashed #000;
border-top:2px dashed #000;
border-bottom: 2px dashed #000;
}
.laredteayudara a:hover {
background: #000; /* Color de fondo al pasar el cursor por encima */
color: #fff; /* Color del texto al pasar el cursor por encima */
border-right: 2px dashed #fff;
border-left: 2px dashed #fff;
border-top:2px dashed #fff;
border-bottom: 2px dashed #fff;
text-decoration: none;
}

Estos están como puedes ver, en blanco y negro con el canto pespunteado al contrario, pero tú podrás modificar y ajustar a tus colores preferidos, tan solo será necesario trastear con el código.
Cuando consideres que todo esta a tu gusto, guardaremos.

0 comentarios:

Si te gusta...Compártelo
Gracias por comentar