lunes, 9 de marzo de 2009

Nubes de etiquetas

Autor: admin
Las nubes de etiquetas, permiten ordenar las etiquetas de nuestro blog con la finalidad de mostrar a los usuarios los diferentes temas de los que trata nuestra web. Para hacernos una idea os voy a mostrar una imagen en la que se aprecia la diferencia. En la imagen de la derecha podéis observar un ejemplo de nube de etiquetas. En ella lo que se hace es asignar un tamaño u otro de letra en función del número de entradas que haya para una entrada concreta ayudando a los buscadores a determinar cuales son los elementos más importantes de nuestra página. Desde el propio blogger los pasos serán los siguientes:

0. En caso de que no tengas ya etiquetas en tu blog, ves a la pestaña Diseño, y selecciona Elementos de Página, pulsa Añadir nuevo elemento en la columna de la derecha, y busca “Etiquetas”. Añádelo, guarda y comprueba que ya existe un apartado de etiquetas en tu blog.

1. Ves al panel de tu blog, selecciona la pestaña Diseño, y una vez ahí selecciona la opción “Edición de HTML”. Una vez allí antes de comenzar a hacer nada asegúrate que la opción “Expandir plantillas de artilugios está desactivada” (en principio debería estar desactivada).

Antes de pasar al paso 2 es muy importante que nos hagamos una copia de seguridad de la plantilla. Para ello, pulsaremos “Descargar plantilla completa”, y guardaremos una copia de seguridad para poder reemplarla otra vez en caso de que no salga.

2. Busca en el código el siguiente texto:

]]></b:skin>

.

3. A continuación pegaremos el siguiente código fuente justo antes de la etiqueta anterior.

/* Estilos de la nube de 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}

4. En este código no es necesario realizar cambios ya que es adaptable a cualquier blog. A continuación Procedemos a pegar el siguiente código justo después de la etiqueta que antes hemos buscado (]]></b:skin>) y antes de </head>.

<script type='text/javascript'>
// Variables de usuario de la nube de etiquetas
var lcBlogURL = 'http://TUBLOG.blogspot.com';
var maxFontSize = 20;
var maxColor = [0,0,255];
var minFontSize = 10;
var minColor = [0,0,0];
var lcShowCount = false;
</script>

5. En esta ocasión es muy importante que pongáis el nombre de vuestro blog, y completéis la dirección donde pone TUBLOG. Además, una vez lo probéis después podéis hacer cambios como el tamaño máximo de letra o el mínimo que queráis que tengan las etiquetas, y los colores de estas.

6. Una vez hecho esto vamos al tercer y último paso necesario para tener una nube de etiquetas en nuestro blog es el siguiente. Buscaremos el siguiente texto en nuestro blog: <b:widget id='Label1' locked='false' title='Etiquetas' type='Label'/>

7. Finalmente, REEMPLAZAMOS la línea seleccionada por el siguiente bloque:

<b:widget id='Label1' locked='false' title='Etiquetas' 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'>

 
// No cambiar nada -----------------
 
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>

8. Una vez hecho esto ya tendremos la nube de etiquetas en nuestro blog.

0 comentarios:

Publicar un comentario

Suscribirse a: Enviar comentarios (Atom)