Es requisito indispensable que vuestro blog posea el widget de las etiquetas para poder visualizar la nube de tags. Si no disponéis de el, es muy sencillo ubicarlo. Id al panel de control de vuestro blog, luego en la pestaña Diseño en Elementos de la página hacéis clic en Añadir un gadget y elegís de la lista el de Etiquetas.
Ahora antes de continuar, es recomendable por no decir obligatorio que hagáis una copia de seguridad de la plantilla antes de realizar cualquier cambio.
A continuación, situados en la pestaña Diseño del panel de control de nuestro blog, nos dirigimos al apartado Edicion de HTML. Una vez allí, buscamos en nuestra plantilla la siguiente instrucción, ]]></b:skin>, que nos va indicar el cierre de la sección CSS. Justo antes debemos incluir el siguiente código de estilo que tendrá la nube de etiquetas, esta a su vez puede ser modificada como ya indicaremos mas adelante.
/* Estilo nube de etiquetas (CSS)Lo siguiente sera incluir el código que configurará el funcionamiento de la nube de etiquetas que al igual que el estilo puede ser modificada como indicaremos al final del post. El siguiente trozo de código deberemos incluirlo justo después de la misma instrucción anterior, ]]></b:skin> pero antes de la instrucción del cierre de la cabecera, </head>.
----------------------------------------------- */
#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}
<script type='text/javascript'>Por último, modificaremos el gadget de las etiquetas que ya teníamos o que hemos añadido como se explico al comienzo del post para convertirlo en una nube de tags. Para ello debemos buscar la siguiente linea, <b:widget id='Label1' locked='false' title='Labels' type='Label'/> que nos indica el widget de las etiquetas. Para que os sea mas sencilla su búsqueda apretad las teclas Ctrl + F y os aparecerá el cuadro de búsqueda.
// Variables de la nube de etiquetas
var cloudMin = 1;
var maxFontSize = 20;
var maxColor = [0,0,255];
var minFontSize = 10;
var minColor = [0,0,0];
var lcShowCount = false;
</script>
Otra cosa que debéis tener en cuenta es, si habéis marcado la opción de Expandir plantillas de artilugios, la linea anterior os aparecerá desplegada, por lo que a la hora de sustituir el código que mostraremos a continuación deberéis hacerlo por todo el código que aparezca entre <b:widget id='Label1' locked='false' title='Labels' type='Label'/> y <b:widget/>.
<b:widget id='Label1' locked='false' title='Label Cloud' type='Label'>Una vez concluido este paso ya podremos hacer una vista previa de nuestra nube, si no se os visualiza correctamente volved a realizar los pasos desde el principio y cercioraros que realizan bien cada paso. Otros fallos de visualización pueden ocurrir cuando no tenéis mas de una etiqueta asignada a algún post de vuestro blog o cuando vuestras etiquetas incluyen caracteres no comunes.
<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>
Ahora entra en juego la imaginación de cada uno y toca modificar las variables y los estilos por si alguno se ha quedado descontento con el diseño que trae por defecto. Por tanto empezaremos explicando para que sirve cada atributo del código de variables.
var cloudMin= 1; -- 1 para mostrar todas las etiquetas. Un numero mayor para mostrar ese numero limitado de etiquetas.
var maxFontSize = 20; -- Establece el tamaño máximo en px (píxeles) que tendrá la etiqueta con el mayor numero de artículos.
var maxColor = [0,0,255]; -- Establece el color en formato RGB que tendrá la etiqueta con el mayor numero de artículos.
var minFontSize = 10; -- Establece el tamaño mínimo en px (píxeles) que tendrá la etiqueta con el menor numero de artículos.
var minColor = [0,0,0]; -- Establece el color en formato RGB que tendrá la etiqueta con el menor numero de artículos.
var lcShowCount = false; -- True, para mostrar el numero de post de cada etiqueta, false por defecto.
Por ultimo os daremos unas pautas básicas para que vosotros podais modificar el estilo de la nube de etiquetas, para ello es necesario modicar el codigo de estilo o CSS.
#labelCloud {text-align:center; font-family:arial,sans-serif;} -- El primer atributo, text-align, puede tener los siguientes valores: left, center y right, segun la alineacion que quieras de las etiquetas en la nube. El segundo atributo, font-family, configura el tipo de letra que se usará para mostrar las etiquetas.
#labelCloud .label-cloud li{display:inline;background-image:none !important;padding:0 5px;margin:0;vertical-align:baseline !important;border:0 !important;} -- El primer atributo tiene dos valores, el que viene por defecto y block, de esta modo se consigue una etiqueta en una linea separada, el segundo atributo, background-image, es si deseas que de fondo aparezca una imagen, para ello debereis sustituir none por la url de la imagen en cuestión entre comillas. El tercer atributo, padding, se usa para dar relleno y por consiguiente mas separacion entre las etiquetas. El cuarto atributo, margin, es similar al padding. El ultimo atributo, border, se usa para lo que indica, para visualizar un borde, ahora esta desactivado pero su configuracion es la siguiente border: 3px solid #FFF; siendo el primer parametor el grosor, el segundo el estilo del borde y el tercero el color, Podeis ver mas estilos de borde en el siguiente post.
Las demas lineas de estilo no son relevantes para modificar el diseño.
Espero que os haya sido de utilidad y hayan encontrado esta guia bastante sencilla. Si os encontrais con algun problema no dudeis en comentarlo que os ayudaremos en todo lo posible. Espero que lo disfruten.
Via phydeaux3
