Actualización: Blogger ha incorporado las nubes de tags de forma nativa, así que te recomendamos consultes esa opción, en lugar del proceso siguiente.
Las “Nubes de Etiquetas” son cajas llenas etiquetas o categorías del contenido de nuestro sitio, las palabras más grandes son los temas con mayor información o importancia en nuestro sitio o las que más se visitan y parece que es lo último en la moda en muchos blogs y web.
En el nuevo Blogger existe una manera para que se creen automáticamente después de agregar un poco de código como el desarrollado en phy3blog y que vamos a mostrarte como poner el tuyo.
- Entra a tu blog y vamos a la pestaña “Plantilla” (“Diseño” si estas en el escritorio) y después a la opción “Elementos de la página”. En esta pantalla damos clic a la que nos dice “Añadir un elemento de página”.
- Ahora da clic en la pestaña “Plantilla” nuevamente y después en la opción “Edición de HTML”.
- Dentro del código busca el siguiente texto:
- Justo antes de ese texto coloca lo siguiente:
- Volvemos a buscar el texto:
- Ahora buscamos el texto:
Te abre una ventana con varias opciones donde buscamos “etiquetas” y clic en “añadir al blog”, nos lleva a una nueva pantalla y dejamos el nombre “Etiquetas” si lo tiene por defecto ,sí tiene otro nombre se lo cambiamos y damos clic en “guardar cambios”.
]]></b:skin>/* Estilos de la Nube de Etiquetas */
#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
}Como puedes ver estos son los estilos CCS que tendrán tu etiquetas y la caja, puedes cambiar los colores, margenes, fuentes, etc.
]]></b:skin>Pero esta vez justo después del texto colocamos:
<script type='text/javascript'>
// Variables en la Nube sobre el color y tamaño de la fuente
var cloudMin = 1;
var maxFontSize = 20;
var maxColor = [0,0,255];
var minFontSize = 10;
var minColor = [0,0,0];
var lcShowCount = false;
</script><b:widget id='Label1' locked='false' title='Labels' type='Label'/>Una vez que lo encontramos, lo eliminamos y colocamos en su lugar lo siguiente:
<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'>
/* Este es el script que hace posible la nube y no hay necesidad de cambiar nada */
function s(a,b,i,x){
if(a>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 c=[];
var labelCount = new Array();
var ts = new Object;
<b:loop values='data:labels' var='label'>
var theName = "<data:label.name/>";
ts[theName] = <data:label.count/>;
</b:loop>
for (t in ts){
if (!labelCount[ts[t]]){
labelCount[ts[t]] = new Array(ts[t])
}
}
var ta=cloudMin-1;
tz = labelCount.length - cloudMin;
lc2 = document.getElementById('labelCloud');
ul = document.createElement('ul');
ul.className = 'label-cloud';
for(var t in ts){
if(ts[t] < cloudMin){
continue;
}
for (var i=0;3 > 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 = '/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>Con esto queda ‘instalada’ la Nube de etiquetas y la podemos poner donde queremos desde el panel de “Elementos de la página”.
Muchas gracias por la esplicación. Una duda… ¿se puede cambiar el color de la fuente? Queria ponerlo en alguno que quedara mejor que el azul para mi blog. Gracias de nuevo.
es verdad, a mi también me gustaría cambiar los colores. ¿cómo lo puedo hacer?
muchas gracias!
Bien, lo que tienen que hacer es colocar el código de color en la clase CSS de la nube, es decir, donde dice
#labelCloud .label-count {padding-left:0.2em;font-size:9px;color:#000}
Sustituyan “#000″ por el código de color que quieran para su nube.
Espero no tengan problemas, saludos!
y si queremos cambiar el color del texto de dentro de la nube’
muchas gracias
Tienes razon, eso no cambia el color de texto, bien, el script cambia el color de texto de acuerdo a la cantidad de post de cada categoria y se definen en el mismo script, en una parte pegaste lo siguiente:
<script type='text/javascript'>
/*Variables de la nube de etiquetas*/
var lcBlogURL = 'http://tublog.blogspot.com';
var cloudMin = 1;
var maxFontSize = 20;
var maxColor = [0,0,255];
var minFontSize = 10;
var minColor = [0,0,0];
var lcShowCount = false;
</script>
Bien pues ahi esta el color de las categorias menores y la mayores:
var maxColor = [0,0,255];
var minColor = [0,0,0];
tienes que cambiar esos números con el código de color que quieres para las categorias menores y mayores respectivamente.
ok ok, + o – entiendo esto, pero que pasa si pusimos un theme desde la plantilla clásica, y eno está el módulo de etiquetas… es el mismo procedimiento?? gracias
Sí estas usando Blogger clásico no puedes implementar la nube de etiquetas por este método, pero me parece que si se puede implementar.
Hola… no sé si lo pueda implementar porque para empezar no encuentro la etiqueta
***/b:skin> ***
si por ahí sabes cómo puedo ponerla te lo agradecería mucho mucho
Hola mariposa, vi tus blogs desde tu perfil (por cierto muy interesante el que habla sobre la maternidad) y vi que manejas el nuevo blogger, te recomiendo busques bien porque no se puede omitir en el nuevo blogger y menos en las plantillas que estan por defecto.
De cualquier forma, en este post te pongo otra altarnativa:
http://blogyweb.blogspot.com/2007/05/generador-de-nube-de-tags-en-linea.html
Saludos!
Hola Francisco:
Muy bueno tu blog.
Quisiera pedirte tu ayuda en mi blog con respecto a las etiquetas.
Este es mi blog:
http://download-fanatico.blogspot.com
Como ves es un blog de series de tv. Ahora le habilite las etiquetas donde esta la lista de series que subo.
Pero a parte de eso quisiera subir otras cosas y usar el mismo sistema de etiquetas, pero esta vez solo de lo que incluyo sin mostrar las etiquetas anteriores.
Mira esta imagen y quedaras claro con lo que te quiero explicar:
http://aycu21.webshots.com/image/14820/2006122386269725458_rs.jpg
Si te fijas en la etiqueta prueba se repiten las etiquetas que estan en la de series de tv.
Como podria yo hacer que en la nueva etiqueta solo quedaran las que quiero incluir eviatndo asi que se repitan con las de series de tv???
Que tal fanatico?
Creo entendi tu problema, yo también estoy buscando la forma de manipular mejor las etiquetas y hasta ahora sin exito, lo que yo te propondria es que hagas una lista de etiquetas normal (como la que tienes) y para las etiquetas que no son series, crear una lista de links desde el panel con sus nombres y direcciones.
La desventaja es que no se agregaran automaticamente y no se mostraran la cantidad de post en cada una.
Lamento no poder ayudarte más.
Saludos!
PD: Falta smallville entre las series jeje es broma.
Hola,
me gustaría añadir una lista con los de enlaces a otros blogs que leo, debajo de los widgets de “etiquetas” y “archivo del blog”, pero no se como hacerlo.
Podéis facilitarme el código? uso el diseño Minyx
Hola Dyoramax, puedes hacer eso directamente en tu blog, entrando a “diseño”, de ahí a “elementos de página”, donde quieras que aparezca “añadir elemento” y ahí escoge una lista de enlaces, donde solo metes nombres y direcciones.
Hola, estoy tratando de aplicar esto en mi blog, pero me da un error:
No se ha pegado el texto del error, es este:
No se ha podido analizar su plantilla, porque no está bien formada. Asegúrese de que todos los elementos XML se han cerrado correctamente.
Mensaje de error de XML: The content of elements must consist of well-formed character data or markup.
Me contesto a mi mismo; siguiendo los pasos del enlace http://phy3blog.googlepages.com/Beta-Blogger-Label-Cloud.html, si que me ha funcionado. Lo comento por si a alguien también le da error.
Hola Cafeymas, no se que pudo haber pasado, creo que le daré un checada y gracias por el aviso.
Hola. He colocado la nube de etiquetas lo que pasa es que tengo tantas que se me va llenar demasiado.
Hay alguna forma de que ponga por ejemplo la de los últimos 50 post por ejemplo o la de los últimos 50 días por ejemplo, no se si me explico.
Gracias.
No me acaba de funcionar
, me sale el mismo mensaje que a cafeymas, y el vínculo que puso no funciona, en fin, agradecería si sabéis algo!
He reescrito el código y ya esta funcional, un saludo!
Hola, yo tengo una plantilla con diseño propio, de modo que no puedo aplicar esta explicación a la mía. ¿alguien me puede decir como puedo listar mis etiquetas?
Intento poner una plantilla y me dice que tengo error con el Lebel1 q sera? que puedo hacer para solucionarlo??
para ser exacto esto es lo que me pone:
Están a punto de suprimirse los artilugios
Por favor, confirma que los siguientes artilugios deben borrarse. Se borrará toda la información de configuración de los artilugios.
* Label1
!!No entiendo nada!!
La nube d etiquetas ya la puse con la explicaci{ón q diste, !!solo quiero cambiar el color¡¡
No entiendo la parte donde dices:
Tienes que cambiar esos números con el código de color que quieres para las categorias menores y mayores respectivamente.
N q parte d estos codigos:
var maxColor = [0,0,255];
var minColor = [0,0,0];
Pongo el codigo del color q quiero? n este caso #ffffcc para q asi tenga armonia com mi sitio?
!!Ojala y contestes¡¡
Fernando, ese código es hexadecimal, en google podrás encontrar varios generadores de colores con ese formato.
Muy bueno, funciona sin problemas, muchas gracias y enhorabuena por tu blog.
Justo lo que buscaba, gracias
Me sumo al pedido de Neo.
Hay alguna forma de limitar la cantidad de etiquetas ?
Es que tengo tantas ya que mi blog está online hace mas de un año , que me queda una nube de tags larguisima.
Desde ya gracias…
Hola, he incluido la nube de tags en mi blog y va muy bien, pero me gustaría saber si es posible que todas aparezcan ordenadas alfabéticamente y no en función del número de post (si ven el blog en la barra derecha tengo una nube de tags de delicious con ese diseño, así es como me gustaría que quedaran).
Fonzi y Neo:
Una manera de reducir el número de tags es en la variable
var cloudMin=1
Indica el número mínimo de elementos (posts) que deben contener las etiquetas a mostrar, si sustituyen por un número mayor es probable que la cantidad de etiquetas se reduzca considerablemente.
hola, quisisera que me auxiliaras, lo que pasa es que en mi plantilla no encuentro la palabra ‘label’ asi que no puedo poner la nube de tags…he buscado en varias páginas pero en todas me hablan de esta palabra y no la localizo ni manual ni con el ctrl f…ojalá puedas ayudarme..mi web es http://www.palabrasdarena.blogspot.com
saludos
Ya he arreglado lo mío. Al final era una tontería, tenía seleccionado mostrar etiquetas por frecuencia en el elemento de página en vez de alfabéticamente.
hola me gustaria cambiar las etiquetas que aparecen el el top de mi blog alguien me podria hechar un cable? gracias de antemano,muy chulo tu blog,;)
Muy, bien, perfecto, hace tiempo que lo estaba buscando para mi blog. gracias http://iosublog.blogspot.com
Eres un genio hermano te lo agradezco ya quedo instalado en mi web saludos
A mi nunca me salió eso de “Añadir un elemento de página” que dices
, ¿tengo que cambiar algo en Blogger para que me salga eso?, es que me estoy iniciando y se practicamente nada sobre esto casi; y es el único ‘botón’ que no veo (“Añadir…”). Ayuda por favor! T_T. Gracias
“Gracias” a que no me sale eso de “Añadir un elemento de página” no puedo agregar widgets, y quisiera saber por qué es esto?. ¿Debería contactar al staff o servicio de ayuda de Blogger?
Bueno la última consulta por ahora, que ya debo molestar y me disculpo por eso, pero es el precio de la ignorancia en algo nuevo, como en mi caso con el tema de agregar widgets en Blogger…
Fuí Flogger hace mucho, y me saltó la pregunta de si no será Blogger como un fotolog?, me refiero a que en este (flog) uno debía llegar a cierta cantidad de posteos para así poder personalizar su espacio, como agregarle efectos al título del flog y alguna que otra cosa. ¿Podrá ser así?, que no tengo idea. Graciass y adiós!
qued perfecta en mi blog gracias por el aporte te felicito
Muchas gracias !!
Cita de Francisco: “Bien pues ahi esta el color de las categorias menores y la mayores:
var maxColor = [0,0,255];
var minColor = [0,0,0];”
¿Alguna forma de saber los códigos del o los colores que deseemos?, porque quiero cambiarselos a la nube de etiquetas de mi Blog y ni idea
. Gracias!
Mira te dejo mi blog…no he lorado cambiar el color de la nube…y no entiendo porque…
ac ate dejo mi codigo
// Variables en la Nube sobre el color y tamaño de la fuente
var cloudMin = 1;
var maxFontSize = 12;
var maxColor = [#BD4687];
var minFontSize = 10;
var minColor = [#BD4687];
var lcShowCount = false;
espero me puedas ayudar
Gracias por el post, te explicas muy bien. Siempre hace falta gente como tú que nos ayuda a los que somos novatos.Un besazo y sigue así.
Gracias por las instrucciones. Aunque ha costado un poco ya la he conseguido implementar. Pero tengo una duda: ¿cómo puedo hacer la nube más estrecha? No encuentro ninguna etiqueta width…
Gracias por la explicación… muy clara y precisa!
Una gran ayuda para el nuevo proyecto
no sabes cuanto me ayudo esto!!! ante sde esto use la nube hecha en flash pero entorpecia mucho la carga de la pagina , pero esta nube jala perfecto!
saludos
Gracias en lo profundo por el post, claro y sencillo, funciona que se las pela.
Los problemas con el cambio de colores se solucionan utilizando un código R-G-B (y no uno hexagesimal, como bien has dicho).
Un abrazo, y ánimo (da gusto encontrarse con explicaciones como la tuya).
No puedo creer que fanático haya hecho un comentario, no lo puedo creer todavia!! Eran los comienzos de el blog mas existoso! Y el tuyo tambien jaja muy bueno todo
jajaja el mio no tan éxito.
Que bueno que te ha sido útil, un saludo!
hola Francisco, estoy intentando crear la nube de etiquetas, siguiendo los pasos que marcas. El último paso, sustituye esta linea por el codigo que pones;
me aparece asi;
Y me da error.
He cambiado a id=’Label2′ en tu codigo y me lo acepta. Pero no se crea la nube de etiquetas.
si ves el blog, no tiene una plantilla que te da por defecto blogger. Tal vez ese sea el problema porque he seguido tus indicaciones con otros blogs que tengo del trabajo y me ha funcionado y tienen una plantilla basica de blogger
Espero tu respuesta, gracias de antemano y saludos.
Agradezco al que hizo esta guia, me salio igualito, Gracias
Te aplaudo! lo intente y me sirvio, recomiendo lo apliquen, porque yo no sé nada de diseño de blogs y lo logre con estos pasos sencillos y bien señalados.
Un saludo cordial
Tristemente como a otros colegas, el código me ha marcado error al ser guardado
con lo que me he quedado con un palmo de narices y el siguiente error:
“No se ha podido analizar su plantilla, porque no está bien formada. Asegúrese de que todos los elementos XML se han cerrado correctamente.
Mensaje de error de XML: The element type “b:section” must be terminated by the matching end-tag “”.
Ojalá y puedas darle una revisada o tranzar el código que tú utilizas como ejemplo, que esta es la tercera página que visito queriendo lograr lo mismo y nomás no
Saludos.
Me ha funcionado correctamente.
Solo que kiero hacer el ancho de la nube, vaya al ancho del widget mñas estrecho y no puedo.
como he de modificar el ancho maximo de la nube?
Hola, yo me instale el template de Eclipse, quiero saber, como poner los datos de mi perfil, en el boton que dice “Acerca de mi”
porque la verdad, que no se como hacerlo!
desde ya, muchas gracias!
espero una respuesta!!!
mandamela al mail !
Adios!
Francisco, muito obrigada! Era isso mesmo que eu procurava para o meu blog!
Vou abusar: o que achou do meu blog?
Beijos
Ana Maria
Hola necesito ayuda urgente como veras mi blog esta como una pagina y una foto si me pudieras indicar como mejorarla te agradeceria mucho
saludos
Muchas gracias por la explicación, me ha salido a la primera y sin fallos.
Muy bien explicado, no tuve ningún problema, gracias
Me vale! It´s perfect!
Llevaba tiempo con la nube de etiquetas funcionando correctamente y de pronto ha desaparecido. Sigue estando el gadget pero sin la nube (solo con el título). He mirado en la plantilla y el código sigue intacto, ¿sabéis que ha podido ocurrir? Gracias.
Hola: necesito una ayudita, quiero poner etiquetas con link a otras entradas en mi blog, pero estas siguen apareciendo en la entrada, mi mail rbrm03@hotmail.com
gracias, agradecido
Hola, muchas gracias por el post, lo acabo de hacer y todo bien, pero tengo otra duda, que parte del codigo borro o modifico para que no me ordene las etiquetas?
Gracias!
hola como estas gracias por la informacion hice lo que apuntaste aqui de la nuve de etiqueta pero hice algo mal y ahora la cabezera de mi blog no aparece me gustaria saber que hacer por favor me gustaria que vieras mi blog gracias
nota: el error mas grande que hice fue que no guarde la plantilla anterior jajaja
Dios te bendiga
hola como estas gracias por la informacion hice lo que apuntaste aqui de la nuve de etiqueta pero hice algo mal y ahora la cabezera de mi blog no aparece me gustaria saber que hacer por favor me gustaria que vieras mi blog gracias
nota: el error mas grande que hice fue que no guarde la plantilla anterior jajaja
Dios te bendiga
mi blog es:http://apuntesjuveniles.blogspot.com
Me ha gustado mucho este efecto y le he agregado a mi Blog.
^.^
Muchas gracias.
Gracias loco, funciona al pelo la nube
Ei!, funciona perfectamente. gracias!.
Ayuda!
Apareció el título pero el contenido no, o sea no hay ninguna etiqueta en la nube. Qué habré hecho mal?
No sale la nuve de etiquetas
@wikernes:
“No se ha podido analizar su plantilla, porque no está bien formada. Asegúrese de que todos los elementos XML se han cerrado correctamente.
Mensaje de error de XML: The element type “b:section” must be terminated by the matching end-tag “”.
————-
Solución: Quita la paloma a Expandir plantillas de artilugios.
Hola en la barra de navegación donde debería estar lo de etiquetas para hacer una nube y visualizarlo en el blog, por error lo he borrado y no sé como ponerlo de nuevo!!!!!!!!!!!!! Ahorra no puedo ver las etiquetas en mi blog porque no las veo en la barra de navegación!!!!!!!!!!
Por favor alguien me ayuda???????? Estoy de los NERVIOSSSSSSSSSSSSSS
GRACIASSSSSSSSSSSSSSSSSSSSSSSSSSSSSS
Gracias! quedó muy bien!
gracias funciona perfectamente, un poco de recortes aqui y alla y todo va bien.
Hola Francisco.
quizas esta es una pregunta bien tonta
es que tengo etiquetas en mi blog , pero no se ven bajo las entradas , y he visto otros blogs que si se ven :/ ! cuál es el problema ?
gracias
Hola Francisco , sabes la nube se ve azul y es feo :S ! e intente hacer lo que dijiste para cambiar el color pero no funciono … ayudame porfa
Lala: Busca en Google por “colores RGB”
Gracias Claudia (: !
gracias por la nube y por las explicaciones. voy a probar lo del color a ver si lo consigo
Hola, Muchas gracias por el código. Funcionó a la perfección. Aún tengo pocos tags porque recién empiezo, pueden verlo en La Verdad del Dinero en Internet.
Los que tienen problemas con el tema de los colores no se preocupen. Hasta con el paint lo pueden solucionar. Yo hice así:
Hice un print de pantalla de mi blog y con el paint capté el color anterior de los tags en la lista por defecto y apliqué esos valores en las variables
var maxColor = [0,0,255];
var minColor = [0,0,0];
y quedó perfecto.
Gente, es así
var maxColor = [0(rojo),0(verde),255(azul)];
Háganlo con el paint, van a ver.
Nuevamente gracias.
Un abrazo.
Hola Francisco:
Felicitaciones totales por tu trabajo, excelente Blog, de muy buena factura y muy práctico por lo demás.
Si bien es cierto tengo mi blog desde hace tiempo, sólo este último año me he estado metiendo mas en este asunto.
Actualmente estoy ocupando la plantilla “Edens Garden” de Blogger Templates y me ha gustado mucho la posibilidad de colocar una nube de etiquetas, lo cual lo hice de acuerdo a lo que indicas en este artículo…pero no hay caso de colocar un color distinto que se mas visible de lo que poco y nada que se puede ver.
No se que parte estoy haciendo mal pero espero encontrar la solución en este blog.
De antemano muchas gracias por tu ayuda y me quedaré por esta tierras creo que bastante tiempo….hay mucho que aprender.
Saludos.
Alejandro Barros
Santiago – Chile
no logro encontrar en el codigo html el texto del punto 6 , por lo cual no puedo terminar de generar la nube…si alguien me pudiese ayudar…muchas gracias!
El código 6 es del widget de etiquetas, sino te aparece agrega ese widget desde Diseño → Elementos de Página
Tal como dices en la actualización, Blogger ha ampliado las posibilidades de las etiquetas. Pero me sigue gustando más este sistema, da más control, sobre todo de cara al diseño.
Lo que no he probado todavía es si es posible realizar este hack dos veces, y utilizar la nueva posibilidad en uno de los gadgets para sacar unas determinadas etiquetas, y en el otro el resto.
Estoy realizando una nueva plantilla en estos momentos. Lo voy a intentar, ya te comentaré cómo me ha ido el experimento.
Este truco sigue siendo igual de válido que cuando se publicó. Doy fe.
Un saludo!!
oie no se mueve my nube de tagas que puedo hacer?
@kazeta, a qué te refieres con que no se mueve? Esta no se tiene que mover
Hola, queria saber si esq hace falta algo, ya q en el paso 6 no puedo continuar xq no existe ese código, no se si esq necesita actualizarse peroestoy ya mas loca q una cabra buscando respuestas.
Muchas gracias