Desde Gemablog encontramos esta maravilla
Nube de ETIQUETAS
Antes de aplicar la nube comprobaremos que tenemos activada la casilla para las etiquetas y etiquetadas las entradas del blog (Al menos una etiqueta por categoría) podemos activar las etiquetas desde Plantilla/Añadir un elemento de página buscamos “Etiquetas” lo añadimos al blog y guardamos.
Para añadir la nube de etiquetas nos situamos en Plantilla/En edición HTML y “expandimos la plantilla de artilugios”
Buscaremos:
]]></b:skin>
Justo antes añadiremos el siguiente código:
/* Etiquetas
———————————————– */
#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}
Después de ]]></b:skin> y antes de </head> añadiremos esta otra parte:
<script type=’text/javascript’>
// Label Cloud User Variables
var cloudMin = 1;
var maxFontSize = 20;
var maxColor = [0,0,255];
var minFontSize = 10;
var minColor = [0,0,0];
var lcShowCount = false;
</script>
Ahora vamos a buscar lo siguiente:
<b:widget id=’Label1′ locked=’false’ title=’Etiqueta’ type=’Label’>
<b:includable id=’main’>
<div id=’menu4′>
<ul>
<li><a expr:href=’data:blog.homepageUrl’><span>Inicio</span></a></li>
<b:loop values=’data:labels’ var=’label’>
<li><a expr:href=’data:label.url’><span><data:label.name/></span></a></li>
</b:loop>
</ul>
<!– <b:include name=’quickedit’/> –>
</div>
</b:includable>
</b:widget>
(Si en tu plantilla no es igual, busca la primera línea y sustituye hasta donde termine el widget es decir desde <b:widget id=’Label1′ locked=’false’ title=’Etiqueta’ type=’Label’> hasta </b:widget>)
Todo ese código anterior de color azul lo sustituimos por este otro:
<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 —————–
// Cloud function s() ripped from del.icio.us
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 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])
}
}
var ta=cloudMin-1;
tz = labelCount.length – cloudMin;
lc2 = document.getElementById(‘labelCloud’);
ul = document.createElement(‘ul’);
ul.className = ‘label-cloud’;
for(var t in ts){
if(ts[t] < cloudMin){
continue;
}
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 = ‘/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>
Si lo añadiste correctamente en vista previa ya puedes ver el efecto, los colores del texto pueden ser cambiados por otros más acorde con tu blog al igual que el tamaño de letra en:
var maxFontSize = 20;
var maxColor = [131, 111, 255];
var minFontSize = 10;
var minColor = [0,0,0];
var lcShowCount = false;
El color de letra puedes adecuarlo en “var minColor” y “var maxColor”
el tamaño del texto en var maxFontSize y var minFontSize
El resultado es la nube de etiquetas debajo del logo en este blog.
El color está en formato RGB si deseas cambiarlo aquí y aquí encontrarás colores en formato RGB
