NUBE DE ETIQUETAS (Label Cloud)

En mi paso de Blogger a Blogger Beta me he encontrado con muchas dificultades, existen muchos blogs que tienen widgets y explicaciones acerca de como usar las nuevas funcionalidades pero la mayoria se encuentran en ingles, yo por mi parte intentare hacer una libre traducción para los hispanoparlantes.


Blogger Beta Label Clouds (Nube de Etiquetas) fue desarrollado por phydeaux3

Como siempre antes de realizar cualquier cambio a la plantilla es aconsejable hacer una copia de seguridad (backup).

Primero que nada no olviden incorporar el elemento ETIQUETA a la plantilla. Par esto vayan a 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, una parte de estilo (style), 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 de la sección HEAD de la plantilla. Lo más fácil es encontrar el final de la sección ]]></b:skin> y copiar el siguiente código junto 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 seccion script también se debe colocar dentro del HEAD de la plantilla pero fuera del style. Nuevamente encontrar la parte ]]></b:skin> y copiar el código DESPUES de esa línea pero ANTES del /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: [ var lcBlogURL = 'http://NOMBREdelBLOG.blogspot.com';] debe ser modificada la Url.

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, debe verse parecido a esto:


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

... varias líneas de código ...

</b:widget>


Seleccionar desde el comienzo hasta el final del widget. Copiar el siguiente código y reemplazar la/las líneas:

[+/-] Ver código


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


Y listo, guardar los cambios y ver el blog, las etiquetas (labels) deberian verse como una nube.

Para mas información con respecto a este widget puedes visitar Code for Beta Blogger Label Cloud (english)