Cadistic: Tutoriales, Tips y Trucos de AutoCAD: Tutorial Como Crear Nube de Tags o Etiquetas en Blogger o Blogspot

Aquí está el código y la informa

Aquí está el código y la información de configuración para utilizar la nube de etiquetas en la nueva versión de Blogger.

En primer lugar, obviamente, tiene que tener un blog en Blogger o crear uno nuevo, y debe utilizar las plantillas de diseños, (Esto no está disponible para plantillas clásicas, o blogs publicados con FTP) y debe tener algunas entradas o post con etiquetas o tags. (Es necesario que haya al menos una etiqueta con más de una entrada o sino dará error - entonces tienes que tener al menos una etiqueta con más de una entrada antes de comenzar).

Asegúrese de hacer copia de seguridad de su plantilla antes de hacer cualquier cambio!

Inicie sesión en Blogger e ir a la sección de Diseño. En la página de configuración del "Elementos de página" asegúrese de que tiene un gadget Etiquetas ya está instalado en donde desees (puede ser movido alrededor más adelante) y no tienes haces clic en Añadir un Gadget y buscas el denominado Etiquetas.

Luego, vaya a la configuración de Edición de HTML y hacer clic en la opción “Expandir plantillas de artilugios”. Esto hará que las cosas más fáciles de hacer.

Ahora el código está disponible en 3 partes. Una sección de la hoja de estilo, una sección de configuraciones, y luego el widget en sí.

La primera parte es para poner en la sección de hoja de estilos. El siguiente código se debe copiar y se inserta en la hoja de estilos, que en los diseños está marcado por las etiquetas de <b:skin>.

PASO 01:
Encuentra dentro del código html el siguiente texto:

]]></b:skin>

y colocar justo ANTES de ese texto lo siguiente:

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

.
Listo el primer paso, copiar y pegar sin modificación en este momento. Voy a explicar lo que puede ser ajustado más tarde.

PASO 02:

La siguiente sección es la sección de configuración de la nube. También va en la cabeza de la plantilla, pero fuera de la parte de hoja de estilos.

Vuelve a ubicar dentro del código html el texto:

]]></b:skin>

Esta vez justo DESPUÉS de ese texto (pero antes de </head>) colocas el siguiente código:

Todos estos ajustes se pueden cambiar, pero los voy a explicar en un momento. Los valores por defecto funcionan por ahora.

PASO 03:
Ahora toca encontrar el widget de etiquetas.

Ubica dentro del código html el siguiente texto:

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

Luego reemplaza esa línea con 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 -----------------
// Cloud function s() ripped from del.icio.us
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 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])
           }
        }
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] < 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 = '/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>

Y LISTO, si todo ha ido bien, y tienes tus posts ya etiquetados, entonces hazle una Vista Previa al blog en el que se debe ver alguna forma de la nube. Si no aparecen, entonces algo salió mal. Probablemente debería retroceder y volver a intentarlo desde el principio.

OTRAS CONSIDERACIONES

Ahora si te sale el siguiente error:

<br/>Mensaje de error de XML: The element type "b:section"

En el PASO 03, no solo debes reemplazar esa línea:

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

Si no tambien tienes que reemplazar esa líneas y las siguientes, es decir reemplaza todo esto:

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

<b:includable id='main'>

<b:if cond='data:title'>

</b:if>

<b:if cond='data:display == "list"'>

<ul>

<b:loop values='data:labels' var='label'>

<li>

<b:if cond='data:blog.url == data:label.url'>

<b:else/>

</b:if>

<b:if cond='data:showFreqNumbers'>

</b:if>

</li>

</b:loop>

</ul>

<b:else/>

<b:loop values='data:labels' var='label'>

<b:if cond='data:blog.url == data:label.url'>

<b:else/>

</b:if>

<b:if cond='data:showFreqNumbers'>

</b:if>

</span>

</b:loop>

</b:if>

<b:include name='quickedit'/>

</div>

</b:includable>

</b:widget>

CONFIGURACION

Los ajustes en la sección de Variables es donde se hace la mayor parte de los ajustes. Aquí voy a explicar cada uno de los ajustes.

var cloudMin = 1;

Esta configuración se puede utilizar para limitar el número de etiquetas que se muestran (por ejemplo, si usted tiene un montón de etiquetas). Deje el valor en 1 para mostrar todas las etiquetas. Si usted entra en un mayor número, a continuación, sólo las etiquetas que tienen al menos ese número de entradas aparecerán en la nube.

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

Las líneas de
maxFontSize
maxColor

El primero de ellos establece el tamaño (en píxeles) de la etiqueta con la
la mayor cantidad de entrada. El maxColor establece el color de esa entrada (en formato RGB). Similar con los siguientes dos
   minFontSize
   minColor
Sólo se trata de la etiqueta con la menor cantidad de entradas. Una vez más el tamaño en píxeles, el color está en formato RGB. Las etiquetas entre los dos conseguirá su color / tamaño basado en el número de etiquetas que son, y donde su número de registros cae, le da a la nube el tan deseado efecto.

De mi experimentación, hay muchos factores que hacen que una nube de aspecto agradable. De color / tamaño disposición, el número de etiquetas reales, de lo bien que dispersa las entradas están entre los las etiquetas. Tienes que experimentar para ver qué se ve bien con tu configuración.

IMPORTANTE, al cambiar los ajustes de color, guardarlos en el formato proporcionado. Entre los [ ] y los números separados por comas. Los colores por defecto son de color azul para el máximo y el NEGRO para el min.
Usted puede seleccionar cualquier combinación válida de color RGB. Si usted no sabe lo que son los colores RGB, no te preocupes. Es sólo una manera de definir un color. Puede utilizar muchos gráficos en Internet para obtener el valor correcto de RGB para el color que tu quieras probar. Aquí hay uno que es bastante bueno.

RGB Color Code Chart

Recuerde, si usted consigue los 3 conjuntos de números debes ingresarlos en forma correcta. Dentro de la [] separados por comas.

También puede experimentar con diferentes tamaños de fuente. Una vez más, depende de cuántas entradas, cómo se dispersa , y cuánto espacio de la nube está disponible en cuanto a lo que se ve bien.

La última variable es

  lcShowCount

Esto puede ser falsa (por defecto) o verdadero. Todo esto hace es activar / desactivar el contador de mensajes que se muestra junto a la etiqueta. Por lo general, en una "tradicional" nube, la cuenta no se utiliza. Pero si usted apunta a una lista
"Flat", entonces estaría bien algunas veces activarlas.

Ahora a la sección de CSS. La mayoría de la gente no tiene que modificar esto mucho, y no es necesario entender donde todas esas entradas van. Es posible que desee cambiar para adaptarse.
La primera línea

     # LabelCloud {text-align: center; font-family: arial, sans-serif;}

Usted puede cambiar las fuentes utilizadas en la nube, si usted quiere.
Además, el codigo text-align también se puede cambiar. Lo tengo configurado al centro por defecto, pero podría utilizar

text-align: justify;
text-align: right;
text-align: left;

Si les acomoda mejor.

La siguiente línea

     #labelCloud .label-cloud li{display:inline;background-image:none !important;padding:0 5px;margin:0;vertical-align:baseline !important;border:0 !important;}

Bueno, no te preocupes por la mayor parte de él a menos que seas un hardcore CSS'er. El único realmente importante es la primera entrada

display:inline;

Usted puede cambiar esto a

display:block;

Para obtener la lista 'Flat' (cada entrada es una línea propia separada) de las entradas ponderadas.
Por lo general, si está configurado para bloquear probablemente desee cambiar la frecuencia del tipo alfabético a frecuencia. Usted lo hace mediante la edición del widget de la pestaña Elementos de página en Blogger.

Y la última parte que voy a mencionar es la línea

     #labelCloud .label-count

Si establece la variable lcShowCount en true para mostrar el número de posteos, se puede cambiar el color / tamaño de las entradas numeradas con esa línea.

Mejorado, actualizado y traducido de la web

martes, 23 de agosto de 2011

Tutorial Como Crear Nube de Tags o Etiquetas en Blogger o Blogspot

No hay comentarios:

Publicar un comentario