Esta es una página que te ayudará a colocar accesorios al blog. Aprenderás como mejorar tu blog. Pasa y encontrarás de todo un poco.
Cargando

¿Como hacer una Nube de Etiquetas? -73-

Una nube de etiquetas es una representación visual de las “etiquetas” o palabras clave usadas en un sitio web. Generalmente este listado de palabras se ordena alfabéticamente y con diferente tamaño según su relevancia.

Para empezar a poner nuestra nube de etiquetas en el blog tenemos que etiquetar todos nuestros post.

1. Ir a diseño de la plantilla, luego a Edición de HTML y clic en Expandir plantillas de artilugios y tendrás que pegar entre <b:skin><![CDATA[ y ]]></b:skin>. Preferible que lo pegues casi al final (antes de ]]></b:skin>).

/* Label Cloud Styles
----------------------------------------------- */
#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}

2. Después agregar el siguiente código entre ]]></b:skin> y </head>. Preferible que lo pegues casi al final (antes de </head>).

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

3. Buscar el widget con el id Label1 y con el title Etiquetas. Esto lo encuentras donde dice:
<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>

<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'><?xml:namespace prefix = data /></data:label.name></a>
</b:if>
(<data:label.count/>)
</li>
</b:loop>
</ul>

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

4. Una vez ubicado, tienes que reemplazar todo el código anterior por 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'>

// Do not change anything past this point -----------------
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 ta=0
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])
}
}
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 > 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>

Explicación del paso Nº 2
- En lcBlogURL, se debe poner la dirección de tu blog.

- En maxFontSize, podemos modificar el tamaño de la fuente mostrada.

- En maxColor = [0,0,255], podemos modificar el color de la fuente mostrada.
Por ejemplo:
[255,0,0] = Rojo claro
[0,255,0] = Verde claro
[128,0,0] = Rojo oscuro
[0,128,0]= Verde oscuro
[0,0,128] = Azul oscuro
Mas combinaciones de colores en HYPE's Color Specifier.

- En minFontSize, podemos modificar el tamaño de la fuente mostrada.

- En minColor = [0,0,0], podemos modificar el color de la fuente mostrada.

- En lcShowCount (true o false) .- Si es true se mostrará una nube de etiquetas con el número de entradas que existen. Mientras que en false simplemente se vera una nube de etiquetas sin su respectivo número.

Nota:
- Para que te resulte este truco debes tener como máximo más de 2 entradas en caso contrario no se mostrará.

60 Comentarios:

diaz dijo...

muchas gracias...lo habia intentado siguiendo las instrucciones de otra página y no pude lograrlo, pero esta vez si he podido. Muy buena tu pagina....

http://cocheadiccion.blogspot.com

Club Oriente Petrolero dijo...

Hola Andres:

tres cosas, dos ayuda para tu blog y otra consejo para mi.

1.- Tengo el codigo para poner un MP3 o radio que uno quiera al blog. Para pasártelo.

2.- Tengo el código de FAVICON que me funciono a la perfeccion y hasta con animación. para pasártelo.

3.- Quiero un consejo, estoy pensando en comprar un dominio para mi blog, que servidor me puedes sugerir. La verdad se que hay muchos pero cual sera el mas confiable y estable.


mi msn andipinto@hotmail.com

si solo quieres que te lo pase los datos orienteblog@gmail.com escribirme

Saludos.

Andrés dijo...

Diaz: Gracias por visitarme y que bueno que te haya salido.

Club del Oriente Petrolero: Con respecto a las dos primeras cosas tendrúpresente lo que me quieres prporcionar, asi que en cualqquier momento te escribire y en cuanto a lo otro no se cual sera confialble, cuestion de probar.
Gracias nuevamente por la visita.

nacht nebel dijo...

Te agradesco mucho por tu ayuda muchas cosas de mi blog lo saque del tuyo.
Te queria pedir algo , no creo que ya lo hubieras posteado pero queria mostrarte un blog que tiene los links ordenados alfabeticamente http://metalsinfonia.blogspot.com/

En la parte que dice enlaces de grupos , eso queria saber como hizo ella para eso.
Otra cosa , tengo problemas con los hosting , tendrias unos mejores ,para subir musica y no se cuelguen tanto.
Ah otra cosa hay un manera de bloquear el boton derecho del mouse y el control para evitar que te copien , yo vi blog que lo tienen.
Otra mas mi fondo hace que no se pueda leer bien las letras hay forma tambien de ponerle como blanco debajo de cada letra para resalte , sin tocar el fondo y en cada letra solo para que esta se vean mas .
Se que me abuse pero bueno no se cuando volvere a escribir el del mouse no es tan importante solo un capricho mio .
Bueno gracias por la buena onda.

Jony dijo...

Gracias por el truco, yo de momento me privo de hacerlo, pero no digo que no lo vaya a hacer mas adelante ;)

http://lavozdejonyybea.blogspot.com/

nacht nebel dijo...

Bueno te vuelvo a escribir para un par de cosas que te pido sobre el hostin g ya encontre uno bueno , asi que eso no problem sobre bloquear teclas deja mejor no.
Si sobre el fondo blanco o algo para las letras.
Nada mas gracias por la buena onda , y como siempre me encanta tu blog , por lo didactico y lo util que son muchas cosas que hay en el .
Nos vemos .

Carlys.... dijo...

graciaaasss, al fin pude hacerlo! y me kedo re bien!!! ^_^ muchas gracias por la ayuda! un abrazo desde Argentina :D

Josep dijo...

Hola: gracias por tus consejos.

Como gratitud, tengo un galardón para tí; pasa a recogerlo cuando quieras.

Saludos.

Andrés dijo...

Nacht nebel: Revisare el blog que me mencionas.
En cuanto a los hosting solamente tengo esos que menciono en mi blog, si por ahi encuentras uno mejor lo posas para agregarlo.
Si se puede bloquear el boton derecho del mouse, tendre presente tu solicitud.
Sobre las letras eso lo haces en el mismo Blogger en donde puedes cambiar el color, la fuente y etc.

Jony, Carlys: Gracias por la visita.

Josep: De todas maneras pasare a recoger mi premio.

Gracias a todos por la visita.

Jalem dijo...
Este comentario ha sido eliminado por el autor.
Jalem dijo...

AYUDA BLOGS AWARD 2007 te esperan, tu blog a sido seleccionado para participar pero para estar seguros de que quieres de que tu blog participe envianos un e-mail a jonathan_montano@hotmail.com con el nombre del blog con su respectiva url, y tu nombre completo...

¡¡MUY BUENA SUERTE!!

www.ayudaexperta.blogspot.com

Gabriela dijo...

hola, como puedo colocar una foto al lado de la firma del autor del post? Teniendo en cuenta que es un blog multiautor, quisiera que salieran automaticas las fotos chiquitas al lado o debajo de la firma de cada autor. ¿Se puede hacer eso en blogger?

Gracias

Piripiquia dijo...

Gracias!! tu explicacion es super clara... y lo logre!! odiaba ver la lista de etiquetas... ahora me encanta como quedo mi nube...

Rosso99 dijo...

Andres!!
Me confieso...culpable!
Cuando empece a aramar mi pequeño blog, y necesitaba ayuda recurria a este magnifico sitio, y ahora que esta mas o menos en marcha te lo tengo que agradecer enormemente...

Creo que me veras por aqui en mas oportunidades a medida que vayan surgiendo dudas...

Me gustaria que, si puedes te pasaras por mi blog y me digas que te parece (el diseño,porque el contenido puede no gustarte jeje)
www.nsphml.blogspot.com.
un abrazo grande desde Argentina y muchas gracias!!

Carly dijo...

excelente!!! genial el blog....muchas gracias por la ayuda!

Palomas dijo...

Hola Andrés!!!, tanto tiempo, he estado ocupada en pequeños problemitas. Después de lo sucedido te encuentras bien?. Un abrazo y espero tus noticias. Hasta cada día.

ABRAHAM LÓPEZ MORENO dijo...

Soy el autor de "Panorámica cazorlense" y "Cazorla a pie de foto". Te escribo porque hoy, no se por qué, se me ha metido un tema musical en este último blog y yo no he hecho nada para ello, no se quien me lo habrá metido, y quisiera averiguar donde se aloja para poder borrarlo, porque cada vez que entro al blog, empieza a sonar la dichosa música.
Espero, si puedes, me resuelvas este problema o me digas algo referente a ello.
Un cordial saludo y felicidades por tu labor de ayuda a los torpes como yo.

Abraham López

101.5 Siempre Fm en la Noticia dijo...

Hola Andrés,
mi función es llevar a cabo todo el trabajo en la web de la radio en la que trabajo, me has sido de GRAN ayuda y te invito conozcas uno de mis blogs,http://siemprefm.blogspot.com el que "enriquecí" gracias a tu aporte.
Debo darte las gracias y mis felicitaciones.
Me gustaría saber si es posible transmitir la radio a través del blog (ahora lo hago a través de shoucast y por la pagina web www.siemprefm.com.ar)
mi msn es maricarmenargsl@hotmail.com., me encantaría tenerte como contacto. Un abrazo- Maricarmen

Luxury dijo...

These articles are fantastic; the information you show us is interesting for everybody and is really good written. It’s just great!! Do you want to know something more? Read it...: Great investment opportunity in Costa Rica: condos resort, destin beach, destin condos. Visit us for more info at: http://www.jaco-bay.com/

Alyzu (sumconsultores) dijo...

hola, quería agradecerte por tu ayuda en relación a colocar "continúa " en mi blog gracias mil.... Que tal tu cumple???? espero que bien.- Mi blog es http://www.paperexpress.blogspot.com Cualquier sugerencia es bienvenida

Erika Miriam Rojas Portilla dijo...

Felicitaciones tu blog aparte de ser una ayuda es un amigo. Trate de cambiar la plantilla, pero no me resulto. Te invito a mi blog http://enciclopeadelsaber.blogspot.com/
saludos.

l3utterfish dijo...

Hola!

Queria preguntar si hubiese alguna manera de poner una nube de etiquetas como esta pero en una plantilla HTML del antiguo blogger...

Saludos desde l3utterfish

Mario Cobba dijo...

hola amigo, tu aporte me fue my útil, pero queria hacerte una consulta, en el código que tu has colocado quisiera saber que línea modificar para que aparezcan un determinado número de tags y no todos los tags de mi blog, ya que si son demasiados van a ocupar mucho espacio y yo solamente deseo que aparezcan o los 10 últimos o los 10 más posteados. Muchas gracias.

xavierjuja dijo...

muchas gracias
estaba buscando algo como esto pra mi blog
el tuyo esta bien chevere :)

cuidate :D

jUjA!!

Leandro Comeglio dijo...

"Premios BLOGSPOT"
VOTÁ al blog que crees que tiene que ganar estos premios.No pierdas ésta oportunidad de agradecer al blog que mas te ayudó.Para votar metete en: www.premiosblogspot.blogspot.com

YovanY dijo...

Gracias master.

Muy efectivo, simple y conciso.

Mucha buena vibra para mas post como este, que para mantener un blog en el gusto de la gente si que es dificil XD.

Haber si te puedes dar una buelte sita y dejar un coment gracias.

got dijo...

Gracias por tu blog y tus explicaciones, hoy has sido mi gran Sensei!! Explicaciones claras y sencillas para neonatos en la materia.

Psicojack dijo...

Estimado Andrés, me puedes decir como poner etiquetas en mi blog con alojamiento fuera de blogger?.

parece que no es igual... :(

salu2
psicojack.com

ZODOMANIC dijo...

Esta muy buena tu pagina sigue asi para que yo pueda seguir "tuneando" mi blog ah No pude por que me aparece el sigt. error
Edita los contenidos de tu plantilla. Más información
No hemos podido obtener una vista preliminar de su plantilla.
Por favor, corrige el siguiente error y envía la plantilla de nuevo.
Se ha encontrado más de un artilugio con el ID: Label1. Los ID de artilugio deben ser exclusivos.

The A-team dijo...

Hola Andres nuevamente...olvide preguntarte cómo incrustar videos y audio en barra lateral...gracias

Apuestas deportivas dijo...

Esto si que me ha sido tremendamente util. Muchas gracias

www.profesorapuesta.blogspot.com
La mejor pagina de apuestas deportivas

DanyFreak dijo...

hola andres...
bueno tengo uan enorme duda...
¿al momento de poner la nube, las etiqutas se ordenan,(me explico...cuando abro una etiqueta de tu blog, salen solo los titulos y al presionarlos se abren)... eso ocurre kuando esta la nube de etiquetas o es un tuco aparte?
yo que hacer eso ya que mi blog se ve muy desordenado
http://danyfreakmusic.blogspot.com/
y necesito ese truco...
me lo das porfavor??
si es que puedes visitar mi blog y entender lo que ocurre
jeje
buenoo
ojala puedas...
grxs


adios

maBel dijo...

Genio!!! estoy alucinada, gracias a tus consejos pude cambiar la apariencia del blog, ahora estoy viendo que mas se puede hacer

http://lacocinadeile-nuestrasrecetas.blogspot.com

Muchas gracias!

Stella dijo...

Excelente la ayuda que prestas. Te cuento que tengo un problema: Resulta que no encuentro lo de Label en mi htlm. Está desaparecido. Las dos primeras líneas estan ok pero después vienen cosas diferentes. Yo no se si eso tenga que ver con un arreglo que le hice al blog hace rato de colocarle 3 columnas. Pero me gusta saber que posiblemente por esto es que mis etiquetas no me funcionan en adwords. No tengo el código en mi htlm.
Como arreglo este proglema sin quitar mi otra columna.
Te agradezco un monton. Besos

Stella S. dijo...

Te cuento cariño que ya me salió.Como no tenía ese código no borre nada simplemente Coloqué el código debajo de sidebar id y me salió perfecto. Un besote y gracias.
Cuidate.

gatto dijo...

gracias, por los tips..

http://ctrlmasc.blogspot.com/

Anónimo dijo...

Me ha sido de gran ayuda tu pagina, pero tengo un problema. He personalizado la fecha y no consigo que me quede exactamente como a ti. Tengo la misma que tu, pero el año se me sale de la imagen AYUDA!!!!

thebossx@hotmail.com

ZODOMANIC dijo...

Andres quisiera que me expliques por que cuando termino la nube de etiquetas al darle click el cualquier etiqueta se enlaza directamente con la pagina dime que no lo has hecho aproposito o por favor dime como puedo arreglarlo gracias!!

ZODOMANIC dijo...

La pagina con la que se enlaza es esta ayuda para el blog perdon pero falto especificarlo

Carlos dijo...

Muy buenas, este blog me ha ayudado muchisimo para crear el de mi equipo de futbol. Ahora querria saber como conseguir poner un Texto en una linea y que vayan apareciendo automaticamente el resto de lineas del texto

http://atlsanpedro.blogspot.com

Muchas gracias

Andrés dijo...

Carlos: Te podrias explicar muy bien no te entiendo.
Gracias por la visita.

Luis Alberto Belloli dijo...

Andres:
este truco de la nube, es imposible de hacerlo funcionar en mi plantilla, no aparecen los codigos que vos pones que hay que reemplazar
Y no lo que vos pones que debe reemplazarse, puede ser un error de mi plantilla???
No se que hacer, realmente casi todo lo que probe funcionaba barbaro.
Tu bolg es una masa....

VIRIDI@NA dijo...

Tengo problemas para entrar a ver este apartado y no se porque... se cierra la pagina.

Estoy tratando de hacer mi nube de etiquetas...:(:(:(

Janice dijo...

Holas me fue terrible
no puedo agregar la nube
este es mi blog
http://www.sweetjanice.blogspot.com/
x fis me ayudaS?
XD
besoooo

Uno mas del monton dijo...

Gracias me funcionó a la perfección, 10 puntos, lo hice en mi blog de musica
http://musicaconletra.com.ar/

y hice una entrada en mi blog de ayuda con este tutorial

http://cosasparaelblog.com.ar/2009/01/el-tamao-de-las-etiquetas-por.html

Andreita dijo...

Wujuuuu lo logré! y todo gracias a tu guía!! tenía ratos de estar tratando de encontrar una nubecita bonita! muchas gracias!!!!

Anónimo dijo...

Hola una pregunta, seguí todas las instrucciones pero al hacer click en algún elemento de la nube se carga la pagina de tu blog lo cual no me parece correcto

Anónimo dijo...

************ADVERTENCIA**************
ESTE POST NO FUNCIONA COMO DEBE SER,FUE CREADO PARA QUE LAS ETIQUETAS EN EL BLOG DIRECCIONEN A ESTE BLOG DE MIERDA Y POR LO TANTO TENGA MAS ENTRADAS
"NO LO USEN NO FUNCIONA ES UNA ESTAFA"

Andreita dijo...

Creo que...seguramente XD no leyeron bien las instrucciones..."En lcBlogURL, se debe poner la dirección de tu blog." ojo!!!

Darío Gómez Fisicaro dijo...

Hola!
muy lindo el blog.
pero tengo un problema a la hora de buscar un codigo, me pasa tambien cuando quiero hacer las estiquetas en forma de pestañas.

Estoy hablando del paso 3.
Si bien encuentro el codigo de referencia que das (el que esta en negrita) todo lo demas me paraecen, en parte, diferente.

Igualmente lo seleccione todo desde :
dic id="sidebar-wrapper" hasta /b:widget
y finalmente lo reemplaze. Pero es justo eso lo que no me permite visualizar ni guardar la plantilla.

nose que hacer.. por ahi reemplazo mal el codigo.

pense que podría ser culpa de la plantilla standar que elegí.. probe con otras y tengo el mismo codigo y el mismo problema.

como podría solucionarlo :S

jahguias dijo...

tengo un problema en el ultimo paso me tira este 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 "div" must be terminated by the matching end-tag.
No se que hacer, me gustaría poner la nube.. gracias!!!

Ashura Dayana Lursaiz dijo...

Si les tira error es por que tienen la versión nueva, así que nube se pone mas fácil.

Primero tienes que tener etiquetadas todas tus entradas y no modifiques nada del código.

Entra a la parte de Diseño, luego a Elementos de la página

elige Añadir un gadget

te abre una ventana y seleccionas el que se llama Etiquetas (das click en el signo de + que tiene), ahora solo guardas y listo, si no te gusto en que lugar quedo, arrástrala hasta posicionar la donde mas te guste.

Recuerden que algunas códigos ya llevan mucho tiempo y pertenecen al estilo antiguo de blogger y en el nuevo no sirve.

Anónimo dijo...

============================================================================================================================================Hola a todos, les quiero comentar que si estás buscando accesorios para Blogger, sigan este enlace. Hay calendarios, relojes, animaciones, buscadores, cronómetros y otros cientos de accesorios para el blog. Se los recomiendo!!

€rickson dijo...

gracias, me sirvio

Anónimo dijo...

grasias....
filioque27.blogspot.com
trucos de todo.

cristian dijo...

gracias por el tiempo dedicado en este tema, todavia soy nuebo en esto y no entiendo mucho pero tampoco es tan dificil.

les dejo mi blog para que lo vean.

cristian dijo...

el blog : http://chevyracing-cristian.blogspot.com

torresgek dijo...
Este comentario ha sido eliminado por el autor.
torresgek dijo...

a los que sale el siguiente error:


Mensaje de error de XML: The element type "b:section"

no solo debes reemplazar la línea:



Si no tambien tienes que reemplazar esa líneas y las siguientes, es decir reemplaza todo widget.

Fuente: http://masingenio.blogspot.com/2011/08/tutorial-como-crear-nube-de-tags-o.html

HotelyRumba dijo...

Aún años después de haber escrito estos artículos, siguen ayudando a muchos como nosotros que somos nuevos en esto y con las mejores intenciones de hacer algo funcional estamos haciendo http://hotelyrumba.blogspot.com/ siguiendo tus indicaciones. Agradecido

Related Posts with Thumbnails
Últimos Post