Convertir etiquetas en botones blogger
Con CSS y algo de imaginación, se pueden generar bastantes efectos quasi-profesionales. En este caso vamos a convertir la lista simple de categorías que nos proporciona Blogger, en unos botones que nos llevan a los posts de cada etiqueta.
En primer lugar, accedemos por Elementos de Página y añadimos un Nuevo Elemento, tipo Etiquetas. No importa si ya tenemos otro. Podemos probar como queda este, manipularlo y luego borrar este o el anterior que tuviéramos. Lo mejor es ponerle un título que no tengamos, para localizar mejor el código HTML que se generará en nuestra plantilla y que tendremos que modificar después. Pongamos que le llamamos "pruebabotones".
Ahora nos vamos a Diseño, Edición de HTML y expandimos Plantillas de Artilugios. En cualquier lugar, antes de ]]>, insertamos la siguiente clase, que será la que le de aspecto de botonera a las etiquetas.
/* Botones
----------------------------------------------- */
/* Aspecto normal */
#botlista a, #botlista a:visited {
position:relative;
text-decoration:none;
text-align:center;
background-color:#990000; /* Color fondo botón */
color:#cccccc; /* Color letra */
display:block;
width:10em; /* Ancho del botón */
border:2px solid #999999; /* Tamaño del borde */
border-color:#444444 #333333 #333333 #444444; /* Color bordes */
padding:0.25em;
margin:0.5em auto;
}
/* Aspecto al pasar el puntero por encima */
#botlista a:hover {
top:0px; /* Valor distinto de 0, simula movimiento vertical */
left:0px; /* Valor distinto de 0, simula movimiento horizontal */
color:#ffffff; /* Color texto */
border-color:#333333 #444444 #444444 #333333; /* Invierte colores borde para simular pulsación */
}
Ahora seguimos plantilla abajo, buscando el título que le pusimos a las etiquetas (pruebabotones) y nos encontraremos con un código como éste:
Hay que eliminar todas las líneas en gris, marcadas con comentarios BORRAR y añadir las instrucciones en verde: id='botlist' y (
Si quereis que no aparezca entre parentesis el número de post de cada categoría, teneis que borrar el segundo de los indicados en el anterior párrafo (data:label.count).
Una vez comprobeis que funciona, ya podeis cambiar colores, bordes, fondos, posiciones. Sustituir background-color:#990000; por background:url (URL_imagenfondo); da unos resultados espectaculares.
