En este caso vamos a poner en nuestro blog una Nube de Tags o nube de labels o etiquetas... O simplemente una nube con las palabras clave de cada uno de nuestras entradas o posts.
Si siguen las instrucciones al pie de la letra no deberia pasar nada, pero por las dudas descarguen la plantilla a su compu.
De más está decir que si no tienen activada las etiquetas(tags) o ninguno de sus post tienen etiquetas no va a funcionar, además por lo menos 1 post debe tener más de una etiqueta y ningun post debe tener etiquetas con comillas...
Si siguen las instrucciones al pie de la letra no deberia pasar nada, pero por las dudas descarguen la plantilla a su compu.
De más está decir que si no tienen activada las etiquetas(tags) o ninguno de sus post tienen etiquetas no va a funcionar, además por lo menos 1 post debe tener más de una etiqueta y ningun post debe tener etiquetas con comillas...
Primero declaremos los estilos que utilizaremos, es decir, entre los tags <b:skin> y <b:/skin>, dentro del <head>. Si les resulta complicado busquen el final:]]></b:skin> Y PONGANLO ANTES!, no despues.
/* 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}
----------------------------------------------- */
#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 hay que poner el Script Java, que cambia los valores de la nube. Como es un script, no va dentro de las declaraciones de estilo (<b:skin>) sino despues, pero siempre en el <head>. Traducción para el que no caza una... Despues de ]]></b:skin> y antes de </head>.
script type='text/javascript'>
// Label Cloud User Variables
var lcBlogURL = 'http://TUBLOG.blogspot.com';
var maxFontSize = 20;
var maxColor = [0,0,255];
var minFontSize = 10;
var minColor = [0,0,0];
var lcShowCount = false;
</script>
// Label Cloud User Variables
var lcBlogURL = 'http://TUBLOG.blogspot.com';
var maxFontSize = 20;
var maxColor = [0,0,255];
var minFontSize = 10;
var minColor = [0,0,0];
var lcShowCount = false;
</script>
Es NECESARIO que cambies TUBLOG por el verdadero nombre del blog donde la vas a insertar.
Ultimo paso, debes buscar dentro de la plantilla de tu página(sin expandir artilugios) esta línea:
<b:widget id='Label1' locked='false' title='Labels' type='Label'/>
Y reemplazarla por:
<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>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>
<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>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>
Si hiciste todo bien, ya podes probar y deberia salir la nube. Ahora vamos a editarla cambiando el Script que pegamos antes.
var maxFontSize = 20;
Es el tamaño de fuente de la etiqueta con más entradas.
var maxColor = [255,255,255];
Es el color de la etiqueta con más entradas en RGB
Ej: Rojo= [255,0,0].
var minFontSize = 10;
Es el tamaño de de la etiqueta con menos entradas.
var minColor = [0,0,0];
Es el color de la etiqueta con menos entradas también en RGB.
var lcShowCount = false;
Si ponemos "true" te muestra el número(contador) de etiquetas. No es usual.
El código de la Nube automáticamente le asigna un tamaño y color proporcional a la cantidad de entradas de esa etiqueta.
De la parte de CSS se puede modificar:
#labelCloud {text-align:center;font-family:arial,sans-serif;}
Donde podemos cambiar la alineación por:
text-align:right; text-align:left; o text-align:justify;
Y la fuente también
#labelCloud .label-cloud li{display:inline;background-image:none !important;padding:0 5px;margin:0;vertical-align:baseline !important;border:0 !important;}
Podemos cambiar display:inline por display:block para que las etiquetas salgan separadas por una línea(deja de ser una nube).
Y en backround-image:none, si reemplazamos por backround-image: url('http://urltuimagen.com') pueden experimentar, al igual que los padding y margin.
#labelCloud .label-count
Si pusimos true en lsShowCount podemos modificar la fuente y color del contador.
Cualquier cosa, comenten.
Fuente
6 Comentario/s:
Que grande che. Tenés toda la cancha.
Además, tus cajas para el código tienen la mejor coloración que vi hasta ahora ^^
Maestro, no sabes cuánto te lo agradezco. Me has hecho un "parote" (como decimos acá en México). Excelente post.
Wow, justo loqeu buscaba, ahora solo tengo que probarlo.
Gracias.
* lo que buscaba
Muchas gracias por el código.
Solo una cosa: Creo que te olvidaste una "<" en el código Script Java ¿no?
< script type='text/javascript'>
Un abrazo
Felicidades por tu trabajo.
Excelente, me ahorraste muchas horas de búsqueda. Sólo un pequeño ajuste, falta el parámetro "<" al inicio de la segunda tabla a insertar. Salvo eso, perfecto.
Publicar un comentario