Personalizar las etiquetas del post-footer
Unknown
Códigos,
Tutoriales
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'>Le añadimos las líneas que están en color rojo para otorgar una clase única y poder así utilizar el CSS necesario.
<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>
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