Búsqueda personalizada

3 de noviembre de 2007

"Nube de Tags"

na nube de etiquetas es una representación visual de las “etiquetas” o palabras clave usadas en un sitio web. Generalmente este listado de palabras se ordena alfabéticamente y con diferente tamaño según su relevancia.



Esta es la primera entrada de una serie donde podrán verse las modificaciones (hacks) hechas a la plantilla.



Blogger Beta Label Clouds (Nube de Etiquetas) fue desarrollado por phydeaux3 y lo que sigue es una traducción libre del código necesario para implementarla.



En todos los casos, es aconsejable hacer una copia de seguridad ANTES de hacer cualquier cambio en la plantilla.



REQUISITOS MÍNIMOS: el elemento ETIQUETA debe haber sido incorporado a la plantilla. Esto puede hacerse en Diseño/Plantilla, Añadir Elementos y deben existir entradas a las que se les hayan añadido etiquetas.





El código posee tres partes, unas declaraciones de estilo, un script y el elemento widget. Para comenzar, ir a Diseño/Plantilla, Edición de HTML y dejar widgets sin expandir de tal manera de poder encontrar más fácilmente las líneas a modificar.





1. La sección de estilo se debe copiar e insertar dentro del tag <b:skin> en el HEAD de la plantilla. Lo más fácil es encontrar el final de la sección ]]></b:skin> y copiar el código ANTES.




/* 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 {margin: 0 auto; padding: 0;
list-style-type: none;}
#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}




2. El script también se debe colocar en el HEAD de la plantilla pero fuera de las declaraciones de estilo. Nuevamente, lo mejor es encontrar el tag ]]></b:skin> y copiar el código DESPUES de esa línea pero ANTES del tag de cierre </head>.



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




Nota: todos los valores pueden ser cambiados en cualquier momento y se explican más adelante pero SE DEBE cambiar la primera línea.
var lcBlogURL = 'http://NOMBREdelBLOG.blogspot.com';
para que coincida con la url correspondiente al blog donde va a ser utilizado.



OJO: el formato no debe modificarse, debe mantenerlo entre comillas simples (' ').



3. El widget se encuentra en la sección que corresponde a la columna (sidebar) y, si no está expandido, debería parecerse a esto:
<b:widget id='Label1' locked='false' title='Labels' type='Label'/>
si el widget está expandido, tendrá un formato parecido a esto:
<b:widget id='Label1' locked='false' title='Labels' type='Label'>
... varias líneas de código ...
</b:widget>
en cuyo caso será necesario seleccionar desde el comienzo hasta el final del tag widget.



Copiar el siguiente código y reemplazar la/las líneas.

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



// Cloud function s() ripped from del.icio.us



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 &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 = '/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>




Listo, el elemento del blog debería verse como una nube. En caso contrario, algo no fue hecho correctamente.



BUGS: por lo menos UNA etiqueta debe tener más de UNA entrada, en caso contrario, el script provoca una falla; además, ninguna de las etiquetas debe contener comillas (").



PERSONALIZAR: los colores y tamaños son configurables mediante las variables del script del HEADER.
var maxFontSize = 20;
tamaño de la fuente (en pixeles) de la etiqueta con más entradas
var maxColor = [0,0,255];
color (en formato RGB) de la etiqueta con más entradas
var minFontSize = 10;
tamaño de la fuente (en pixeles) de la etiqueta con menos entradas
var minColor = [0,0,0];
color (en formato RGB) de la etiqueta con menos entradas
var lcShowCount = false;
puede ser false (default) o true y permuta el contador de etiquetas
IMPORTANTE: al cambiar los colores debe mantenerse el formato RGB entre corchetes ([ ]) y los valores deben estra separados por comas.



El valor por defecto es AZUL para max y NEGRO para min que funciona perfectamente cuando el fondo es claro. Pero puede usarse cualquier valor. Por ejemplo, esta plantilla usa los valores [64,200,255] y [32,128,128] respectivamente.



Cualquier etiqueta intermedia tendrá un tamano y un color basado en su cantidad. El resultado final dependerá de los valores máximos y mínimos elegido pero tambien de otros muchos factores tales como la cantidad de etiquetas y la diferencia de cantidades entre ellas. Tres etiquetas no harán un gran efecto, pero muchas con igual cantidad de entradas iguales, tampoco.



Hay algunas declaraciones de estilo que también pueden ser modificadas:
#labelCloud {text-align:center; font-family: arial,sans-serif;}

la alineación puede ser text-align:justify;, text-align:right; o text-align:left;

la fuente puede ser cualquiera



#labelCloud .label-cloud li {display:inline; ...}

la parte más importante display:inline; puede modificarse por display:block; para obtener un efecto 'Flat' (cada etiqueta en una línea)



#labelCloud .label-count {...}

si se pone lcShowCount en true, establece el color y tamaño de los contadores



Ante cualquier duda o gratitud ir a Vagabundia






2 opiniones:

Maxi dijo...

hola!!!!!, soy maxi, deseo poder separar las etiquetas de miblog en dos secciones diferentes, por ejemplo, mi blog es de poesias, y quiero separar en unaparte las "etiquetas" de cada uno delos autores, y en el otro grupo el "genero literario", de esta manera poder oraganizarlasmejor, te agradeceria que me ayudes, el mail del blog es poetasanonimossa@ymail.com muchas gracias espero tu respuesta

Anonymous dijo...

Realice los dos primeros pasos y todo bien ...y hice el último y me salió un error (que me falta cerrar algun >...estoy buscando donde esta el error pero no lo puedo enontrar) ; --mi correop es mike0711@hotmail.com . Gracias

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