Búsqueda personalizada

23 de mayo de 2010

Nube de etiquetas flash en blogger

tagcloud

Los tag clouds muestran tus etiquetas visualmente bonitas y ordenadas por tamaño según la cantidad de entradas en cada una, en blogger no esta por defecto como en wordpress, por lo que necesitaremos uno más de los famosos hacks.



Para agregarla, vamos a Plantilla -> Edicion HTML (no expandas artilugios)

El codigo se divide en 3, el primero lo pegamos antes de "]]></b:skin>"



Codigo 1:



/* 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}





El siguiente lo pegas despues "]]></b:skin>" y antes de "</head>"



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




En http://TU-BLOG.blogspot.com pones la direccion de tu blog (¬¬)



Ahora, busca lo siguiente (Control + F): <b:widget id='Label1' locked='false'



El tag completo es algo asi: <b:widget id='Label1' locked='false' title='Labels' type='Label'/> pero el title tal vez sea distinto en tu caso.



Esa misma linea (toda) la debes reemplazar por el siguiente codigo:



<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&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 ta=0

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])

}

}

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 &gt; 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>



Para terminar, ve a Plantilla -> Elementos de pagina -> añadir nuevo elemento -> etiquetas.



Eso es todo, ahora tendrás una nube de etiquetas en tu blog ^^



ACTUALIZACIÓN:

Crear facilmente nubes de etiquetas o label clouds,
con estos sistemas:

TagCloud o ZoomClouds

1 opiniones:

Rómulo dijo...

No es mala idea en verdad, pero al margen de que la letra del tema de tu blog es muy pequeña, utilizar color azul sobre fondo negro es una mala idea: no se puede leer nada. Por lo demás, buen tip, gracias por compartir.

Publicar un comentario

Hola , el blog nesesita tu commentario asi que por favor escribe lo que tu de verdad quieras

Posicionamiento en buscadores

El secreto del Posicionamiento en Google está en los enlaces. Los buscadores valoran la popularidad de un sitio por el número de enlaces hacia el mismo y su calidad. Sin duda el posicionamiento web y el link building es un paso clave para cualquier blog.

Posicionamiento en buscadores

 

Copyright © 2011 Marketing y Posicionamiento en Internet. Trucos blogger | Design by Kenga Ads-template