Nube de tags (etiquetas)


Son varios los que me preguntan cómo poner las etiquetas como las que se ven en mi sidebar, en forma de nube. No es difícil conseguirlo, pero sí requiere algo de paciencia.
Bien empecemos:

♠ Ante todo debes tener actiavadas las etiquetas; sino las tienes, ve a Diseño/ Elementos de la página/ Añadir un gadget / Etiquetas y damos click a guardar.
♠ Ahora nos dirigimos a Diseño/ Edición de HTML y damos click a Expandir plantillas de artilugios.
♠ Con ayuda de CTRL+F buscamos: ]]></b:skin> y antes de éste pegamos:

/* 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, nuevamente con ayuda de CTRL+F, buscamos </head> y antes de este pegamos:
<script type='text/javascript'>

// Label Cloud User Variables

var cloudMin = 1;
var maxFontSize = 20;
var maxColor = [204,74,122];
var minFontSize = 10;
var minColor = [200,112,12];
var lcShowCount = false;
</script>

Explicación:
» var maxFontSize: tamaño de fuente de las etiquetas que tengan varias entradas.
» var maxColor: color de las etiquetas que tengan varias entradas.
» var minFontSize: tamaño de fuente de las etiquetas que tengan pocas entradas.
» var minColor: color de las etiquetas que tengan pocas entradas.

♠ Bien, ahora en la plantilla buscamos lo siguiente:

<b:widget id='Label1' locked='false' title='Etiqueta' type='Label'>
<b:includable id='main'>
<div id='menu4'>
<ul>
<li><a expr:href='data:blog.homepageUrl'><span>Inicio</span></a></li>
<b:loop values='data:labels' var='label'>
<li><a expr:href='data:label.url'><span><data:label.name/></span></a></li>
</b:loop>
</ul>
<!-- <b:include name='quickedit'/> -->
</div>
</b:includable>
</b:widget>

Quizás el código de tu plantilla sea diferente a este, en todo caso fíjate en la primera línea y la última.
Selecciona todo el código anterior, bórralo y sustitúyelo por el 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 -----------------
// 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>

♠ Mira en vista previa y si todo salió bien, damos click a guardar.

Cualquier duda será bienvenida!

6 opinaron:

G

Era lo que buscaba; gracias por la ayuda :)

Responder
squirrel

Muy bueno, lo voy a aplicar aunque me da miedo meterme con la plantilla HTML.

Besos :)

Responder
Genial

Muy bueno Jéssica; una forma muy bonita de mostrar las etiquetas porque se ve alfo feo cuando es en forma de lista larga.
Voy a usar esta nube.

Saludines ;)

Responder
Jéssica YK

» G: me alegra que te sriva :)

» squirrel: no hay que tenerle miedo a la plantilla, pero sí debes usar siempre vista previa antes de guardar los cambios.

» Genial: depende, si hay pocas etiquetas estaría bien en una lista; pero si son muchas mejor se ven en una nube de etiquetas.

S@lu2

Responder
Doctora Lin.

me ha gustado mucho este blog ya que me has sido de mucha ayuda para hacer el mio, gracias y espero y sigas poniendo mas cosas:D

Responder
Jéssica YK

» Doctora Lin.:
Gracias por tu visita, y sigue conectada al blog porque siempre publico nuevas entradas :)

S@lu2

Responder

Por favor, trata de tener habilitado tu perfil (has click en "Comenta con el antiguo editor" para iniciar sesión) o deja un enlace a tu blog escogiendo la opción "Nombre/URL", procura no dejar comentarios Anónimos.
Nota: Si es que se presenta algún problema con el formulario de comentarios, sólo has click en "Comenta con el antiguo editor"

Gracias por participar en el blog.

inicio