Nube de etiquetas ( label cloud ) en beta.blogger

Asegúrate de hacer un backup de tu plantilla antes de empezar y de mirar los 2 últimos párrafos de la entrada antes de continuar.

Ve a la sección layout de beta.blogger. En 'Page Elements' crea una nueva sección de 'Tags'. Ahora ve a Edit HTML y no marques "expands widgets".


El código consta de tres partes. Una para la hoja de estilos, otra para la configuración,
y otra para el propio widget.

Vamos con la primera. Tienes que buscar la etiqueta

]]></b:skin>

y poner el código justo 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{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}

Vamos con la segunda, estamos con la misma etiqueta de antes

]]></b:skin>

Pero esta vez colocaremos el código después de esa etiqueta y antes de </head>a por ellos:

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

Todo esto puede ser cambiado, pero por ahora preocúpate de cambiar "YOURBLOG" por el nombre de tu blog.
var lcBlogURL = 'http://YOURBLOG.blogspot.com';



Y vamos con la tercera (y mira que me gustan poco las sevillanas), se trata de que busques más abajo en tu plantilla el siguiente código (+ó-)


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


Ahora tienes que seleccionar por entero la línea y cambiarla por todo lo 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 -----------------
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>

*Os recomiendo que copieis las líneas de código del artículo original, además en phydeaux3, podéis encontrar mucha más información sobre los parametros del widget, buena suerte y ya sabéis a dónde escribirme.

**Esta entrada sólo pretende ser una traducción de andar por casa para los nuevos beta.bloggers. Mañana, o en poco tiempo, me pondré a explicar lo que entienda sobre las nuevas plantillas con XML pero probablemente empezaré con la distribución que es más sencillo. Pretendo ir explicando todos los cambios que haga en el blog a medida que los vaya haciendo; espero que le valga a alguien de algo.