Convierte las etiquetas de tus blogs en botones

Convierte las etiquetas de tus blogs en botones con CSS y con determinacion e imaginacion podes lograr efectos impensados en tu blog,hoy te vamos a explicar como convertir las categorias simples del blog en unos lindos botones que nos llevaran a los post de cada etiqueta.

Primero vamos a elementos de pagina y ponemos añadir nuevo elemento tipo etiquetas, si ya tenemos otro no importa esto lo usaremos como una prueba a ver como nos queda y si nos gusta,ahora bien pongamos un titulo nuevo a la etiqueta para localizar bien el codigo HTML del proyecto dado luego seguramente modifiques una y otra vez.Ahora vamos directo a Diseño, Edición de HTML y expandimos Plantillas de Artilugios. En cualquier lugar, antes de ]]>,e insertamos la siguiente clase, que será la que le dara el aspecto visual de botonera a las etiquetas del blog.

EJEMPLO:

/* Botones */

/* Aspecto normal */
<br /> #botlista a, #botlista a:visited {<br /> position:relative;<br /> text-decoration:none;<br /> text-align:center;<br /> background-color:#990000; /* Color fondo botón */<br /> color:#cccccc; /* Color letra */<br /> display:block;<br /> width:10em; /* Ancho del botón */<br /> border:2px solid #999999; /* Tamaño del borde */<br /> border-color:#444444 #333333 #333333 #444444; /* Color bordes */<br /> padding:0.25em;<br /> margin:0.5em auto;<br /> }<br />

/* Aspecto al pasar el puntero por encima */
<br /> #botlista a:hover {<br /> top:0px; /* Valor distinto de 0, simula movimiento vertical */<br /> left:0px; /* Valor distinto de 0, simula movimiento horizontal */<br /> color:#ffffff; /* Color texto */<br /> border-color:#333333 #444444 #444444 #333333; /* Invierte colores borde para simular pulsación */<br /> }<br />

Todo lo que este entre /* y */ nos explica qué cosas podemos modificar para dejar los botones con el mismo aspecto visual que nuestro blog y si nos molesta, podemos borrarlo después de instalarlo en nuestra plantilla.

Ahora sigamos con la plantilla abajo, buscamos el título que le pusimos a las etiquetas («el que hayas puesto») y nos vamos a encontrar con un codigo como este:

Hay que borrar todas las líneas en gris, marcadas con comentarios BORRAR y añadiremos las instrucciones en verde: id=’botlist’ y (). Haciendo esto ya deberias de tener funcionando tus etiquetas como botones y si no queres te aparezca entre parentesis los numeros de post de cada categoria borras el segundo de los indicados en anterior parrafo (data:label.count).

Una vez comprobamos todo va de 10,y podemos cambiar los colores,bordes posiciones fondos y todo lo que se nos ocurra,Sustituir background-color:#990000; por background:url (URL_imagenfondo)

Espero les haya gustado y sigan visitandonos en www.ayudabloger.webempresa.eu