Nubes de etiquetas en blogger I

A diferencia de WordPress, blogger no incorpora ningún tipo de utilidad para crear nubes de etiquetas en blogger. Para hacer esto hay varias maneras, editando nuestro código HTML que considero una manera más elegante y utilizando un servicio externo. Durante este post y el siguiente intentaré comentar todas las posibilidades tal y como intento hacer siempre.


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.

Para la versión elegante 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:

1
]]></b:skin>

.

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
/* 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>.

1
2
3
4
5
6
7
8
9
<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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
<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, el resultado tendría que ser parecido al que se ha dado en mi directorio en el cual he seguido estos pasos.

En el siguiente post, explicaré como hacerlas usando servicios externos a blogger.

Finalmente, como siempre intento hacer, un vídeo explicativo para que resulte aún más sencillo poner la nube de etiquetas.

75 pensamientos en “Nubes de etiquetas en blogger I

  1. alebacic

    Hola, muchísimas gracias, muy útil la información, realmente el resultado es excelente y la explicación está muy simple y detallada!

    Nuevamente gracias!

  2. Txetxu

    Gracias, me ha funcionado. Lo único que no me gustaba el color con que quedaba al principio, pero leí la respuesta que dabas a alguien con mi misma inquietud y lo cambié. Gracias de nuevo.

  3. Micky Lav

    Buenas, primero que nada, disculpas por meter este comentario aca, pero no encontre un post mas relaciuonado con mi pregunta :$
    he tratado de encontrar la respuesta a esta pregunta ya desde hace varios dias y no la eh encontrado por ningún lado, espero que puedas ayudarme…
    Estoy tratando de poner dos gadget de etiquetas porque son tan diversos los temas de mi blog que lo necesito. Hasta ahí todo perfecto, pongo el primero, clasifico los temas que quiero y todo queda perfecto. Pero cuando pongo el segundo gadget de etiquetas, me aparece todo repetido y es aca donde me estanco. Trate de mil modos de solucionarlo (desde la ignorancia del principiante) y no eh podido. Se que hay una manera porque lo vi en otros blogs (http://sddv2-fanatico.blogspot.com/), pero no se como :S
    Espero la respuesta
    Gracias 🙂

  4. Hernan Murcia Z

    Muchas gracias por el codigo, lo he estado buscando, he colocado los dos bloques bien, pero el tercer bloque que se debe colocar donde esta la linea de codigo no se encuentra en mi blog.

    Como le hago para encontrar el sitio donde exactamente debe ir el tercer y ultimo bloque de codigo?

    Gracias.

    HernanM

  5. MAG

    Hola!
    Recién comienzo en el tema de los blog. Tengo la nube hecha con los gadget de blogger pero no puedo quitarle el subrayado, ¿Sugerencias?
    Desde ya muchas gracias.

  6. Andridana

    Hola Oscar:
    He visto en un blog una nube de etiquetas pero en movimiento, puedes explicarme cómo se hace eso? esque me encantaría usarlo ya que se ve muy dinámico.
    Saludos y muchas gracias por tus aportes tan útiles!

  7. mariaines

    Hola Oscar:
    Excelente tu Blog, pero….no pude instalar la nube de etiquetas.
    Me sale el código de error que todos mencionan, “que no queda bien cerrado ”

    ¿Podrías explicar cual es el error?

    Saludos. Muchas gracias. Es muy bueno tu aporte.

  8. kitty

    hola Oskitar, he intentado una y otra vez colocar todo paso a paso, pero no se llega a visualizar solo aparece el titulo de etiquetas, que le he puesto, y cuando vuelvo al codigo resulta que la ultima parte no la esta reconociendo y no la graba no se porque sucede esto ya he intentado una y otra vez y siempre sucede igual, porfavor, dime que puede estar ocurriendo porque no lo graba ., un millon de gracias por tu ayuda

  9. marta

    SOS!!! necesito ayuda!estaba intentando poner esta aplicacion en mi blog y cuando le he dado a vista previa y he comprobado que todo estaba bien he ido a guardarlo y me ha dado un error, a partir de ahi ya no me deja meterme en blogger, puedo ver mi blog como usuaria pero no puedo acceder al menu interno, me da el tipico ruido de cuando se esta cargando la pagina pero muchas veces seguidas, como si estuviera intentandolo y no pudiera, tampoco se me ha guardado la aplicacion, ¿que puedo hacer?

  10. Negropeon

    Buenísimo el blog. te quería consultar cómo hago para hacerla tipo nube movible. Logré siguiendo tus pasos poner la sección etiquetas pero no se como hacer que se muevan

  11. Miren LM

    Hola Oscar
    He intentado varias veces instalar la nube de etiquetas pero no se porque no acierto.No me sale ningún código de error, las lista de etiquetas sigue estando tal y como estaba al principio.
    Saludos y gracias por tu ayuda.
    Miren

  12. Ester

    Muchas gracias Oscar. Hace poquito que he empezado mi blog, así que estoy intentando aprender un poco a hacerlo “más bonito”, tu ayuda me ha venido genial!! Gracias de nuevo!!

  13. montecristo

    hola, he conseguido ponerlo, gracias!, pero cuando hago click por ejemplo en una etiqueta, no me abre todas las entradas de esa etiqueta, ¿sabes por qué es?

    muchas gracias.

Los comentarios están cerrados.