Nube de Etiquetas en el nuevo Blogger
Marzo 6th, 2007 | Publicado por Francisco en Blogger | 38 Comentarios
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”.
Loading ...
Marzo 29th, 2007 a las 9:03 pm (#)
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.
Abril 5th, 2007 a las 6:53 pm (#)
es verdad, a mi también me gustaría cambiar los colores. ¿cómo lo puedo hacer?
muchas gracias!
Abril 6th, 2007 a las 2:17 am (#)
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!
Abril 13th, 2007 a las 6:50 pm (#)
y si queremos cambiar el color del texto de dentro de la nube’
muchas gracias
Abril 15th, 2007 a las 1:53 am (#)
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.
Abril 26th, 2007 a las 5:53 pm (#)
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
Abril 27th, 2007 a las 2:22 am (#)
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.
Mayo 2nd, 2007 a las 6:13 pm (#)
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
Mayo 6th, 2007 a las 3:57 am (#)
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!
Mayo 12th, 2007 a las 3:35 am (#)
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???
Mayo 12th, 2007 a las 6:32 pm (#)
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.
Agosto 3rd, 2007 a las 11:41 am (#)
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
Agosto 4th, 2007 a las 2:08 am (#)
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.
Agosto 9th, 2007 a las 2:59 am (#)
Hola, estoy tratando de aplicar esto en mi blog, pero me da un error:
Agosto 9th, 2007 a las 3:00 am (#)
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.
Agosto 10th, 2007 a las 7:39 am (#)
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.
Agosto 12th, 2007 a las 6:26 pm (#)
Hola Cafeymas, no se que pudo haber pasado, creo que le daré un checada y gracias por el aviso.
Agosto 18th, 2007 a las 3:51 am (#)
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.
Agosto 19th, 2007 a las 6:47 pm (#)
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!
Agosto 25th, 2007 a las 12:45 am (#)
He reescrito el código y ya esta funcional, un saludo!
Octubre 21st, 2007 a las 4:46 am (#)
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?
Octubre 26th, 2007 a las 2:41 pm (#)
Intento poner una plantilla y me dice que tengo error con el Lebel1 q sera? que puedo hacer para solucionarlo??
Octubre 26th, 2007 a las 2:42 pm (#)
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
Noviembre 26th, 2007 a las 2:06 pm (#)
!!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¡¡
Noviembre 30th, 2007 a las 3:31 pm (#)
Fernando, ese código es hexadecimal, en google podrás encontrar varios generadores de colores con ese formato.
Febrero 17th, 2008 a las 12:34 pm (#)
Muy bueno, funciona sin problemas, muchas gracias y enhorabuena por tu blog.
Abril 3rd, 2008 a las 1:33 pm (#)
Justo lo que buscaba, gracias
Abril 8th, 2008 a las 1:19 pm (#)
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…
Abril 14th, 2008 a las 5:26 am (#)
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.
Mayo 8th, 2008 a las 2:11 am (#)
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
Mayo 8th, 2008 a las 6:28 am (#)
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.
Mayo 29th, 2008 a las 10:57 am (#)
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,;)
Junio 26th, 2008 a las 5:15 am (#)
Muy, bien, perfecto, hace tiempo que lo estaba buscando para mi blog. gracias http://iosublog.blogspot.com
Junio 28th, 2008 a las 10:19 pm (#)
Eres un genio hermano te lo agradezco ya quedo instalado en mi web saludos
Agosto 17th, 2008 a las 10:25 pm (#)
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
Agosto 17th, 2008 a las 10:26 pm (#)
“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?
Agosto 17th, 2008 a las 10:31 pm (#)
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!
Agosto 20th, 2008 a las 2:21 am (#)
qued perfecta en mi blog gracias por el aporte te felicito