Beta Hacks - Label Cloud

Esta es la primera entrada de una serie donde podrán verse las modificaciones (hacks) hechas a la plantilla.

Blogger Beta Label Clouds (Nube de Etiquetas) fue desarrollado por phydeaux3 y lo que sigue es una traducción libre del código necesario para implementarla.

En todos los casos, es aconsejable hacer una copia de seguridad ANTES de hacer cualquier cambio en la plantilla.

REQUISITOS MÍNIMOS: el elemento ETIQUETA debe haber sido incorporado a la plantilla. Esto puede hacerse en 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, unas declaraciones de estilo, 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 del tag <b:skin> en el HEAD de la plantilla. Lo más fácil es encontrar el final de la sección ]]></b:skin> y copiar el código 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 script también se debe colocar en el HEAD de la plantilla pero fuera de las declaraciones de estilo. Nuevamente, lo mejor es encontrar el tag ]]></b:skin> y copiar el código DESPUES de esa línea pero ANTES del tag de cierre </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: todos los valores pueden ser cambiados en cualquier momento y se explican más adelante pero SE DEBE cambiar la primera línea.

var lcBlogURL = 'http://NOMBREdelBLOG.blogspot.com';

para que coincida con la url correspondiente al blog donde va a ser utilizado.

OJO: el formato no debe modificarse, debe mantenerlo entre comillas simples (' ').

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, tendrá un formato parecido a esto:

<b:widget id='Label1' locked='false' title='Labels' type='Label'>
 ... varias líneas de código ...
</b:widget>

en cuyo caso será necesario seleccionar desde el comienzo hasta el final del tag widget.

Copiar el siguiente código y reemplazar la/las líneas.

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

Listo, el elemento del blog debería verse como una nube. En caso contrario, algo no fue hecho correctamente.

BUGS: por lo menos UNA etiqueta debe tener más de UNA entrada, en caso contrario, el script provoca una falla; además, ninguna de las etiquetas debe contener comillas (").

PERSONALIZAR: los colores y tamaños son configurables mediante las variables del script del HEADER.

var maxFontSize = 20;
tamaño de la fuente (en pixeles) de la etiqueta con más entradas
var maxColor = [0,0,255];
color (en formato RGB) de la etiqueta con más entradas
var minFontSize = 10;
tamaño de la fuente (en pixeles) de la etiqueta con menos entradas
var minColor = [0,0,0];
color (en formato RGB) de la etiqueta con menos entradas
var lcShowCount = false;
puede ser false (default) o true y permuta el contador de etiquetas

IMPORTANTE: al cambiar los colores debe mantenerse el formato RGB entre corchetes ([ ]) y los valores deben estra separados por comas.

El valor por defecto es AZUL para max y NEGRO para min que funciona perfectamente cuando el fondo es claro. Pero puede usarse cualquier valor. Por ejemplo, esta plantilla usa los valores [64,200,255] y [32,128,128] respectivamente.

Cualquier etiqueta intermedia tendrá un tamano y un color basado en su cantidad. El resultado final dependerá de los valores máximos y mínimos elegido pero tambien de otros muchos factores tales como la cantidad de etiquetas y la diferencia de cantidades entre ellas. Tres etiquetas no harán un gran efecto, pero muchas con igual cantidad de entradas iguales, tampoco.

Hay algunas declaraciones de estilo que también pueden ser modificadas:

#labelCloud {text-align:center; font-family: arial,sans-serif;}
la alineación puede ser text-align:justify;, text-align:right; o text-align:left;
la fuente puede ser cualquiera

#labelCloud .label-cloud li {display:inline; ...}
la parte más importante display:inline; puede modificarse por display:block; para obtener un efecto 'Flat' (cada etiqueta en una línea)

#labelCloud .label-count {...}
si se pone lcShowCount en true, establece el color y tamaño de los contadores

NUBE DE ETIQUETAS (Label Cloud)

phydeaux3 Homepage

Code for Beta Blogger Label Cloud

Beta Blogger Label Cloud