Nube de etiquetas

La nube de etiquetas, tag cloud o label cloud - como quieras llamarle- sirve para tener una lista de categorías o etiquetas de manera más vistosa en tu blog. Las agrupa y dimensiona, dependiendo del número de post que cada una contenga.


¡Empezamos!

Entra a tu cuenta de blogger como siempre y ve hasta la parte de "Elementos de página" en la sección de la plantilla. Añade un nuevo elemento y elige "etiquetas".

Luego, ve hacia "Edición de HTML" y, SIN expandir la plantilla de artilugios, busca lo siguiente:

]]></b:skin>

ANTES de eso pega el sigte. código:

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

Luego, entre "b:skin" y el final de "HEAD" ]]></b:skin> --->AQUÍ<--- </head> debes pegar lo siguiente:

<script type="'text/javascript'"><br />// Label Cloud User Variables<br />var cloudMin = 1;<br />var maxFontSize = 20;<br />var maxColor = [0,0,255];<br />var minFontSize = 10;<br />var minColor = [0,0,0];<br />var lcShowCount = false;<br /></script>



Finalmente, debes bajar hasta la parte de la sidebar (casi al final de la plantilla) y buscar:

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

y reemplazarlo por:

<b:widget id="'Label1'" locked="'false'" title="'Label" type="'Label'"><br /><b:includable id="'main'"><br /> <b:if cond="'data:title'"><br /> <h2><data:title/></h2><br /> </b:if><br /><br /> <div class="'widget-content'"><br /> <div id="'labelCloud'/"><br /><script type="'text/javascript'"><br /><br />// Don't change anything past this point -----------------<br />// Cloud function s() ripped from del.icio.us<br />function s(a,b,i,x){<br /> if(a>b){<br /> var m=(a-b)/Math.log(x),v=a-Math.floor(Math.log(i)*m)<br /> }<br /> else{<br /> var m=(b-a)/Math.log(x),v=Math.floor(Math.log(i)*m+a)<br /> }<br /> return v<br /> }<br /><br /><br />var c=[];<br />var labelCount = new Array(); <br />var ts = new Object;<br /><b:loop values="'data:labels'" var="'label'"><br />var theName = "<data:label.name/>";<br />ts[theName] = <data:label.count/>;<br /></b:loop><br /><br />for (t in ts){<br /> if (!labelCount[ts[t]]){<br /> labelCount[ts[t]] = new Array(ts[t])<br /> }<br /> }<br />var ta=cloudMin-1;<br />tz = labelCount.length - cloudMin;<br />lc2 = document.getElementById('labelCloud');<br />ul = document.createElement('ul');<br />ul.className = 'label-cloud';<br />for(var t in ts){<br /> if(ts[t] < cloudMin){<br /> continue;<br /> }<br /> for (var i=0;3 > i;i++) {<br /> c[i]=s(minColor[i],maxColor[i],ts[t]-ta,tz)<br /> } <br /> var fs = s(minFontSize,maxFontSize,ts[t]-ta,tz);<br /> li = document.createElement('li');<br /> li.style.fontSize = fs+'px';<br /> li.style.lineHeight = '1';<br /> a = document.createElement('a');<br /> a.title = ts[t]+' Posts in '+t;<br /> a.style.color = 'rgb('+c[0]+','+c[1]+','+c[2]+')';<br /> a.href = '/search/label/'+encodeURIComponent(t);<br /> if (lcShowCount){<br /> span = document.createElement('span');<br /> span.innerHTML = '('+ts[t]+') ';<br /> span.className = 'label-count';<br /> a.appendChild(document.createTextNode(t));<br /> li.appendChild(a);<br /> li.appendChild(span);<br /> }<br /> else {<br /> a.appendChild(document.createTextNode(t));<br /> li.appendChild(a);<br /> }<br /> ul.appendChild(li);<br /> abnk = document.createTextNode(' ');<br /> ul.appendChild(abnk);<br /> }<br /> lc2.appendChild(ul); <br /></script><br /><br /><noscript><br /> <ul><br /> <b:loop values="'data:labels'" var="'label'"><br /> <li><br /> <b:if cond="'data:blog.url"><br /> <data:label.name/><br /> <b:else/><br /> <a href="'data:label.url'"><data:label.name/></a><br /> </b:if><br /> (<data:label.count/>)<br /> </li><br /> </b:loop><br /> </ul><br /></noscript><br /> <b:include name="'quickedit'/"><br /> </div><br /><br /></b:includable><br /></b:widget>

Con esto ya tendrás lista tu nube de etiquetas y serás muy feliz.

Si deseas ajustar algunas variables ve a:

var maxFontSize = 20; ---Tamaño de la fuente máxima
var maxColor = [0,0,255]; ---Color de la fuente máxima
var minFontSize = 10; ---Tamaño de la fuente mínima
var minColor = [0,0,0]; ---Color de la fuente mínima
El tamaño de la fuente puedes cambiarla como en cualquier texto. El color de la fuente está basado en el sistema RGB, si quieres cambiarlo ve -->AQUÍ<-- y elige tu color favorito.

var lcShowCount = false;
Si quieres ver el número de post en cada etiquetas cambia el valor "false" por "true".
Vía: phydeaux3

Sigue Leyendo

___________