Convertir etiquetas en botones

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 ]]></b:skin>, 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:

<b:widget id='Label4' locked='false' title='pruebabotones' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content' id='botlista'>
<!-- <ul> BORRAR -->
<b:loop values='data:labels' var='label'>
<!-- <li> BORRAR -->
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'><data:label.name/></span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/> (<data:label.count/>)</a>
</b:if>
<!-- <span dir='ltr'>(<data:label.count/>)</span> BORRAR -->
<!-- </li> BORRAR -->
</b:loop>
<!-- </ul> BORRAR -->

<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

Hay que eliminar todas las líneas en gris, marcadas con comentarios BORRAR y añadir las instrucciones en verde: id='botlist' y (<data:label.count/>). 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.

¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.

Compartir

Twitter

Pinterest

Facebook

Linkedin

Copy URL

Compartir

Twitter

Pinterest

Facebook

Linkedin

Y muchos más artículos interesantes si nos sigues en...

• Google
• Facebook
• Twitter