24 abr. 2009

Nube de Etiquetas

Cuando tenemos un blog, la tentación de agregar Gadgets a diestro y siniestro llega a dominarnos, pero hay que tener en cuenta que cuando mas cosas agregamos el blog carga mas lento y eso es muy molesto. Hay que saber identificar aquellas modificaciones que valen la pena de las que solo se ven bonitas, una de las que valen la pena es el hack "Nube de Etiquetas".

Para agregarlo a la plantilla solo hay dos requisitos:

► Agregar el elemento "Etiquetas" en la plantilla.
► Tener Post a los que les hayan agregado etiquetas. (al menos 2 etiquetas)

Primero deben ir a "Elementos de la Pagina" y en la sidebar agregar el elemento Etiquetas.



Luego hay que ir a "Edición HTML" y agregar el siguiente código antes de ]]></b:skin>:

/* 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}


Lo que acabamos de hacer es agregar el estilo base para nuestra Nube de Etiquetas, ahora hay que expandir los artilugios y buscar el siguiente código:

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

[... Muchas líneas de código ...]

</b:widget>

Y reemplazarlo por este:

<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>


Solo queda un ultimo paso, agregar el script, lo mejor es agregarlo antes de <head>, exactamente como en el siguiente ejemplo. Deben agregar el codigo entre las etiquetas que estan en color verde:

]]></b:skin>

<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>

<head>

Cambiar "NOMBREdelBLOG" por el nombre de tu Blog
Aquí se establecen los colores de la etiqueta que tiene mas y de la que tiene menos Post
Tamaño de fuente para la etiqueta que tiene mas y la que tiene menos Post

Listo, guarden los cambios y conteplen su "Nube de Etiquetas". No esta de mas decir que cuantas mas etiquetas tengas, mejor se vera el efecto nube.
Animate! Se el primero en comentar!
¿Desea hacer un comentario?

Diseño: Shark_Bloody
MDEQ® - Todos los derechos reservados