Pages

Subscribe Twitter

05 octubre 2007

Tag clouds, Nube de etiquetas en blogger

Tag cloud para Blogger

Los tag clouds muestran tus etiquetas visualmente bonitas y ordenadas por tamaño según la cantidad de entradas en cada una, en blogger no esta por defecto como en wordpress, por lo que necesitaremos uno más de los famosos hacks.

Para agregarla, vamos a Plantilla -> Edicion HTML (no expandas artilugios)
El codigo se divide en 3, el primero lo pegamos antes de "]]></b:skin>"

Codigo 1:

/* Label Tag Cloud */

#labelCloud {text-align:center;font-family:arial,sans-serif;}
#labelCloud .label-cloud li{display:inline;background-image:none
!important;padding:0 5px;margin:0;vertical-align:baseline
!important;border:0 !important;}
#labelCloud ul{list-style-type:none;margin:0 auto;padding:0;}
#labelCloud a img{border:0;display:inline;margin:0 0 0
3px;padding:0}
#labelCloud a{text-decoration:none}
#labelCloud a:hover{text-decoration:underline}
#labelCloud li a{}
#labelCloud .label-cloud {}
#labelCloud .label-count
{padding-left:0.2em;font-size:9px;color:#000}
#labelCloud .label-cloud li:before{content:"" !important}


El siguiente lo pegas despues "]]></b:skin>" y antes de "</head>"

<script type='text/javascript'>
// Label Cloud User Variables
var lcBlogURL = 'http://TU-BLOG.blogspot.com';
var maxFontSize = 20;
var maxColor = [0,0,255];
var minFontSize = 10;
var minColor = [0,0,0];
var lcShowCount = false;
</script>


En http://TU-BLOG.blogspot.com pones la direccion de tu blog (¬¬)

Ahora, busca lo siguiente (Control + F): <b:widget id='Label1' locked='false'

El tag completo es algo asi: <b:widget id='Label1' locked='false' title='Labels' type='Label'/> pero el title tal vez sea distinto en tu caso.

Esa misma linea (toda) la debes reemplazar por el siguiente codigo:

<b:widget id='Label1' locked='false' title='Label Cloud' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>

<div class='widget-content'>
<div id='labelCloud'/>
<script type='text/javascript'>

// Don't change anything past this point -----------------
function s(a,b,i,x){
if(a&gt;b){
var m=(a-b)/Math.log(x),v=a-Math.floor(Math.log(i)*m)
}
else{
var m=(b-a)/Math.log(x),v=Math.floor(Math.log(i)*m+a)
}
return v
}

var ta=0
var c=[];
var labelCount = new Array();
var ts = new Object;
<b:loop values='data:labels' var='label'>
var theName = &quot;<data:label.name/>&quot;;
ts[theName] = <data:label.count/>;
</b:loop>

for (t in ts){
if (!labelCount[ts[t]]){
labelCount[ts[t]] = new Array(ts[t])
}
}
tz = labelCount.length-1;
lc2 = document.getElementById('labelCloud');
ul = document.createElement('ul');
ul.className = 'label-cloud';
for(var t in ts){
for (var i=0;3 &gt; i;i++) {
c[i]=s(minColor[i],maxColor[i],ts[t]-ta,tz)
}
var fs = s(minFontSize,maxFontSize,ts[t]-ta,tz);
li = document.createElement('li');
li.style.fontSize = fs+'px';
li.style.lineHeight = '1';
a = document.createElement('a');
a.title = ts[t]+' Posts in '+t;
a.style.color = 'rgb('+c[0]+','+c[1]+','+c[2]+')';
a.href = lcBlogURL+'/search/label/'+encodeURIComponent(t);
if (lcShowCount){
span = document.createElement('span');
span.innerHTML = '('+ts[t]+') ';
span.className = 'label-count';
a.appendChild(document.createTextNode(t));
li.appendChild(a);
li.appendChild(span);
}
else {
a.appendChild(document.createTextNode(t));
li.appendChild(a);
}
ul.appendChild(li);
abnk = document.createTextNode(' ');
ul.appendChild(abnk);
}
lc2.appendChild(ul);
</script>

<noscript>
<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>
</noscript>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

Para terminar, ve a Plantilla -> Elementos de pagina -> añadir nuevo elemento -> etiquetas.

Eso es todo, ahora tendrás una nube de etiquetas en tu blog ^^

ACTUALIZACIÓN:
Crear facilmente nubes de etiquetas o label clouds,
con estos sistemas:
TagCloud o ZoomClouds

54 comentarios:

Nando dijo...

Muy bueno el truco amigo, pero al final me quita el artilujio de las entradas del blog y los sustituye por la nube tag? que puede estar pasando?

Deathly dijo...

No sustituye las entradas, sustituye el artilugio de las etiquetas.

maca dijo...

prefecto!!!!

Amanecer dijo...

Hola, gracias por la explicación. Me salió super... que bien que ya tengo mi nube de tags
Saludos!!!!

Amanecer dijo...

ayer con las prisas no comprobé que al clicar abriera lon vinculos de los tags. Hoy he intentado abrirlos y no funciona.
Entiendo poco de codigos html así que pregunto qué tengo que hacer para que funcione correctamente.
??? por fa
gracias

Deathly dijo...

Amanecer, si te complica mucho el HTML, prueba con estos sistemas online:
TagCloud.com, ZoomClouds.com
salu2

Jorge dijo...

gracias, me salio pefecto!!

noCh dijo...

Muchisimas gracias, estuve intentando con los servicios automáticos y nada,hasta que llegué aqui; mil gracias por los tips :)

kolorex dijo...

Excelente la verdad, pongo un articulo en mi blog linkeando al tuyo por que la verdad que no tiene desperdicio, 1000 gracias!

colmena dijo...

Muy bueno, gracias, pero:
- ¿puedo cambiar los colores de las etiquetas?
- ¿puedo hacer que aparezcan sólo las etiquetas con 2 ó más posts?

Gracias

Deathly dijo...

El color depende del que tengas configurado para tu sidebar, lo editas en diseño, fuente y colores.
Lo segundo no se =(

Vanesa dijo...

ahhhhhhhh muchas muchas gracias por el código!!!

ummmm pues yo no tengo el color azul en nada (en fuentes y colores) y me lo pone azul... sabrías como puedo cambiarlo?

besotes!!
Vanesa Sierra
Mis deseos más dulces

Mauro Mata Vicente dijo...

Hola, como hago para que el orden sea aleatorio en las etiquetas

gracas

Mauro Mata Vicente dijo...

Deathly,

Te agradezco, sabes que me ordena de la mas visitada a la menos

echale un ojo,

http://frijolitossalvadorenos.blogspot.com

me comentas, te agradecere infinitamente

saludos

Deathly dijo...

Uhm tienes razón. Solo hay dos formas de ordenarlas, que es Por frecuencia y por orden alfabetico que es el que tu tienes.
Eso lo haces desde diseño y editas el elemento de las etiquetas.

Frans dijo...

Muchas gracias por el código y por las explicaciones paso a paso. Muy útil!

Anónimo dijo...

al darle click no me abre los links de las etiquetas, qúe debo hacer o debo cambiar algo en el código?

lo único que modifiqué antes fueron los colore y el título que aparece en mi sidebar de "label clud" por "etiquetas", debo regresarlo al anterior para que funcione?

grazie

LIVIA

Deathly dijo...

Lo del nombre no tiene nada que ver... fijate que esten todas las partes del codigo donde debieran estar.

Anónimo dijo...

una consulta.. segui todo el procediemiento.. me creo la nube ..pero arriba del titulo me aparece un codigo html larguisimo igual al que pegue antes de la etiqueta /b:skin>"
como lo soluciono?

Sneyk dijo...

Gracias por esta herramienta .. esta muy buena ...
y si quieres modificar los colores puedes modificar los numeros en estas opciones.
var maxColor = [0,0,255];

var minColor = [0,0,0];

Pueden visitar mi sitio ..
www.colombianime.blogspot.com

Anónimo dijo...

Muchas gracias por el truquito! Funcionó perfecto :)

narok dijo...

ei ami no me sale por ningún lado lo de la el trozo de html que ai que remplazar
no lo encuentro alguien me puede ayudar?

Vindex dijo...

"y si quieres modificar los colores puedes modificar los numeros en estas opciones.
var maxColor = [0,0,255];

var minColor = [0,0,0];"

¿Y cómo se cuáles son los códigos de los colores que quiero? O_O

Deathly dijo...

Aqui estan los codigos de los colores:
Ej: Azul es 0 0 225
Seria:
var maxColor = [0,0,255];

Anónimo dijo...

Lo instale y quede muy bien, gracias por el tip.

Jorge

Anónimo dijo...

Hola, acabo de aterrizar en este blog después de varios intentos en la batalla por instalar una nube en mi blog,. Pero el resultado es negativo, no me sale. He seguido todos tus pasos, te lo juro,

El error es el siguiente:

La plantilla no s'ha pogut analitzar perquè no té un format correcte. Assegureu-vos que tots els elements XML estiguin tancats correctament.
Missatge d'error d'XML: The character sequence "]]>" must not appear in content unless used to mark the end of a CDATA section. Me puedes ayudar por favor! gracias,. isabel

isabelita dijo...

Hola soy la de la última entrada de comens, pues ke conseguí el ok de la plantilla, pero ahora no lo veo en el blog. Dónde está la nube? jajaja, te juro ke no la veo,
puedes ayudarme?isabel

Deathly dijo...

Dejame tu msn para intentar ayudarme... ponlo en "Contacto"

gootyfer dijo...

Perfecto, queda genial! Muchas gracias

Alfonso dijo...

Perfecto!!! lo busqué y aquí lo encontré, blogger debería hacer un upgrade de algunas cosas que los demás tienen y ellos no.
Tienes forma de agregar tabs en blogger?
Saludos

Jeannette Reyes R. dijo...

Excelente!, por fin lo pude hacer,

Muchas gracias!!!

Angela Russi dijo...

Gracias x la nube

Lena dijo...

muuuuuuuuchas graciassssss

Maple Leafs dijo...

http://foxterrierwirehair.blogspot.com/

Lo hice y no me quedó como te aparece en la figura. Me la despliega como en una lista. Alguna idea de lo que pueda ser?. Slds

Lorena dijo...

hola!!
me gusta mucho como keda la nube de tags pero tengo un problema los links de la nube no funcionan... y no encuentro la razon porq segui los pasos como tu los indicaste ..
feliz tarde

Sebastian Abad dijo...

Hola! anoche descubrí esta maravillosa apolicación, tengo un problema. El fondo de mi blog es negro, y cuando puse esta aplicación el color de los tags es un azul muy oscuro, de modo que no se ve bien; he intentado jugar con los colores de la configuración de blogger, pero no resulta un buen cambio. SAbes cómo puedo hacer para cambiar ese color, quizá a un gris claro?
Muchas gracias

bellas-sexys dijo...

Gracias por la ayuda me salio todo perfecto ..................... te mereces tus clicks en los anuncios de adsense

Anónimo dijo...

SOS UN CAPO!!!!!MUY PRÁCTICA TU AYUDA!!

CAT dijo...

Muchas gracias ^__^ oye como le podría cambiar el color, salen azules las letras y me deja medio ciega con el fondo que tengo

Saluditos

Anónimo dijo...

Gracias! va muy bien

Ozo dijo...

Hola, una duda, todo esta bien solo que no se ve como una NUBE, la puse al pie de la pagina en http://wii4everybody.com

Xari dijo...

Gracias!!!! Va perfecto! Da gusto modificar el código HTML y que funcione a la primera!

ready4riots dijo...

muchas gracias!! me salio perfect... pero una cosilla, pensaba ke esto mostraria las etiketas como las vi en otros blog, que forman como una esfera ke se va moviendo... sabriais como podria ponerla asi..¿?!

saludos

Viajar a Japon dijo...

Muchas Gracias!! Voy a tratar a ver si lo puedo hacer funcionar!

Guido Granobles dijo...

Thanks but at the end it works for me just putting the line . Blogger wasn't accept the rest of the script but it works fine.

Karis dijo...

great share, i love it

webespacio dijo...

^^ perfecto, lo hare ojala q me sirva de muchooo pero gracias por la informacion

La voz de la experiencia dijo...

Excelente tu ayuda. Ahora gracias a ti mi blog tiene también su nube.

DACO Le Chef dijo...

lo hice tal cual, me guardo la plantilla bien y agregue el gadget de etiquetas pero no me aparece nada..!?
http://dgourmetcali.blogspot.com/

Cpanel Hosting dijo...
Este comentario ha sido eliminado por un administrador del blog.
latest business news dijo...
Este comentario ha sido eliminado por un administrador del blog.
cami cartular dijo...

Ahora, busca lo siguiente (Control + F): pero el title tal vez sea distinto en tu caso.

en ese punto, no me aparece en ningún lado:

que hice mal?

Juan dijo...

Ami me sale una tira larga de etiquetas, lo que quiero yo es un numero limitado de etiquetas.. que tengo que modificar en el codigo para poder hacerlo?

Juan dijo...

Como se hace para poner un numero limitado de etiqutas en esa nube de Tag?

Publicar un comentario en la entrada

Gracias por visitar Recursospaces, si tienes alguna duda, solo pregunta! ^^