ir arriba

23 marzo 2007

Nubes de Etiquetas

Para crear Nubes de Etiquetas en el nuevo blogger es muy fácil, estas son cajas llenas de etiquetas del contenido de nuestro sitio, las palabras más grandes son las que más se visitan, en todo caso es lo último en la moda en muchos blogs y webs.

El nuevo Blogger existe una manera para que se creen automaticamente después de agregar unos códigos en nuestra plantilla. Veámos los pasos:

Nota: antes de añadir cualquier nodificación guarda la plantilla en el bloc de notas y lo guardas en una carpeta de tu compu.

1.
Entra en plantilla,después a la opción ( Elementos de la página ).


Le dais click a ( Añadir un elemento de página )


buscamos "etiquetas" y click en ( añadir al blog ).


En la nueva ventana dejamos el nombre de ( Etiquetas ) que viene por defecto ,sí quieres ponerle otro nombre te lo cambias, ahora click en "guardar cambios".


Ahora nos vamos nuevamente a ( Plantilla ) y después en la opción ( Edición de HTML ).


2.
Dentro de la plantilla html busca el siguiente texto que esta abajo de la plantilla, justo al </head>:

]]></b:skin>

3.
Justo encima de este texto coloca el siguiente código:

/* ---------nube de colores---- */
#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.
Vamos con el mismo texto de ántes :

]]></b:skin>

ahora colocamos este otro código pero debajo:

<script type='text/javascript'>
// Label Cloud User Variables
var lcBlogURL = 'http://josscat.blogspot.com';
var cloudMin = 1;
var maxFontSize = 20;
var maxColor = [0,0,255];
var minFontSize = 10;
var minColor = [0,0,0];
var lcShowCount = false;
</script>

Ahora en este último código debes sustituir la url "http://josscat.blogspot.com" por la dirección de tu blog.

5.
Ahora un poco más abajo busca el siguiente texto:

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

Una vez que lo hayas encontrado, lo eliminas y colocas en su lugar el siguiente código:

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

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 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])
}
}
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] &lt; 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 = 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>



Con esto ya tienes en tu blog la nube de etiquetas instalada ,ahora puedes poner donde quieras la posición desde la opción de( Elementos de la página ).

Puedes ver el tutorial original en inglés en: phy3blog.googlepages.com

No hay comentarios:

© josscat.blogspot.com 2007