Nube de etiquetas estatica

5 de junio de 2009 34 comentarios ,
Anteriormente vimos cómo crear una nube de etiquetas en movimiento, ahora vamos a hacerlo pero que quede de forma estática.

Primero verifica que ya tengas un gadget de etiquetas, si aún no lo tienes agrega uno desde Elementos de la página.

Luego entra a Diseño | Edición de HTML y SIN expandir artilugios pega lo siguiente antes de ]]></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}

Ahora antes de </head> pega esto:
<!-- variables de la nube de etiquetas -->
<script type='text/javascript'>
// Label Cloud User Variables
var cloudMin = 1;
var maxFontSize = 20;
var maxColor = [0,0,255];
var minFontSize = 10;
var minColor = [0,0,0];
var lcShowCount = false;
</script>

Después busca esta línea:
<b:widget id='Label1' locked='false' title='Labels' type='Label'/>
Nota: Es posible que en la id= diga Label2 o label3, y que el title= diga Etiquetas u otro nombre, pero la forma más fácil de reconocer esta línea es guiándote por esto último: type='Label'/>

Ya que lo has localizado sustitúyelo por esto:
<b:widget id='Label1' locked='false' title='Nube de etiquetas' 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 -----------------
// Cloud function s() ripped from del.icio.us
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 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])
}
}
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] &lt; cloudMin){
continue;
}
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 = '/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>

Guarda los cambios y listo.
También puedes personalizar los colores y tamaño de las letras, para ello en el segundo código modifica lo que desees:
var maxFontSize = 20; tamaño máximo de la letra más grande
var maxColor = [0,0,255]; color del texto de la letra más grande
var minFontSize = 10; tamaño mínimo de la letra más pequeña
var minColor = [0,0,0]; color del texto de la letra más pequeña


34 comentarios en:

" Nube de etiquetas estatica "

  1. hola amigo estoy recien aprendiendo me gustaria poner las nubes sobre mis titulos . pero tengo un problema no encuentro head en mi html del blog me podras solucionar el inconveniente .gracias

    ResponderEliminar
  2. Hola Ranin,
    No sé si te he entendido bien. Pero si quieres poner la nube de etiquetas sobre tus entradas entonces hazlo como se indica en el post, luego en Elementos de la página arrastra el gadget hasta donde quieras.
    Saludos.

    ResponderEliminar
  3. Todas estas cosas son muy recomendables en un blog. Más aun si facilita y aumenta la navegabilidad. Un buen diseño de nube de etiquetas y ubicada correctamente en el blog hasta puede aumentar las páginas vistas en nuestro blog (no las visitas).


    Un abrazo!!!

    ResponderEliminar
  4. Completamente de acuerdo, no sólo se trata de tener "chulo" el blog, sino de facilitar la navegación del usuario.
    Saludos.

    ResponderEliminar
  5. oiie una pregunta, kiero saber de algun programa para modificar mi plantilla,, porke en frontpage me dice ke mi blog esta protegido. en el photoshop no se como hacerlo, y el dreamweaver no consigo descargarlo...

    como hago para modificarla¿? mira mi blog, quiero cambiar el tipo de fuente del titulo etc...

    ResponderEliminar
  6. Nunca he usado un software para modificar una plantilla de Blogger por lo que desconozco si se pueda, pero no es necesario, todos los cambios los puedes hacer desde Blogger.
    Para cambiar los tipos de letra entra a la pestaña Fuentes y colores dentro de Diseño, ahí haces los cambios de letras y colores.

    Saludos.

    ResponderEliminar
  7. eso ya lo se -.- , pero gracias xD,, no me deja modificar nada de la plantilla, tu como modificaste la tuya¿?

    ResponderEliminar
  8. AL igual que todos, desde Blogger, quitando y poniendo códigos.
    Saludos.

    ResponderEliminar
  9. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  10. hola potro una consulta mira yo quiero que mis label salgan automaticamente el numero de post q yo quiera y cuando coloco : http://ciudadblogger.com/search/label/ciudadblogger me salen los post relacionados pero MUCHOS asi q yo he tenido q colocar : http://ciudadblogger.com/search/label/ciudadblogger?max-results=10 para que me aparescan solo 10 no habra algo para modificar y me salga automaticamente LA CANTIDAD DE POST Q DESEE ?

    GRACIAS

    ResponderEliminar
  11. Podrías intentarlo con lo que se menciona en esta entrada, pero tengo entendido que ya no está funcionando como debería, aunque por probar no se pierde nada.

    ResponderEliminar
  12. Potro, un saludo amigo. No se si los comentarios a esta entrada etán ya cerrados? Es una preguntilla lo que me trae esta vez por aquí. ¿Como o donde le pongo el color a la nube de etiquetas?

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

    He probado de todas formas.
    Gracias por tu tiempo.
    Cuídate, y hasta otra.
    ¡ FELIZ AÑO !

    ResponderEliminar
  13. Hola duque71

    Esos 3 ceros son en código RGB. Usa este sitio para localizar el color que deseas poner:
    http://html-color-codes.info/codigos-de-colores-hexadecimales/

    Usa el segundo que hay en la página, cuando selecciones un color verás que hay unos recuadros que dicen
    R
    G
    B
    Cada uno con un valor diferente, esos son los números que debes poner en el código, por ejemplo para el color rojo sería así:

    var minColor = [204,3,3];

    ¡Saludos y feliz año!

    ResponderEliminar
  14. Y si en vey de una nube quisiera que fuese una LISTA de etiquetas?!

    ResponderEliminar
  15. Sólo entra en Diseño > Elementos de la página > Añadir gadget > Etiquetas.
    De esa forma tendrás el gadget de Etiquetas normal, en forma de lista.

    ResponderEliminar
  16. Excelente Potro, ya que no pude utilizar la nube dinámica, este tutorial me quedó perfecto. Muy buenos aportes.

    Saludos

    ResponderEliminar
  17. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  18. Hola Potro!
    Me puedes explicar,¿que es una nube de etiquetas?
    Se trata de tener varios gadgetes con etiquetas? y así tener el blog mas organizado?
    Gracias
    Mariajo

    ResponderEliminar
  19. Hola Mariajo,

    La nube de etiquetas no es otra cosa mas que el gadget de Etiquetas pero en lugar de que éstas estén en forma de lista vertical se muestran todas desordenadas sin un órden lineal.

    ResponderEliminar
  20. Hola potro quisiera preguntarte, es que es posible cambiar el color de las etiquetas intermedias ya que aparecen de distintos colores, o simplemente se cambian de forma aleatoria, me explico tengo etiquetas de diferentes tamaños y cuando cambio los colores solo se cambian las grandes y las pequeñas y el resto toma colores aleatorios... Saludos Yarix

    ResponderEliminar
    Respuestas
    1. Hola Yarix Rosario. Lo que sucede es que el script toma un color definido para el mínimo y el máximo, todo lo que quede en medio se colorea con los tonos de los colores intermedios. No hay una configuración para definir los colores para los del medio. Saludos.

      Eliminar
    2. Hola potro! ... Muchas gracias por la aclaracion, estaba viendo el algoritmo del scrip pero es un poco imposible poder hacer el cambio ... Saludos desde Perú y gracias :D

      Eliminar
  21. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  22. Hola

    en las etiketas, LOS LINKS LABEL
    ejm.: http://ganar-dinero-seguro.blogspot.com/search/label/Tutoriales

    Me sale un cuadro al comienso que dice:
    "Mostrando entradas con la etiqueta Tutoriales. Mostrar todas las entradas"

    Como quitaria eso, para q se vean solo Los post con esa etiqueta

    Gracias---

    ResponderEliminar
    Respuestas
    1. Mira esta entrada yagami, ahí verás cómo quitar ese mensaje:
      http://ciudadblogger.com/2009/07/ocultareliminar-el-mensaje-mostrando.html

      Eliminar
    2. Hola, muchas gracias me funciono perfecto :)

      Eliminar
  23. Buenas tardes Potro,

    Te he escrito en una ocasión anterior por otro tema relacionado con la configuración del blog y me están sirviendo de mucha ayuda tus consejos.

    Quería hacerte una pregunta:

    He añadido a mi blog el gadget de etiquetas que ofrece blogger, pero encuentro que la distancia entre etiquetas [palabras] es muy grande. ¿Cómo podría reducir este espacio?

    Te dejo la dirección de mi blog para que lo compruebes. El gadget etiquetas está en la barra lateral derecha. Gracias de antemano por tu respuesta.

    http://mensicorpore.blogspot.com

    ResponderEliminar
    Respuestas
    1. Hola Prof. Psyche, ¿te refieres a la distancia horizontal o vertical? Porque la vertical la veo bastante bien, la horizontal ahora sí se ve separado pero es porque no tienes muchas etiquetas, cuando tengas más etiquetas se llenarán los espacios vacíos de la nube.

      Saludos.

      Eliminar
  24. Efectivamente hablaba del espacio horizontal entre etiquetas. Muchas gracias por la aclaración,como siempre.

    Quería hacerte nuevamente otro par de preguntas sobre la nube de etiquetas porque he estado leyendo algo sobre este tema y me ha generado un par de dudas:

    ¿El gadget de etiquetas que ofrece Blogger tiene alguna limitación respecto a otros programas? Si fuera así ¿qué otro programa me podría facilitar estas etiquetas?

    ¿Podría colocar en este diseño de plantilla una nube de etiquetas en movimiento?

    ResponderEliminar
    Respuestas
    1. No tiene ninguna limitación, de hecho es mejor porque ahí puedes elegir qué etiquetas mostrar si lo deseas. Este tipo de scripts, como el de esta entrada, surgieron porque antes no teníamos la opción de nube de etiquetas en Blogger, así que teníamos que recurrir a estos métodos.

      Ahora, la nube de etiquetas en movimiento es distinta al funcionamiento de este o el de Blogger, no puedes combinar alguno de esos métodos.

      Eliminar
    2. He hecho alguna prueba con la nube de etiquetas en movimiento y, aunque es más vistosa, he comprobado que no funciona correctamente con Internet Explorer.

      Muchas gracias por la información, Potro.

      Eliminar

Si tu blog contiene material protegido por derechos de autor habilita tu perfil y deja únicamente el nombre de tu blog, no dejes la dirección del mismo, de lo contrario el comentario será eliminado.

 
Ir Arriba Ir Abajo
I Ciudad Blogger