Etiquetas en forma de botones

Hace un tiempo, en el post "Pestañas para blogger beta" expliqué cómo hacer para que las etiquetas de nuestro blog aparecieran en forma de pestañas. Pues bien, esta vez, y a petición de Bexza lo que haremos será convertir nuestras etiquetas en botones, como las que tengo en mi barra lateral. El procedimiento es el mismo pero cambiando algunas cosas, así que repetiré los pasos que son iguales e introduciré los cambios (en color verde) que teneis que hacer para que os aparezcan en forma de botones.

1. Etiquetamos todos los posts en categorías.

2. Nos dirigimos a Plantilla /Elementos de la página. Añadimos el elemento de página "Etiquetas", y lo colocamos donde queramos; o bien debajo del título como yo he hecho o bien en la barra lateral.

3. A continuación entramos en Plantilla /Edición de HTML y marcamos la opción "Expandir plantillas de artilugios".

4. Buscamos esta línea de código:

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

Y la sustituimos por esta:

<b:section class='header' id='header' maxwidgets='2' showaddelement='yes'>

5. Luego buscamos:]]></b:skin> y justo antes añadiremos uno de los códigos que podemos encontrar en csspicstock.blogspot.com. Hay 14 diseños donde elegir. Yo elegí el 14, con lo cual añadí el siguiente código:

/*- Menu 14--------------------------- */


#menu14 {
width: 200px;
margin: 10px;
}

#menu14 li a {
height: 32px;
voice-family: "\"}\"";
voice-family: inherit;
height: 24px;
text-decoration: none;
}

#menu14 li a:link, #menu14 li a:visited {
color: #333;
display: block;
background: url(http://photos1.blogger.com/
blogger2/3729/970792021505273/1600/menu14.gif);
padding: 8px 0 0 10px;
}

#menu14 li a:hover {
color: #FFF;
background: url(http://photos1.blogger.com/
blogger2/3729/970792021505273/1600/menu14.gif) 0 -32px;
padding: 8px 0 0 10px;
}

6. Por último nos situaremos en esta parte de código:

<b:widget id='Label1' locked='false' title='Etiquetas' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title><h2>
<b:if>
<div class='widget-content'>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<data:label.name/>
<b:else/>
<a expr:href='data:label.url'><data:label.name/></a>
</b:if>
(<data:label.count/>)
</li>
</b:loop>
</ul>

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

Y la reemplazaremos por esta otra, teniendo en cuenta que cambiaremos tabsF por (en mi caso) menu14.

<b:widget id='Label1' locked='false' title='' type='Label'>
<b:includable id='main'>
<div id='tabsF'>
<ul>
<li><a expr:href='data:blog.homepageUrl'><span>Inicio</span></a></li>

<b:loop values='data:labels' var='label'>
<li><a expr:href='data:label.url'><span><data:label.name/></span></a></li>

</b:loop>
</ul>
<!-- <b:include name='quickedit'/> -->
</div>
</b:includable>
</b:widget>

Espero que os haya servido de ayuda. Si teneis alguna duda o algo no os funciona sólo teneis que decirlo.
Saludos!