Etiquetas convertidas en Botones «HACER BLOG»

  • mayo 11, 2010



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??oEdici??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 */
}

Todo lo que est?? entre /* y */ explica qu?? cosas podeis modificar para dejar los botones con el mismo estilo que vuestro blog y si os estorba, podeis borrarlo despu??s de instalarlo en vuestra plantilla.

Ahora seguimos plantilla abajo, buscando el t??tulo que le pusimos a las etiquetas (pruebabotones) y nos encontraremos con un c??digo como ??ste:






id='botlista'>






()







Hay que eliminar todas las l??neas en gris, marcadas con comentarios BORRAR y a??adir las instrucciones en verde: id='botlist' y (). Con eso, teneis funcionando vuestras etiquetas.

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.

No Comments Found