Personalizar las etiquetas de un blog presenta múltiples ventajas. Un color de fondo o un marco de un estilo determinado hará que los lectores se interesen más por las publicaciones del sitio.
A continuación presento tres modelos básicos que os ayudarán a destacar vuestras etiquetas.
Tanto los colores como el grosor y estilo de los marcos puede modificarse.
Diseño>Edición de HTML>expandimos artilugios
Localizamos 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'>
<span class='blEtijjTeg'><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>
Le añadimos las líneas que resalto en color rojo para otorgar una clase única y poder así utilizar el CSS necesario.
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"/>
Insertaremos la dirección de la flechita en donde dice URL IMAGEN.
Seguidamente, buscamos la etiqueta ]]></b:skin> y justo encima incluimos los dos bloques de CSS pertenecientes al estilo deseado.
Primer estilo
.blEtijjTeg a:link, .blEtijjTeg a:visited {
background: #A2C9D3; /* Color de fondo */
border: 1px solid #FFFFFF; /* Grosor, estilo y color del marco, respectivamente */
color: #296476; /* Color del texto */
padding: 4px 8px; /* Distancia entre el texto y el marco */
}
.blEtijjTeg a:hover {
background: #BCE0EA; /* Color de fondo al pasar el cursor por encima */
color: #333333; /* Color del texto al pasar el cursor por encima */
text-decoration: none;
}
Segundo estilo
.blEtijjTeg a:link, .blEtijjTeg a:visited {
border: 1px solid #A2C9D3; /* Grosor, estilo y color del marco, respectivamente */
color: #296476; /* Color del texto */
padding: 4px 8px; /* Distancia entre el texto y el marco */
}
.blEtijjTeg a:hover {
background: #BCE0EA;
color: #333333; /* Color del texto al pasar el cursor por encima */
text-decoration: none;
}
Tercer estilo
.blEtijjTeg a:link, .blEtijjTeg a:visited {
border-bottom: 3px solid #A2C9D3; /* Grosor, estilo y color del marco, respectivamente */
color: #296476; /* Color del texto */
padding: 2px 7px; /* Distancia entre el texto y el marco */
}
.blEtijjTeg a:hover {
border-color: #333333; /* Color del borde inferior al pasar el cursor */
color: #333333; /* Color del texto al pasar el cursor por encima */
text-decoration: none;
}
En los bloques he descrito la función de cada atributo para que puedan utilizar los colores o estilos que mejor conjunten con la plantilla.
Recuerden que para obtener el código de cualquier color o tonalidad debe usarse la tabla de colores.
Para personalizar los marcos conviene revisar esta entrada.
Guardaremos la plantilla una vez se haya terminado la edición.
