Me estaba faltando una sola cosa para estar totalmente contento con el diseño del blog, y era una nube de tags conteniendo las principales etiquetas que uso para las entradas, por que las etiquetas por default que trae blogger no me gustan demasiado, como creo que a nadie les gusta. Por eso me decidí a investigar, y luego de dar con muchas paginas en las que te dan el código, pero no explican bien como hacerlo, encontré un blog que da la explicación perfecta, y queda como ven que quedo en este blog. Asi que voy a repetir los pasos a seguir:

Primero vamos a editar el código HTML de la plantilla del blog.

Luego debemos buscar el siguiente código: ]]></b:skin> y pegamos lo siguiente ANTES del codigo:

/* Label Tag Cloud */
#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}

Una vez que pegamos esto, buscamos el siguiente código: </head> y antes de esto, pegamos lo siguiente:

<script type='text/javascript'>
// Label Cloud User Variables
var lcBlogURL = 'http://TU-BLOG.blogspot.com';

var maxFontSize = 20;
var maxColor = [0,0,255];
var minFontSize = 10;
var minColor = [0,0,0];
var lcShowCount = false;
</script>

Ahora se debe reemplazar el “hhtp://TU-BLOG.blogspot.com por la dirección de tu blog.

Después que tenemos esto, se debe buscar lo siguiente: <b:widget id='Label1' locked='false'. La linea completa deberia ser asi: <b:widget id='Label1' locked='false' title='Labels' type='Label'/>
, pero puede variar, así que lo que hacemos es buscar el código anterior. Una vez que lo encontramos, debemos reemplazar TODA esa línea por 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'>
// Don't change anything past this point -----------------
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>

Guardamos la plantilla, y ahora vamos al blog. Si Ya teníamos el widget de etiquetas, se podrá ver que se reemplazo el que teníamos por la nube de tags. Si no lo teníamos, debemos agregar un nuevo elemento al blog, desde Plantilla-> Elementos de Pagina -> Añadir nuevo elemento -> Etiquetas y con esto aparecerá nuestra nube de tags.

Gracias a RecursoSpaces



------------------------------------------------------------------------------------
TE GUSTO LA ENTRADA? PODES COMPARTIRLA CON ESTOS BOTONES!

0 Respuestas a Crear una nube de tags en Blogger

Publicar un comentario

Gracias por comentar en mi blog, por favor, moderate y se respetuoso.

Buscar

Recommend us on Google!

Posts Recientes

Cometarios Recientes