Pimp My Blog | Ecos de la Mística Espiral

Ha pasado alrededor de una semana desde que mudé mi blog a mi hosting y lo administro con WordPress, pero no me he cansado de buscar y poner más y más cosas para que esté chido. Últimamente las adiciones que le he hecho no las he podido poner para que las vean porque simplemente la entrada no lo permite, tengo listo un motor para ver las fotos con el fondito negro e irlas pasando con un clic, pero no he escrito nada con fotos; ademas de que muchas otras cosas que e he agregado son de gestión interna para el blog.

¿A qué voy con todo esto? bueno, a que por el simple hecho de administrar yo totalmente mi blog, tengo la libertad de moverle cuanta cosa se me antoje, pero recuerdo que cuando tenía mi blog en Blogger, había un buen de cosas que quería hacer y no podía. Algunas se resolvieron cuando cambié mi blog a WordPress, pero incluso ahí había cosas que no me daban gusto, así que opté por lo que ahora ven.

Sin embargo me han preguntado algunas personas que de dónde bajé el tema, o que cómo ponen la esferita de las categorías, y que los fondos y que las encuestas y que la ventanita que sale en los vínculos y así, varias cosas que ven y se les gustaría tener en su blog pero no tienen la menor idea cómo hacerlo.

A algunos de ustedes los he ayudado con cuestiones técnicas tanto de blog o de su computadora, por supuesto, free of charge y con ninguna otra intención que ayudar, me gusta ayudar cuando me es posible. Sin embargo no todos me conocen y otros quizá no les guste pedir ayuda, así que me he dado a la tarea de traerles algunos gadgets chidos para su blog, y claro, con la debida explicación de su configuración y uso.

EL día de hoy les enseñaré cómo crear la Nube de etiquetas. Como saben cada entrada de blog puede ser etiquetada con palabras o frases, de tal manera que si ustedes agregan a su barra lateral el gadget de etiquetas, se mostrarán dichas etiquetas y el numero de entradas que hay con esa etiqueta.

Lo que haremos el día de hoy será pasar.

De esto a esto: de una forma fácil. La forma tradicional es mostrar las etiquetas por orden alfabético o por número de apariciones; lo que hace la nube de etiquetas es que en lugar de mostrar una lista, muestra (como su nombre lo dice) una «nube» en la que las etiquetas más usadas son de mayor tamaño y las menos usadas son de menor tamaño. Personalmente me gusta mucho.

Las indicaciones que voy a dar son para plantillas estándar de blogger, es decir, para cualquiera de las que vienen por default (Minima, Denim, Rounbders, Scribe, etc.), puesto que están construidas de la misma manera. Por otro lado también funciona en plantillas modificadas pero que sean XML, sólo que es posible que algunas partes del código estén escritas diferente y hay que buscarle bien dónde moverle.

Primero que nada debes tener ya agregado el gadget de Etiquetas, sino es así, corre y agrégalo.

Después debes acceder a tu blog e ir al panel de Diseño y luego a la opción de Edición de HTML.

Una vez ahí podrás ver que se encuentra el código de la plantilla de tu blog;

Asegúrate de que la casilla de «Expandir plantillas de artilugios» esté DESHABILITADA. (Si no lo está, pues deshabilitala, obvio!, jejeje)
Ahora, dentro del código utiliza la función de buscar para encontrar esto:
```
]]></b:skin>
```
(La opción de buscar sale presionando ctrl+f [osea la tecla control y luego la letra efe)). Deberás encontrar la parte de texto que se verá algo así:

Justo antes de esa línea deberán poner este código:

/* Estilos de la Nube de Etiquetas */
#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 pegado se verá así:

Ahora hay que agregar el código de las variables que va justo debajo de la ]]></b:skin> pero antes del </head> El código a agregar es este:
```
<script type='text/javascript'>
// Variables en la Nube sobre el color y tamaño de la fuente
var cloudMin = 1;
var maxFontSize = 20;
var maxColor = [0,0,255];
var minFontSize = 10;
var minColor = [0,0,0];
var lcShowCount = false;
</script>
```
Y una vez pegado se verá así: Este código de las variables, nos servirá posteriormente para manipular la configuración de nuestra nube de etiquetas.

Ahora hay que buscar dentro de nuestra plantilla:

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

Aquí deben poner mucha atención puesto que es muy probable que al buscarlo no lo encuentren y no porque no sepan buscar, sino porque seguramente en su blog esa línea de código tiene otros nombres. Les explico: la línea de código comienza con un <b:widget seguida de un id’Label1′, ese Labe1 en su blog puede tener Label2, Label3 y así dependiendo en qué orden hayan agregado el gadget de etiquetas; en el caso de este ejemplo dice Label1 por ser el primer gadget que añadí. Luego el código sigue con locked=’false’ title=’Etiquetas‘ bueno, es posible que si usan su cuenta de blogger en inglés, etonces no diga title=’Etiquetas’ sino title=’Labels’, o peor aún, si al agregar su gadget de etiquetas le pusieron Pendejatitas, pues aparecerá como title=’Pendejaditas’ ; así pues la clave para encontrar esta línea de código cae en dos cosas, Primero hallar el <b:widget y segundo, leer lo que le sigue a ese <b:widget y que se aseguren de que la línea contenga los parametros que buscamos, es decir que después de ese <b:widget haya un id=’Label1(o dos o el que sea), un locked=’false’ un title=’Etiquetas’ o el nombre que le hayas dado y un type=’label’/>. Resumiendo, si agregaste la nube de etiquetas justo antes de comenzar con este tutorial o ya la tenías y no le has cambiado el nombre, es posible que tu línea sea: <b:widget id='Label1' locked='false' title='Etiquetas' type='Label'/> o que sea <b:widget id='Label1' locked='false' title='Etiquetas' type='Label'/> sí ya la tenías y le pusiste un nombre específco, recomiendo que uses esa palabra para buscar con esa línea. Así pues cuando lo encuentres lo que debes hacer es, cambiar la ultima parte de la línea osea el /> por un > nada más y después agregar debajo el siguiente código:

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

/* Este es el script que hace posible la nube y no hay necesidad de cambiar nada */
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>

En ese momento pueden darle Vista Preliminar y la Lista de etiquetas se mostrará ya en nube de etiquetas. Por defaut aparece en un color azul y moradito. Es aquí cuando usamos las variables para modificar el cómo se verá la nube de etiquetas. Recordarán el código de etiquetas verdad:
<script type="text/javascript"></script>
Ok, pues la variable cloudMin es la que se encarga de desplegar las etiquetas, por default esta en 1 para que muestre las etiquetas con una entrada en adelante; es decir que si ustedes ponen (por ejemplo un 5) sólo mostrará etiquetas con un contador de cinco en adelante. La variable maxFontSize es la que da el tamaño mayor que alcanzarán las categorías con más entradas, del mismo modo que minFontSize da el tamaño mínimo de las etiquetas con menos entradas. Las variables minColor y maxColor son las que dan el color a las etiquetas más grandes y más chicas, El color está dado en formato RGB que son códigos de colores de 3 partes, por ejemplo [0,0,0] equivale a negro, así como [255,255,255] equivale a blanco. Pueden elegir su color usando esta tabla. Por último la variable lcShowCount es la que hace que se vean o no se vean el número de entradas que cada etiqueta tiene, utiliza valor false para no mostrar y true para sí mostrar. Así pues con los cambios pertinentes habremos convertido la nube en esto .

¡Taaadáaaan! ahora poseen una coqueta nube de etiquetas. Es importante señalar que si cambian de plantilla habrán de realizar todo el proceso nuevamente puesto que al cambair de plantilla se borra el codigo que hemos agregado.

Esto es todo para el Primer Pimp my Blog, ya buscaré más cosas para traerles en el futuro, si tienen brocnas o dudas, no duden (jejeje) en decirme. Un saludo y ¡CALIFIQUEN LAS ENTARDAS CON LAS ESTRELLITAS DE AQUÍ ABAJO!