lunes, 13 de abril de 2009

Agregar Nube de Etiquetas en blogger


Probablemente te pase como a mi, que has ido añadiendo etiquetas a tus entradas y la lista se ha hecho inmensa, o simplemente deseas mostrarla de un modo más atractivo.

Una manera de solucionarlo es crear una nube de etiquetas - ( Tag Cloud ) - en la que las etiquetas se muestran con un tamaño menor o mayor dependiendo de la frecuencia con la que aparezcan -el número de post creados con dicha etiqueta-. Además en el que podéis ver en esta página se puede configurar, de modo muy sencillo para que muestre o no el número de veces en que aparece.

Puedes ver cómo añadir una nube de etiquetas a tu blog de blogger (blogspot) pulsando en el enlace leer mas - que es una traducción del enlace del final de la página.-

Lo primero que has de hacer es bajarte la plantilla y guardarla por si tienes algún problema y así poder restaurar tu plantilla original.

Código:




<b:widget id='TagCloud' locked='false' title='Tags' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content' style='text-align: justify;'>
<script type="text/javascript">
/*
Simple Blogger Tag Cloud Widget
by Raymond May Jr.
http://www.compender.com
Released to the Public Domain
*/

//Variables:
var max = 150; //max css size (in percent)
var min = 50; //min css size (...)
var showCount = 1; // show counts? 1 for yes
var minCount = 1; // what is the minimum count for a Tag to be shown? 1 for all.

//Begin code:
var range = max - min;

//Build label Array
var labels = new Array();
<b:loop values='data:labels' var='label'>
labels.push("<data:label.name/>");
</b:loop>
//URLs
var urls = new Array();
<b:loop values='data:labels' var='label'>
urls.push("<data:label.url/>");
</b:loop>

//Counts
var counts = new Array();
<b:loop values='data:labels' var='label'>
counts.push("<data:label.count/>");
</b:loop>

//Number sort funtion (high to low)
function sortNumber(a, b)
{
return b - a;
}

//Make an independant copy of counts for sorting
var sorted = counts.slice();

//Find the largest tag count
var most = sorted.sort(sortNumber)[0];
//Begin HTML output
for (x in labels)
{
if(x != "peek" && x != "forEach" && counts[x] >= minCount)
{
//Calculate textSize
var textSize = min + Math.floor((counts[x]/most) * range);
//Show counts?
if(showCount == 1)
{
var count = "(" + counts[x] + ")";
}else{
var count = "";
}
//Output
document.write("<span style='font-size:" + textSize + "%'><a href='" + urls[x] + "'>" + labels[x] + count + "</a></span> " );
}
}
</script>
</div>
</b:includable>
</b:widget>





Instalación:

Si ya tienes instalado en la página un elemento de tipo Etiqueta (Label) puedes saltar al paso 2


Paso 1:
Instala un elemento de tipo etiqueta: menú Diseño--> Elementos de la página --> Añadir un gadget en la columna que desees.

Busca el elemento Etiqueta y pulsa en "Añadir al blog"


Paso 2:
Reemplaza el código del widget Etiqueta que acabas de añadir por el código personalizado que tienes más arriba.

Para ello, primero navega por tu plantilla y pulsa expandir plantillas de artilugios


Busca el elemento widget Etiqueta (label) que acabas de añadir -debería ser algo similar al siguiente texto:

<b:widget id='Label1' locked='false' title='Tags' type='Label'>

aunque el id y el título podrían ser diferentes, por lo que mejor emplea la herramienta de búsqueda de tu navegador y buscatype='Label'.

Borra la etiqueta Label desde el inicio al final (debes borrar ambas también) que aparecerá marcado como

</b:widget>

y reemplaza todo lo seleccionado con el texto del código que hemos creado al principio.

Fuente:
http://www.compender.com/2007/12/simple-tag-cloud.html


5 comentarios:

Anónimo dijo...

Se agradecería que vuestro RSS, ya que está lleno de publicidad, tuviera los posts completos. Tendríais más suscriptores.

tecnoadmin dijo...

en realidad el blog sólo lo escribo yo y tomo nota, a partir de hoy quito toda la publicidad del RSS, en cualquier caso puedo asegurarte que el número de suscriptores me parece que no va en función de ello..

tecnoadmin dijo...

Ah, y ya puestos va el texto completo, si lo había quitado dejando sólo el título se debía únicamente a que hasta acabar el manual de php, las entradas relativas al mismo salen larguísimas,...ya me contarás

tecnoadmin dijo...

sintiéndolo mucho he tenido que volver a los RSS cortos porque como te había comentado los post demasiado largos me han dado problemas con Feedburner, de hecho en 15 días habrás visto que no ha llegado ninguno

Pablo dijo...

Hola,

te interesa intercambiar links con nosotros?

esta es nuestra página web:

http://tiendainformatigacalaica.es

Si tu linkeas a la nuestra, nosotros podemos linkear a la tuya.

Puedes escribir a info[arroba]tiendainformaticagalaica.es

Somos de ourense.
Pablo.