Nube de etiquetas

Una nube de etiquetas convierte el listado habitual de nuestras etiquetas en una nube mucho más gráfica.

Antes de empezar tenemos que añadir en la sección elementos de la plantilla, un nuevo elemento "etiquetas" y, por supuesto, hemos de tener etiquetados nuestros post. Si estamos usando ya un elemento de etiquetas, por ejemplo, para nuestro menú de pestañas, no importa, puede añadirse otro nuevo para usar con la nube.

[1] Vamos a nuestra plantilla - html y no expandimos la plantilla de artilugios. Localizamos esto: ]]></b:skin> y justo antes, o lo que es lo mismo, al final del CSS, colocamos este código que definirá el estilo de nuestra nube:

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


[2] Volvemos al mismo sitio de antes: ]]></b:skin> solo que ahora hemos de colocar el código después de esto, es decir, antes de </head>:

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


Cambiamos YOURBLOG por el nombre de nuestro blog.

[3] Buscamos en la plantilla esta línea de código, tendremos en cuenta que si hemos añadido un nuevo elemento de etiquetas, el elemento se verá como label2 :

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


Hemos de reemplazar esa línea por todo este código:

<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 -----------------
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 = "";
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>

Nota:
Para que el código funcione correctamente tendremos que cerciorarnos de que al menos, una de las etiquetas, tenga mas de una entrada y no debe aparecer en las etiquetas ninguna comilla ".

PARA PONER LA NUBE DEBAJO DE LA CABECERA:

Ponemos debajo del Header:

<b:section class='header' id='header' maxwidgets='1'>
...
</b:section>


este código:

<b:section class='nube' id='nube' maxwidgets='1'>
NUBE DE ETIQUETAS
</b:section>


Y después cortamos el código del widget de la nube:

<b:widget id='Label1' locked='false' title='Label Cloud' type='Label'>
...
</b:widget>


y lo pegamos donde pusimos NUBE DE ETIQUETAS


Por último cambiamos esto en el CSS:

#labelCloud {text-align:center;font-family:arial,sans-serif;}

por:

#labelCloud {text-align:center; font-family:Georgia,Serif; border: 1px black solid; padding: 10px 10px; margin: 5px 0px;}


para cambiar el tipo de letra, el padding, el margen y el borde.

Sin comentarios

» Escribe tu comentario aquí:


Si quieres hacer alguna consulta sobre tu blog habilita tu perfil o deja un enlace a tu blog:
<a href="url-de-la-página">Texto enlace</a>

» O utiliza el antiguo formulario


Los comentarios están siendo moderados y publicados lo antes posible.



jesgo23 ©2008/2009 | Plantilla Blogger | Diseño jesgo Creative Commons License