Muestra tus categorías en diferentes estilos

Existen multitud de códigos, widgets, scripts... etc que permiten mostrar las categorías de tu Blog con distintas apariencias. Algunas permiten mostrarlas como un menú, otras permiten colgar una nube de etiquetas en el blog en las que cada una de las categorías tiene un tamaño de letra diferente en función de los posts que se alojan en ellas. Además, tampoco está nada mal el sistema que nos trae Blogger por defecto, en el que vemos cada categoría con el número de posts relacionados. Pero mucho mejor que todo esto, es contar con todos esos estilos a la vez. Eso es lo que vamos a aprender en este post y como es habitual en este blog, no va a ser demasiado complicado :P ... si no, yo tampoco la habría logrado.

Antes de empezar tenemos que asegurarnos de que no haya un sistema de categorías previamente instalado, así que iremos a la plantilla de diseño y borraremos el sistema actual de categorías. Una vez hecho esto, nos iremos a la plantilla y buscaremos la etiqueta de cierre de uno de los widgets de nuestra barra lateral </b:widget> (yo no me preocuparía de buscar un lugar idóneo de momento, ya que luego podremos moverlo facilmente desde la Plantilla de Diseño). Justo a continuación pegaremos este código:

<!-- Multi-style labels - zoom, menu and list styles -->
<b:widget id='Label1' locked='false' title='Labels' type='Label'>
<b:includable id='main'>
<h2>Multi-style Labels</h2><br/>
<a href='javascript:void' title='Switch to List' onclick='javascript:linkStyle();'>
<img src='http://www.anniyalogam.com/widgets/list.jpg'/></a>
<a href='javascript:void' title='Switch to Menu' onclick='javascript:menuStyle();'>
<img src='http://www.anniyalogam.com/widgets/menu.jpg'/></a>
<a href='javascript:void' title='Switch to Zoom' onclick='javascript:zoomStyle();'>
<img src='http://www.anniyalogam.com/widgets/zoom.jpg'/></a>
<b><a href='http://hackosphere.blogspot.com/2006/09/multi-style-labels-widget-for-blogger.html'>?</a></b><br/><br/>

<div class='widget-content'>
<div id='LabelDisplay'>
</div>
</div>

<script language='javascript' type='text/javascript'>
function zoomStyle() {
var max = 0;
var min = 10000;
<b:loop values='data:labels' var='label'>
if (<data:label.count/> > max)
max = <data:label.count/>;
if (<data:label.count/> < min)
min = <data:label.count/>;
</b:loop>
var display = "";
<b:loop values='data:labels' var='label'>
var delta = <data:label.count/> - min;
var size = 100 + (delta * 100) / (max - min);
display = display + "<span style='font-size:" + size + "%'><a expr:href='data:label.url + "?max-results=100"' style='text-decoration:none;'><data:label.name/></a></span><br/><br/>";
</b:loop>

obj = document.getElementById('LabelDisplay');
obj.innerHTML = display;
}

function menuStyle() {
var display = "<select onchange='location = this.options[this.selectedIndex].value;'><option>Select a label</option>";
<b:loop values='data:labels' var='label'>
display = display + "<option expr:value='data:label.url + "?max-results=100"'><data:label.name/> (<data:label.count/>)</option>";
</b:loop>
display = display + "</select>";

obj = document.getElementById('LabelDisplay');
obj.innerHTML = display;
}

function linkStyle() {
var display = "<ul>";
<b:loop values='data:labels' var='label'>
display = display + "<li><a expr:href='data:label.url + "?max-results=100"'><data:label.name/></a> (<data:label.count/>)</li>";
</b:loop>
display = display + "</ul>";

obj = document.getElementById('LabelDisplay');
obj.innerHTML = display;
}

// set default to zoom style
zoomStyle();
</script>

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

Guardamos la plantilla y nos vamos a la plantilla de diseño para ubicarlo en el lugar que más nos guste.

Así de sencillo resulta ;) Ya tenemos instalado el nuevo sistema de categorías y ya sólo nos quedará personalizarlo un poco. Veréis que desde la plantilla de diseño no nos deja cambiar el título del Widget y por defecto, está en inglés. Para cambiar esto y un par de cosas más tendremos que hacerlo directamente sobre el código que hemos pegado.

Para cambiar de Multi-Style Labels a lo que queramos.. por ejemplo: Categorías, tenéis que buscar esta línea, justo al comienzo del widget:

<h2>Multi-style Labels</h2><br/>

También podemos aprovechar para cambiar los textos de los botones para cambiar de estilo así que busca en el código las siguientes frases y las cambias por las que quieras:
"switch to menu", "switch to list", "switch to zoom" y "select a label"

Como tantas otras cosas... se lo debemos todo a Hackosphere