7.9.06

Nube de etiquetas ( label cloud ) en beta.blogger

Asegúrate de hacer un backup de tu plantilla antes de empezar y de mirar los 2 últimos párrafos de la entrada antes de continuar.

Ve a la sección layout de beta.blogger. En 'Page Elements' crea una nueva sección de 'Tags'. Ahora ve a Edit HTML y no marques "expands widgets".


El código consta de tres partes. Una para la hoja de estilos, otra para la configuración,
y otra para el propio widget.

Vamos con la primera. Tienes que buscar la etiqueta

]]></b:skin>

y poner el código justo ANTES.



/* 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}




Vamos con la segunda, estamos con la misma etiqueta de antes

]]></b:skin>

Pero esta vez colocaremos el código después de esa etiqueta y antes de </head>a por ellos:

<script type='text/javascript'>

// Label Cloud User Variables

var lcBlogURL = 'http://YOURBLOG.blogspot.com';

var maxFontSize = 20;

var maxColor = [0,0,255];

var minFontSize = 10;

var minColor = [0,0,0];

var lcShowCount = false;


</script>



Todo esto puede ser cambiado, pero por ahora preocúpate de cambiar "YOURBLOG" por el nombre de tu blog.
var lcBlogURL = 'http://YOURBLOG.blogspot.com';



Y vamos con la tercera (y mira que me gustan poco las sevillanas), se trata de que busques más abajo en tu plantilla el siguiente código (+ó-)


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


Ahora tienes que seleccionar por entero la línea y cambiarla por todo 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'>

// 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>



*Os recomiendo que copieis las líneas de código del artículo original, además en phydeaux3, podéis encontrar mucha más información sobre los parametros del widget, buena suerte y ya sabéis a dónde escribirme.

**Esta entrada sólo pretende ser una traducción de andar por casa para los nuevos beta.bloggers. Mañana, o en poco tiempo, me pondré a explicar lo que entienda sobre las nuevas plantillas con XML pero probablemente empezaré con la distribución que es más sencillo. Pretendo ir explicando todos los cambios que haga en el blog a medida que los vaya haciendo; espero que le valga a alguien de algo.

68 comentarios:

Toxcatl dijo...

un poco de caridad cristiana para los que somos de letras...

Anónimo dijo...

no puedo poner comentarios

Anónimo dijo...

Ahora...
que raro no me deja poner comentarios con mi nombre en este blog..(la wonder)

Quiero poner una nubecita pero no he pasado de la primera lina :(

Como me hago de blogger beta??tengo que hacerme un blog nuevo??helpp

Villaykorte dijo...

¿Qué tal la wonder), lo primero que hice fue desde la página principal de blogger darme de alta en beta.blogger (me dejó a la primera). Pero todo tiene un pero, para que las nuevas funciones tengan efecto tienes que elegir una de las plantillas predeterminadas. Por fin se puede editar en HTML (antes no te dejaba), lo que pasa es que las nuevas plantillas hacen mucho uso de XML y hasta que no me empape bien del todo, no empezaré a hacer cambios.
Lo de los problemas al hacer comentarios pasa con los blogger al intentarlo en beta.blogger y viceversa. Según Blogger "estamos trabajando en ello" (no sé si con acento tejano)
Por lo demás estoy encantado, el publicar una entrada lo hace de forma automática y sin esperas y las etiquetas funcionan muy bien.

Anónimo dijo...

Valep gracias,voy a probar en "mi otro blog de mierda" antes de romper nada que mi plantilla me gusta mucho..XD
la wonder

deniman dijo...

¿Tienes alguna idea de como puedo migrar mis blogs a blogger Beta? Es una putada perder material de más de un año y medio. he tenido que crear uno nuevo porque no me dejaba ni volviendo a la plantilla original

Villaykorte dijo...

Deniman, yo no tuve ningún problema salvo el de tener que cambiar de plantilla. Al principio, no me dejaba editar mi plantilla en HTML, pero ahora ya se puede. Lo único es que hay que tener un poco más de cuidado con el código, pero ya sabes que hay que aprender de todo.
También (por ahora) tenemos otro problema a la hora de publicar los comentarios en blog de blogger que no son beta, pero aseguran desde blogger que lo van a solucionar pronto.
Deniman, te puedo asegurar que al migrar a las nuevas plantillas de beta.blogger, sólo pierdes eso, la plantilla, conservas todos los artículos y comentarios. Eso sí, te tienes que entretener una tarde en ir etiquetando tus antiguos posts.
Un saludo.

Anónimo dijo...

Hola,
A ver si me podeis echar una mano.
Lo que hay que cambiar en la plantilla lo entiendo, pero lo que no comprendo, es lo primero:

"sección layout de beta.blogger. En 'Page Elements' crea una nueva sección de 'Tags'"

Yo ya tengo creado uno de labels (llamado categorías), pero ¿hay que crear otro "Lable" o un "HTML/JavaScript"?

Gracias

Jose dijo...

Para aquellos que preguntan por cambiar su blog antiguo a la versión Beta, todos serán incluidos en la misma cuando deje de ser Beta, es decir, en pruebas. No deben preocuparse por sus entradas, sólo deben esperar.

Villaykorte dijo...

Luis, tienes que crear uno por defecto llamado "Labels", pero lo puedes llamar como quieras.
Luego siguiendo los pasos creas la nube y lo mejor es que desde "Add and arrange page elements" puedes editarlo y ponerle el nombre que quieras.

Anónimo dijo...

Gracias Villaykorte,

Pues a mi no me va. No se si será por que tengo ya una de "Labels" puesto en mi web, renombrado a "categorías".

No se, me ale error en letras rojas, y nada.

Gracias de todos modos,
Luis

Villaykorte dijo...

Luis, yo soy muy torpe y lo he hecho.
Trata de borrar la sección que has creado y empieza desde cero. Ahora mismo no recuerdo si era "tags" o "labels", pero si no lo consigues trata de hacerlo otra vez desde el principio.
Si quieres me puedes contar con pantallazos lo que te pasa en mi email: villaykorte (arroba) gmail (punto) com. y trato de ayudarte.

Anónimo dijo...

Gracias Villaykorte,

Ya esta, el problema residia en tener ya uno.
Lo borre, y lo hice de nuevo, y voilá, a la primera. Gracias.

Luís

Unknown dijo...

Hola, yo migre a blogger beta, el tema es que a mi tambien me gustaria tenes los label ya que el sistema d2b para etiquetas que usaba es inservible en la beta de blogger, entendi lo que vos explicaste aqui, el tema es que yo no deseo cambiar mi plantilla, no quiero ninguna de las que blogger me da porque tengo la mia propia, es posibleponer los label sin necesidad de cambiar la plantilla ??? Espero me puedas ayudar saludos.

Unknown dijo...

Hola, yo migre a blogger beta, el tema es que a mi tambien me gustaria tenes los label ya que el sistema d2b para etiquetas que usaba es inservible en la beta de blogger, entendi lo que vos explicaste aqui, el tema es que yo no deseo cambiar mi plantilla, no quiero ninguna de las que blogger me da porque tengo la mia propia, es posibleponer los label sin necesidad de cambiar la plantilla ??? Espero me puedas ayudar saludos.

Editorial dijo...

Hola, muchas gracias por el dato, a penas estoy empezando con esto de los blog asi que no soy muy experto, parti altiro con un blogger beta, sin embargo no tuve ningún problema con instalar la nube de tags, copie el código que señalaste tal como lo explicaste y me funcionó de inmediato, y ahora mi blog se ve mucho mas entretenido, te voy a seguir visitando a ver si tienes mas datos para blogger beta...
Saludos

Aponcho dijo...

Por mas que lo intento, me arroja este error:
"Se ha encontrado más de un artilugio con el ID: Label1. Los ID de artilugio deben ser exclusivos."
Alguna idea?

Mario Antonio Herrero Machado dijo...

Muchas gracias por su explicación, funciono perfectamente. Puede Usted ver la aplicación en mi blog cabgrafblog, dedicado a comentar fotografías y busquedas en Flickr.

Mario Antonio Herrero Machado
Córdoba, Argentina

Ignasi dijo...

Hola!

Muchas gracias por este post, hoy mismo he emigrado desde mi "viejo" Blogger al nuevo :)

He hecho lo de la nube tal y como lo explicas y funciona perfecto, Pero...

Pero me he quedado algo decepcionado, pensaba que haría una nube con todas las palabras del blog (al estilo de Zoom Clouds)y solo ha hecho la "mini nube" del primer post que he hecho en mi nuevo blogger.

Sabeis algún sistema para que haga esta función?

Muchas gracias!

P.D: Si sabeis algo, pasaros por mi blog y mirarlo :)

Villaykorte dijo...

Hola Ignasi, para que salgan todas las etiquetas de todo tu blog, lo primero que tienes que hacer es editar las entradas antiguas y ponerles etiquetas.
Un saludo

Anónimo dijo...
Este comentario ha sido eliminado por un administrador del blog.
TodoGospel by Rachel dijo...

Hola!!! Necesito si me podés explicar como se hace para poner dos o más listas de etiquetas. He visto en otros blogs que tienen varias etiquetas con diferentes temas, y para uno de mis blog me es útil esta función. Gracias!!

Unknown dijo...

Wauo!! genial, lo hise tal cual y funciona de maravilla sobre todo porque dices exactamente donde colocarlo copie los codigos tal cual y no me dio problemas

Guillermo Toro dijo...

¡Perfecto! Funcionó muy bien. Gracias por este apoyo. La verdad, había probado con Zoom Clouds que, muy gratis y bonito será, pero cada clic en una etiqueta provoca una salida del ambiente del blog y la aparición de la publicidad del servicio, que además está en inglés.

Bolbo_reta dijo...

Hola! He seguido los pasos que has indicado en el post y ya tengo mi nube de etiquetas, pero quería preguntarte si hay alguna manera de cambiarle el color a la letra, de forma que no salgan en negro y azul, pq el fondo de mi blog es oscuro y apenas se ven. Muchas gracias!

Alegria De La Huerta dijo...

Esta linea es diferente al original...
var lcBlogURL = 'http://YOURBLOG.blogspot.com';


Qué hace exactamente??

Tula dijo...

Tengo ya mi nube de etiquetas, pero no funciona los hipervínculos. Yo hago clic en "e-learning", por ejemplo, que es una de las etiquetas y me dice que no se puede encontrar la página. ¿Me podeis ayudar, por favor? Gracias por anticipado.

Villaykorte dijo...

spparral: has escrito mal la dirección, después de
soledadparralearningxxi.blogspot.com tienes dos barras (//), quita una y te funcionará.

Villaykorte dijo...

A los que preguntan sobre colores o diseño, sólo les puedo decir que sigan la entrada en inglés original. Es sencillo sustituir el color original (tipo #000000) por el que queráis.
Un saludo a todos y doble saludo a todos los que habéis enlazado la entrada.

Tula dijo...

Lo he mirado y sólo tengo una barra /

¿Qué otra cosa puede ser?

Gracias de antemano.

[basarium] dijo...

Muchisimas gracias!! me anda genial! encima es facilisimo de entender.. hasta me puse amodificarle los colores, las tipografias y el titulo, y eso que no se absolutamente nada de html, ni programación

¡¡muchas gracias!!

Lupe dijo...

Hola
Alguien sabe cómo se ponen en colores las etiquetas en Nubes de Etiquetas?.
Gracias

telecomunicaciones peru dijo...

Gracias, me salio perfecto :)

Charlie Campos dijo...

Hola! primero felicitarte por éste trabajo, para mi impresionante. Segundo "asaltarte" con tu permiso con una duda: siguiendo tus pasos, he creado la nube y casi sin problemas excepto que no aparece una nube, si no una lista, y ya no sé si es que me falta algo o tengo que configurar mi página de otra manera. Te agradezco de antemano las molestias. Salu2

Anónimo dijo...

Muchas gracias, me ha sido muy útil tu información.

Anónimo dijo...

ME GUSTARIA SABER COMO SE HACE PARA SACAR EL NUMERO Q APARECE AL LADO DE CADA ETIQUETA X EJ FOTOS(3) Q SERIAN LA CANTIDAD DE ENTRADAS PUBLICADAS... SI ME PODES DECIR TE LO AGRADECERIA MUCHO
BESOS
NOE
http://www.marianelamirra.ar.kz/

clickeados dijo...

:) ... justo lo que estaba buscando .. thanx

xMeNux dijo...

Infinitamente agradecido, en las URLs que lo explicaban en inglés algo no pillaba ;)

Gracias :)

Sol dijo...

hola amigo!!!!!

a mi me gustaría saber cómo hacer lo mismo pero con la lista de vinculos...

¿me puedes ayudar??

=)

Daniel Mercado dijo...

Gracias por el post, si no es por él, me quedo sin nube.

Gilda Dmyuv dijo...
Este comentario ha sido eliminado por el autor.
Gilda Dmyuv dijo...

Gracias, he conseguido la nube y ademas he cambiado tamaños y colores.

maruncho dijo...

hola, el codigo que pusiste me resulto perfecto, pude colocar mi nube ya que lo intente con el original pero no funciono en mi blog, pero queria hacerte una consulta ya que la nube coloca TODOS LOS TAGS DEL BLOG, pero yo solo quiero colocar los 10 ULTIMOS, ¿¿que linea de codigo tengo q modificar para lograr eso?? ya q tengo entendido en el otro tiene una variale que se puede editar que es "var cloudMin= 1" pero tu codigo no incluye esa linea.. ¿podrias ayudarme por favor??

MUCHAS GRACIAS

Alberto Navarro Pérez dijo...

Me podrías explicar como puedo cambiar los colores y la fuente de las etiquetas???

Gracias, saludos

MM dijo...

Much�simas gracias...!!!
Hac�a varios d�as que andaba detr�s de la "nube de etiquetas". Prob� desde otros blogs de ayuda, pero no hab�a caso... Con tu explicaci�n y tus datos, todo anduvo perfecto...!!
Lo hice por ahora en un blog que uso para pruebas, pero ya lo voy a empezar a implementar en los otros que tengo.
De nuevo, much�simas gracias...!!!
Y felicitaciones por tu blog... de verdad, muy bueno.

Karyne dijo...

Gracias!!!!! Me quedó super!!! Quería preguntarte si sabes cómo cambiar el color a la letra???? Me queda azul y quiero que sea rojo. Un abrazo, karyne

PolloFrito dijo...

Estoy buscando esto, una forma de incluir las famosas nube de etiquetas en mi blogito. La verdad es que es crudo, muchos trámites, haber si me sale. Pero una cosa: digo yo que si en blogger se pueden crear varios blogs con la misma cuenta, pues se crea un blog para hacer la prueba y haber. Si funciona pues ale, sino pos nada.. Voy a hacerlo. En algun lugar del internet encontré un sitio que ponia un script para poner esto per ono me acuerdo, que sino no habria venido a este blog. ;P.

73ideas dijo...

Gracias

Funciona a las mil maravillas.

73ideas

Eugenio dijo...

Joe majo. Ya te ailoviaba antes, ahora te ailoviu mucho más.

Anónimo dijo...

Hola, he seguido todos los pasos q describes para hacer la nube de etiquetas, de hecho he visto el mismo metodo en varios sitios, pero en el momento de cargar el blog con los cambios, me sale el widget, pero me sale vacio, no m aparecen las etiquetas.
te dejo mi mail y mi blog, por si t apetece de paso echarle un vistazo. y ya si me enlazas seria cojonudo,jejejeje.yo tb t enlazaria a ti.
mail: titoalfonsin gmail
blog:http://romeira.blospot.com

Un saludo y felicidades por tu trabajo.

Abby dijo...

Gracias! Pude ponerla "nube" en el primer intento sin ningun problema. Leyendo algunos de los comentarios me siento toda una privilegiada. Por ahora no se ve muy linda porque solo tengo dos etiquetas con la misma cantidad de posts, pero me parece que va a quedar mejor que esos antiestéticos numeros entre parentesis

Marcelo dijo...

Hola, estuve intentando poner la nube pero nada, solo aparece el modulo que dice tag cloud pero sin ninguna etiqueta. que paso ahí? tengo el mismo problema de tito. te agradecería la ayuda gracias.

Anónimo dijo...

Lo explicaste de forma genial. Te felicito por ello te has ganado un nuevo lector!

Unknown dijo...

muchas gracias por tu aporte, me funcionó perfecto!

para cambiarle los colores simplemente hay que meterse en el Javascript y modificar "var maxColor" para etiquetas de muchas entradas y "var minColor" para las etiquetas de pocas entradas. Las que estén en el medio el script automáticamente le hace la transición!

gracias de vuelta!

Unknown dijo...

Genial, gracias!!!!

Arkaitse dijo...

Gracias por la clarisima explicación!

Me funcionó de mil maravillas!

Anónimo dijo...

Muy interesante
estaba clarisimoooo


visita mi web asi nos agregamos en nuestros blogs

Saludos
http://jonasthra.blogspot.com/

dasolcear dijo...

no se que hago mal, aparece solo el titulo y ninguna etiqueta...

no puede guardar los cambios y dice: Mensaje de error de XML: The element type "b:section" must be terminated by the matching end-tag "".

alguna idea???

Vindex dijo...

Tengo un problema: Dices que NO hay que expandir planilla de artilugios (widgets) y no lo hice, pero luego de colocar los 2 primeros códigos me dispuse a buscar el último que pones en negrita, pero sin resultados, y pensé bueno, quizás deba expandir la planilla de artilugios y va a salir sin problema, PEEERO al hacerlo me salió el aviso de que, si los mostraba (los artilugios) se perdería todo lo que había puesto hasta ahora, o sea, los códigos que nos has facilitado aquí.
¿Habrá alguna solución para esto?. Saludos y muchas gracias igual!

Anónimo dijo...

buena tio pude hacer la nube de tags www.terrakeos.blogspot.com se agradece

Vindex dijo...

Hola de nuevo xD. Me había re colgado con otros chiches y demás gadgets para mi blog pero ahora que los organicé me volvió a la mente la nubecilla esta.
Respecto a mi comentario anterior olvídenlo, pues la solución fue el cambio de plantilla, que me costó un ojo de la cara para poder encontrar por cierto un diseño que me agrade...
Ya puse la nubecilla de etiquetas asi que cuando empiece a ver los resultados de cómo va les digo, eso claro si es que dichos resultados no se ven al terminar de colocarla, pues soy casi ignorante en esto.
Saludos!

David López-Cepero dijo...

Perfecto, lo intenté desde otros sitios pero me funcionó solo el tuyo.

Gracias...

NO A LA DISCRIMINACION dijo...

Gracias amigo por el aporte. Me sirvio de mucho.
Eres muy didacta para explicar.

Una sola duda si deseo cambiar el color ya quew el azul es simil al de mi blog ¿como hago? Tengo el catalogo de colores solo que no se ¿que cambiar?

Anónimo dijo...

Hola.

Excelente, muchas gracias por toda la explicación, me ha quedado muy bien!!!!/

Antonio dijo...

Hecho. Gracias.

Jumihur dijo...

Muchas gracias!!

Increible y super clara la explicación, me quedó perfecto!!

mario dijo...

Madre mya todo eso.

luvi4uall dijo...

I agree with your point, please share with us more good articles.1998 Chrysler 300M AC Compressor