Personalizar los enlaces del widget de las etiquetas usando caracteres Unicode
Anteriormente les decía como personalizar los enlaces de las etiquetas usando viñetas, con distintos colores, tamaños y creando efecto hover, hoy les voy a compartir la forma de personalizar estos enlaces, usando caracteres Unicode.
Hace tiempo, Gema publicaba una entrada muy inspiradora por cierto, donde hablaba de la forma de usar estos simbolitos con color, esto resulta muy útil para poder personalizar ciertas partes de nuestro blog, sin necesidad de usar ninguna imagen, y lo podemos aplicar de manera inmediata, de hecho, Blogger utiliza caracteres Unicode en las plantilla, como en el caso del widget del archivo.
Como los caracteres Unicode funcionan igual que las letras o fuentes, es posible usar las mismas propiedades que a estas, de hecho, si las usan desde el panel de entradas de Blogger, les pueden dar color y tamaño de la misma forma que hacen con las fuentes.
Me preguntaba como usarlos en los enlaces de las etiquetas y pensé que era posible, ya que Blogger tiene una etiqueta en su código HTML, que genera el enlace de las etiquetas
y podemos agregarlo directamente ahí. Ahora, veamos como hacerlo:
Paso 1. Necesitamos estar seguros de que desaparezca la viñeta de los enlaces de las etiquetas, por lo tanto hay que agregar este código CSS, ya sea antes de ]]></b:skin> , o bien yendo a Diseño ► Diseñador de plantillas ► Avanzado► Añadir CSS, y agregarlo en el campo correspondiente, asegurándose de dar enter después de una llave de cierre, "}", por ejemplo, para que este sea interpretado; he agregado algunos estilos que pueden resultar útiles para personalizar los enlaces como colores de fuentes, grosor etc..
#Label1 ul li{
list-style-type: none; /*para eliminar la viñeta*/
}
#Label1 li a {
color: #000; /*el color de la fuente o letra*/
font-size: 14px; /*El tamaño de la letra*/font-weight: normal /*el grosor*/
text-decoration: none; /*para que no se subraye el texto*/
}
#Label li a:hover { /*efecto alponer el puntero del ratón sobre el enlace*/
margin: 0; /* si quieres que se mueva un poco a la derecha pon margin-left: 4px u otro valor */
color: #00a3df; /*aquí cambiamos el color si queremos*/
font-weight: normal; /*para engrosar la letra, pon bold*/}
Paso 2. Luego, tenemos que agregar el caracter Unicode que nos guste, para ello, necesitamos ir al Diseño de nuestra plantilla y expandir plantillas de artilugios, luego, con la ayuda de Ctrl F buscamos la siguiente linea de código:
<data:label.name/>
…y que está contenida en la etiqueta a, tengan cuidado, ya que hay dos lineas juntas iguales, pero la que nos interesa luce así:
Paso 3. Ya que ubicamos esa linea, colocamos antes, el siguiente código:
<span style='color: #f4006c; font-size:15px; padding-right:5px;'>♥</span>
En donde antes de pegarlo, tenemos que personalizar lo siguiente:
color: #f4006c; es el color del caracter.
Font-size: 15px; es el tamaño del caracter, 15 pixeles en buen tamaño, te lo recomiendo entre 14-16 pixeles.
♥ es el caracter unicode que es este caso es un corazón, claro que tendrás que elegir el tuyo y aquí tengo una tabla con mis favoritos, aunque hay más, JMiur publicó una tabla muy completa, que puedes ver.
| ♥ | ♥ | ♦ | ♦ | ♫ | ♫ | ✔ | ✔ |
| ✜ | ✜ | ✠ | ✠ | ✣ | ✣ | ✤ | ✤ |
| ✦ | ✦ | ✪ | ✪ | ✫ | ✫ | ✲ | ✲ |
| ✴ | ✴ | ✼ | ✼ | ✽ | ✽ | ✿ | ✿ |
| ❀ | ❀ | ❃ | ❃ | ❅ | ❅ | ❋ | ❋ |
| ❖ | ❖ | » | » | ★ | ★ | > | > |
Nota: puedes agregar el código en una nota de tu computadora para personalizar los colores y el caracter.
Paso 4. Checa en vista previa para asegurarte de que el caracter Unicode se ve en cada enlace, y que todo luce bien, si es así, guarda los cambios en Guardar Plantilla y listo!.
Funciona en todos los navegadores, incluyendo al único, incomparable e irrepetible IE6.
Etiquetas:CSS,Editar plantilla,trucos,Tutoriales