JMiur [E]

Esta es la primera entrada de una serie donde podrán verse las modificaciones (hacks) hechas a la plantilla.

Blogger Beta Label Clouds (Nube de Etiquetas) fue desarrollado por phydeaux3 y lo que sigue es una traducción libre del código necesario para implementarla.

En todos los casos, es aconsejable hacer una copia de seguridad ANTES de hacer cualquier cambio en la plantilla.

REQUISITOS MÍNIMOS: el elemento ETIQUETA debe haber sido incorporado a la plantilla. Esto puede hacerse en Diseño/Plantilla, Añadir Elementos y deben existir entradas a las que se les hayan añadido etiquetas.

El código posee tres partes, unas declaraciones de estilo, un script y el elemento widget. Para comenzar, ir a Diseño/Plantilla, Edición de HTML y dejar widgets sin expandir de tal manera de poder encontrar más fácilmente las líneas a modificar.

1. La sección de estilo se debe copiar e insertar dentro del tag <b:skin> en el HEAD de la plantilla. Lo más fácil es encontrar el final de la sección ]]></b:skin> y copiar el código 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 {margin: 0 auto; padding: 0;
list-style-type: none;}
#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. El script también se debe colocar en el HEAD de la plantilla pero fuera de las declaraciones de estilo. Nuevamente, lo mejor es encontrar el tag ]]></b:skin> y copiar el código DESPUES de esa línea pero ANTES del tag de cierre </head>.

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

Nota: todos los valores pueden ser cambiados en cualquier momento y se explican más adelante pero SE DEBE cambiar la primera línea.
var lcBlogURL = 'http://NOMBREdelBLOG.blogspot.com';
para que coincida con la url correspondiente al blog donde va a ser utilizado.

OJO: el formato no debe modificarse, debe mantenerlo entre comillas simples (' ').

3. El widget se encuentra en la sección que corresponde a la columna (sidebar) y, si no está expandido, debería parecerse a esto:
<b:widget id='Label1' locked='false' title='Labels' type='Label'/>
si el widget está expandido, tendrá un formato parecido a esto:
<b:widget id='Label1' locked='false' title='Labels' type='Label'>
... varias líneas de código ...
</b:widget>
en cuyo caso será necesario seleccionar desde el comienzo hasta el final del tag widget.

Copiar el siguiente código y reemplazar la/las líneas.

<b:widget id='Label1' locked='false' title='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>

Listo, el elemento del blog debería verse como una nube. En caso contrario, algo no fue hecho correctamente.

BUGS: por lo menos UNA etiqueta debe tener más de UNA entrada, en caso contrario, el script provoca una falla; además, ninguna de las etiquetas debe contener comillas (").

PERSONALIZAR: los colores y tamaños son configurables mediante las variables del script del HEADER.
var maxFontSize = 20;
tamaño de la fuente (en pixeles) de la etiqueta con más entradas
var maxColor = [0,0,255];
color (en formato RGB) de la etiqueta con más entradas
var minFontSize = 10;
tamaño de la fuente (en pixeles) de la etiqueta con menos entradas
var minColor = [0,0,0];
color (en formato RGB) de la etiqueta con menos entradas
var lcShowCount = false;
puede ser false (default) o true y permuta el contador de etiquetas
IMPORTANTE: al cambiar los colores debe mantenerse el formato RGB entre corchetes ([ ]) y los valores deben estra separados por comas.

El valor por defecto es AZUL para max y NEGRO para min que funciona perfectamente cuando el fondo es claro. Pero puede usarse cualquier valor. Por ejemplo, esta plantilla usa los valores [64,200,255] y [32,128,128] respectivamente.

Cualquier etiqueta intermedia tendrá un tamano y un color basado en su cantidad. El resultado final dependerá de los valores máximos y mínimos elegido pero tambien de otros muchos factores tales como la cantidad de etiquetas y la diferencia de cantidades entre ellas. Tres etiquetas no harán un gran efecto, pero muchas con igual cantidad de entradas iguales, tampoco.

Hay algunas declaraciones de estilo que también pueden ser modificadas:
#labelCloud {text-align:center; font-family: arial,sans-serif;}
la alineación puede ser text-align:justify;, text-align:right; o text-align:left;
la fuente puede ser cualquiera


#labelCloud .label-cloud li {display:inline; ...}
la parte más importante display:inline; puede modificarse por display:block; para obtener un efecto 'Flat' (cada etiqueta en una línea)

#labelCloud .label-count {...}
si se pone lcShowCount en true, establece el color y tamaño de los contadores
NUBE DE ETIQUETAS (Label Cloud)
  • phydeaux3 Homepage
  • Code for Beta Blogger Label Cloud
  • Beta Blogger Label Cloud
  • 51 comentarios:

    ShaelKoNef  

    y como haria para tener el numero de entradas que tiene esa etiqueta al costado de la etiqueta?

    es una opciopn tipo zoomclouds,
    a la espera d la rpta.. me despido

    Responder
    JMiur  

    Fijate en el post, la variable:

    var lcShowCount = false/true;

    por defecto es false, si se coloca en true, se muestra la cantidad de entradas de cada etiqueta.

    Responder
    MacTrucos  

    Hola una pregunta !! yo tengo botones de mis categorias !! si coloco una nube me perjudicaria !!! se puede tener las 2 cosas a la vez ? gracias de antemano saludos

    Responder
    JMiur  

    Si, se pueden tener varios elementos de categorías, basta agregarlo desde "Añadir y organizar elementos de la página".

    Lo que debes tener en cuenta es que al agregar elementos, Blogger les da un nombre (ID) único, que es el tipo de elemento y un número correlativo; así que, en tu caso, el nuevo elemento será:
    id='Label2'

    Como todo el hack está referenciado a id='Label1', deberás cambiar ese dato en el código de la nube, por ejemplo:

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

    deberá ser:

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

    Suerte :-)

    Responder
    Mr. Prado  

    Buenas JMIur:
    He implementado esta nube de etiquetas con éxito, pero tengo un problema, aunque en Firefoz se ve bien, en el Explorer la nube se me sale de la plantilla, expandiéndose hacia la derecha longitudinalmente. ¿Cuál es el problema?

    Ah! ¿Y cómo puedo organizar la nube para que salga como la suya, ordenada alfabéticamente?

    Muchas gracias y siga con su magnífica página que tanto nos ayuda y que tan buenas noticias y curiosidades nos enseña.

    Responder
    Mr. Prado  

    PD: Lo de ordenar alfabéticamente ya no hace falta que me lo responda, tanto buscar un parámetro en la plantilla y la solución la tenía delante de mis narices, en el mismo gestor de Blogger... vaya cabeza la mia.

    Gracias.

    Responder
    JMiur  

    Mr.Prado:

    El problema podría ser provocado porque las propiedades de la sidebar son incorrectas. En este momento dicen:

    #sidebar {
    color:#7D8085;
    padding:20px 0pt 0pt 0px;
    text-align:left;
    width:200px;
    }

    Cambia las propiedades así:

    #sidebar {
    color:#7D8085;
    padding:20px 0pt 0pt 0px;
    text-align:left;
    width:100%;
    overflow:hidden;
    }

    Es difícil evaluarlo desde acá pero, según lo que he podio probar eso solucionaría el tema.

    Responder
    Mr. Prado  

    Gracias JMIur.

    El problema ahora es que ahora la nube de tags sigue desbordando igual que antes, pero la parte que se sale de la plantilla está oculta (como supongo pretendía los parámetros que usted me dio).

    Me mantengo a la espera, un saludo.

    Responder
    JMiur  

    Disculpa tanta ida y vuelta pero con IE no puedo hacer otra cosa más que probar.

    Normalmente, una plantilla de Blogger tiene dos instrucciones específicas por que en IE se producen problemas cuando el texto es demasiado largo.

    fix for long non-text content breaking IE sidebar float

    Aparentemente, no están en la tuya así que se las agregamos:

    #main-wrapper {
    ................................ las que hay
    word-wrap: break-word;
    overflow: hidden;

    }

    #sidebar-wrapper {
    ................................ las que hay
    word-wrap: break-word;
    overflow: hidden;

    }

    Responder
    Mr. Prado  

    Ahora sí :)

    Aún hay una palabra que sale mal cortada, pero supongo que ante eso no se puede decir nada (para que me entienda, una de las categorías es nostalgia y sale en una linea nost- y abajo -algia)

    En cualquier caso muchísimas gracias por su ayuda.

    Seguiré dándole la lata otro día (en España ahora hay que dormir) ya que me gustaría también conseguir modificar las configuraciones de pantalla (los botones de 800x600 y 1024x768 que usted tiene). Ya encontré el post que lo explica y lo marqué para mañana ponerme manos a la obra (aunque parece complicado así que me tendrá de vuelta, supongo).

    También pretendo dos cosas más:
    1- Insertar el traductor de google de inglés para la página (ya que el mío que creo que usted desarrolló con Solrac Korner, no es malo pero me inclino por el otro aunque sólo sea para inglés).

    2-Conseguir que la ventana desplegable de mis "post anteriores" no tenga que recargar la página entera cada vez que alguien quiera ver los posts de un mes concreto. El caso es que lo que pretendo a veces lo hace, pero la mayoría no.

    En fín, mañana será otro día. Perdón por la parrafada e infinitas gracias.

    Responder
    JMiur  

    Bueno, hemos avanzado un poco :D

    Lo evidente es que la plantilla tiene algunos problemas y que nunca fue probada en ambos navegadores. Tal vez, las modificaciones o ampliaciones que quieres hacer ayuden a irlas descubriendo y solucionándolas poco a poco.

    Paciencia y cuenta conmigo para cualquier cosa ;)

    Responder
    Andrés  

    Lo acabo de poner en mi blog. Funciona muy bien y es bastante configurable. Una buena manera de facilitar la navegación.

    Muy buen dato. Gracias.

    Saludos

    Responder
    JMiur  

    Me alegro que no tuvieras problemas, Andrés. Gracias por el comentario :)

    Responder
    domox  

    he tratado ya varias veces y no me sale la nube en www.huaymimama.net, lo extraño es q lo probe en un blog de pruebas q tengo y ahi me sale todo bien no c q es lo q pasa. copio y pego todo bien. creo!!!

    Responder
    JMiur  

    Pués, acabo de entrar en tu blog y se ve perfectamente. Está entre Comentarios Recientes y Archivos :X

    Responder
    Anónimo  

    Muchísimas gracias por este post. Creo que ha sido el mejor explicado y expuesto.

    (:

    Responder
    Unknown  

    Es curioso mi código de la nube de etiquetas está exacto a lo que tu explicas pero se me ponen una debajo de otra.

    Snif! Snif! Nada me sale bien!?!

    Responder
    JMiur  

    No lo veo en tu blog, ¿puedes ponerlo online? Puede ser que no haya ancho suficiente para que entren y por eso se ve una debajo de la otra, debería poder verlo para intentar solucionarlo.

    Responder
    Unknown  

    Hola jmiur:
    intento colocar la nube de etiquetas pero no puedo visualizar ni cargar la plantilla a consecuencia de un error que no puedo encontrar ni darme cuenta,te agradecería si pudieras ayudarme a solucionarlo.-
    Cuando intento visualizar sale esto:
    No hemos podido obtener una vista preliminar de su plantilla.
    Por favor, corrige el siguiente error y envía la plantilla de nuevo.
    La plantilla no es válida porque la etiqueta "div" aparece dentro de la etiqueta "head".
    Te felicito por tu dedicación y gran producción

    Responder
    JMiur  

    En este truco no hay ninguna etiqueta DIV que se coloque dentro del head. Imagino entonces que se trata de una etiqueta que ya está desde antes.

    Fíjate que entre <head> y </head> no haya nada que comience con <div.

    Cualquier cosa, si no lo encuentras, dime como puedo ver tu blog online o envíame la plantilla por mail y me fijo. Lo seguro es que no puede ser algo de este truco porque no tiene esas etiquetas.

    Responder
    Unknown  

    Gracias jmiur:
    tus sugerencias despejaron mis nubes,tenías razón correspondía a un script anterior,corregí y ya está implementado,disculpa pero no me dí cuenta de la desaparicion de videoteca,cineavir.blogspot.com,que también he corregido.-
    Realmente eres el mejor mago de los trucos y tu guía es invalorable,gracias nuevamente de una argentino en Israel

    Responder
    JMiur  

    Me alegro que se solucionara :)

    Responder
    Unknown  

    Hola Jmiur, gracias al comentario nº 9 agregando esas dos lineas en crosscol que era donde estaba mi nube ahora se ve por fin!!!! se ve bien en IE.
    Ocupo Firefox la mayoría de las veces y en casa para navegar rápido ahora chrome porque no tiene el buscador interno de mozilla que facilita la búsqueda al interior de la plantilla ;)

    Muchas gracias, que tengas un lindo fin de semana largo ;)

    besos ronroneados

    Responder
    JMiur  

    Me alegro que sirviera, Pau :D

    Responder
    Anónimo  

    gracias, funcionó a la perfección y para mi sorpresa se vio bien en IE

    Responder
    JMiur  

    Jajajajaja. Bueno, eso puede ser casualidad, Winjaime :D

    Responder
    G14NT  

    alguien sabe como solucionar el tema de que se ve una debajo de otra?????? me estoy volviendo locooo

    Responder
    JMiur  

    Que se vea una debajo de otra ¿qué cosa?

    Responder
    Lar2  

    no me funciona
    se ve apenas las etiquetas simples... no gira...

    no se que pasa y ya lo he intentado hijuemil veces....

    ayuda por favor

    Responder
    Lar2  

    no puedo hacerlo funcionar

    por favor ayuda......


    no se mueven y
    ya lo he intentado demasiado..
    ayuda por fa......

    Responder
    JMiur  

    ¿Y de donde has sacado la idea que gira?

    Responder
    Amador López Criado  

    Hola J. Miur desde Alcalá de Henares, en España. Desde hace pocos meses llevo visitando tu blog y aprendiendo cosas, aunque, hasta ahora no había dejado ningún comentario. El motivo de éste es pedirte consejo. Acabo de poner una nube de etiquetas siguiendo la explicación, pero no consigo que funcionen los enlaces. Esta es la direción del blog: www.cepaalcala.blogspot.com ¿Alguna sugerencia? Salud y felicidad.

    Responder
    JMiur  

    Amador:
    Creo que el problema es que has colocado el nombre del blog con una barra al final y eso hace que al completarse la URL haya dos barras. en lugar de:

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

    escribe:

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

    Eso deberia solucionar el problema.

    Responder
    Amador López Criado  

    En efecto. Problema solucionado. Gracias y buen día.

    Responder
    JMiur  

    Me alegro, Amador :)

    Responder
    egoloco  

    JMiur, apareci en esta entrada :D Sobre un comentario que vi en esta entrada... el usuario decia que queria que giren las etiquetas. Supongo que creyo que era como el de WordPress, que gira cada etiqueta al pasar el mouse sobre ellas, como si bailaran, una vez lo vi en un blog de Blogger :-|

    Responder
    JMiur  

    egoloco: Pués ese es otro método, de allí mi pregunta :D

    Ese efecto se llama Cumulus. Puede aplicarse a a Blogger de varias formas. Esta es una y esta es otra. En ambas entradas hay enlaces a otros sitios con variantes.

    Responder
    HaCk CrAcK  

    JMiur no habria alguna forma de ordenarla de mayor entradas a menor entradas y no alfabeticamente?

    Responder
    JMiur  

    No lo he probado pero, el elemento Labels permite auq ese lo ordene alfabétiamente o por frecuencia o sea, de mayora menor cantidad. Eso lo haces editándolo en Diseño | Elementos de la página. No se pierde nada probando :)

    Responder
    HaCk CrAcK  

    Es verdad, que tonto de mi parte, se me habia pasado, ya lo cambie y funciona a la perfeccion! Gracias
    Si quieres pudes darle un vistaso en mi blog Codigobasura, quedo con un efecto de degradado bastante bueno!

    Responder
    JMiur  

    Perfectoo, HaCk CrAcK :D Muy bueno eso del degradado.

    Responder
    bellasysexy@gmail.com  

    hola amigo quiero que se muestren 3 entradas por etiqueta... y cambie en el script esto
    data:label.url

    data:blog.homepageUrl + "search/label/" + data:label.name + "?max-results=3"

    y no cambia me sigue mostrando 20 entradas por etiqueta no se donde podria estar la falla....

    Responder
    JMiur  

    No veo que ocurra eso en tu blog. Tanto en la sidebar como en las etiquetas que están debajo de las entradas se muestran 3.

    Responder
    Bonzu Pipinpadaloxicopolis III  

    Veo en Blogger Buzz que ya se puede elegir cuáles etiquetas mostrar, elegir la nube o el listado desde el mismo gadget. No me sorprende que tarden tanto en cambios sencillos. ;-)

    Responder
    Juan Carlos P  

    Hola JMiur

    Yo uso desde hace tiempo esta nube, pero quisiera saber si es posible hacer que algunas de las etiquetas no aparezcan, así como la nube de Blogger que puedes elegir cuáles etiquetas aparecen y cuáles no.

    Es que yo quiero seguir usando esta nube de etiquetas y no la de Blogger :)

    Porfa ojalá que sea posible porque sino me verá forzado a usar la de Blogger :(

    Una abrazo!

    Responder
    JMiur  

    Supongo que es posible, habría que modificar el script para hacer eso pero no sabría decirte cómo.

    Responder
    Rosi  

    me costo muchisimo, pero lo logré. en la columna derecha aparece el gadget ¨cloud¨, muy bonito, pero no me muestra ninguna etiqueta.... mi blog es despliegatusalasahora.blogspot.com
    gracias... ro

    Responder
    JMiur  

    Por lo que veo, el script está colcoado todo en una sola línea y eso hace que no funcione; trata de que quede tal como lo ves en esta entrada. Con líneas separadas.

    Responder
    Rosi  

    gracias. hice lo que me dijiste, pero ahora me dice: 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-contents" must be terminated by the matching end-tag "".
    revise todo y creo que esta como en la entrada...

    no se que hacer..no entiendo nada de esto..
    si te sirve para ayudarme que te copie aca lo que hice..nose..
    gracias.ro

    Responder
    JMiur  

    Pués acabo de copiar lo mismo en un blog auxiliar y no veo que se produzca ningún error de sintaxis.

    Responder
    Rosi  

    ah ya no solucione gracias! quedo pechochichimo

    Responder

    ¿Quiere dejar un comentario?

    recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

    Nota: sólo los miembros de este blog pueden publicar comentarios.

    Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

    Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

     
    CERRAR