El Escaparate: Etiquetas

Estás en: Inicio » Etiqueta: Etiquetas

[+/-]

Cambiar el diseño de la nube de etiquetas

[+/-]

Entradas sobre títulos expandibles actualizadas

[+/-]

Solución a la "desaparición" de la nube de etiquetas

[+/-]

Mostrar todas las entradas por categorías

[+/-]

Ocultar "Etiquetas" al pie de las entradas

[+/-]

Dos recursos más para el gadget de Etiquetas

[+/-]

Títulos de entradas por etiqueta + Feeds

[+/-]

Nube de etiquetas en movimiento (solucionando problemas)

Hace unos días publicaba la forma de colocar una "Nube de etiquetas en movimiento" y, aunque la mayoría la ha podido instalar sin problemas, como bien dice Amanda de Blogger Buster, algunos han tenido problemas al intentarlo.
Según Amanda esta nueva forma de instalar el widget evitará la aparición del "widget en blanco" como le sucedió a muchas personas y será capaz de mostrar todas las etiquetas sin problema. He de confesar que en este caso no lo he comprobado personalmente, aunque a decir verdad, confió por completo en el buen hacer de Amanda...

Como Oloman comenta en una entrada al respecto de la nube de etiquetas "Con mi versión de explorer, sólo funcionó el segundo"...así que por probar no se pierde nada ¿no os parece?.

En primer lugar iremos a "Editar Html" de nuestro panel y sin expandir las plantillas de artilugios localizaremos esta línea de código:

<b:section class='sidebar' id='sidebar' preferred='yes'>

Inmediatamente después de esta línea, pegaremos la siguiente sección de código:

<b:widget id='Label99' locked='false' title='Etiquetas' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
    <h2><data:title/></h2>
</b:if>
<div class='widget-content'>
    <object type="application/x-shockwave-flash" data="http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf" width="250" height="200" allowscriptaccess="always" >
        <param name="movie" value="http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf" />
        <param name="bgcolor" value="#ffffff" />
        <param name="flashvars" value="tcolor=0x000000&mode=tags&distr=true&tspeed=100&tagcloud=<tags>
      <b:loop values='data:labels' var='label'>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url' style='12'><data:label.name/></a>
</b:loop>
</tags>" />
        <p>Blogumulus by <a href='http://www.roytanck.com/'>Roy Tanck</a> and <a href='http://www.bloggerbuster.com'>Amanda Fazani</a></p>
    </object>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>

Hacemos ahora una vista previa de la plantilla. Si la instalación es satisfactoria, deberíamos ver la nube de etiquetas en movimiento en la columna lateral. Guardamos los cambios y en la parte de diseño movemos el widget al lugar que queramos mostrarlo en la sidebar.

Al igual que en la nube original, es posible personalizar algunos aspectos de la nube para adaptarla al estilo de nuestro blog.

[+/-]

Nube de etiquetas en movimiento

Hace un par de días que he colocado casi el final de mi sidebar una nube de etiquetas "en movimiento" y muchos de vosotros os habéis interesado por la forma de aplicar la nube en vuestro blog, así que paso a explicaros como conseguirla...

[Paso 1] Nos situamos en nuestro panel de Blogger "Edición Html" y sin expandir las plantillas de artilugios localizamos esta línea de código:

<b:section class='sidebar' id='sidebar' preferred='yes'>

[Paso 2] Justo a continuación (debajo de la línea) pegamos el código para que la nube de etiquetas se muestre al principio de nuestra sidebar (una vez instalado el elemento podremos luego moverlo como cualquier otro gadget):

<b:widget id='Label50' locked='false' title='Nube de etiquetas' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<script src='http://halotemplates.s3.amazonaws.com/wp-cumulus-example/swfobject.js' type='text/javascript'/>
<div id='flashcontent'>Blogumulus by <a href='http://www.roytanck.com/'>Roy Tanck</a> and <a href='http://www.bloggerbuster.com'>Amanda Fazani</a></div>
<script type='text/javascript'>
var so = new SWFObject("http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf", "tagcloud", "240", "300", "7", "#ffffff");
// uncomment next line to enable transparency
//so.addParam("wmode", "transparent");
so.addVariable("tcolor", "0x333333");
so.addVariable("mode", "tags");
so.addVariable("distr", "true");
so.addVariable("tspeed", "100");
so.addVariable("tagcloud", "<tags><b:loop values='data:labels' var='label'><a expr:href='data:label.url' style='12'><data:label.name/></a></b:loop></tags>");
so.addParam("allowScriptAccess", "always");
so.write("flashcontent");
</script>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

Si todo ha ido según lo previsto, ya podremos ver en la sidebar de nuestro blog la nube de etiquetas, estaremos entonces listos para adaptarla a nuestras necesidades.

Por defecto la nube presenta estás características:

Width (ancho) 240px
Height (alto) 300px
Color de fondo blanco
Color de texto gris
Tamaño de la fuente del texto "12"

Para cambiar estos parámetros por los que mejor se adapten al estilo de nuestro blog, tendremos que editar alguna de las partes del código:

Cambiar el ancho (240px) y el alto (300px) de la nube:

var so = new SWFObject("http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf", "tagcloud", "240", "300", "7", "#ffffff");

Cambiar el color de fondo de la nube (#ffffff):

var so = new SWFObject("http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf", "tagcloud", "240", "300", "7", "#ffffff");

Cambiar el color del texto (333333 manteniendo delante el 0x tal cual está):

so.addVariable("tcolor", "0x333333");

Cambiar el tamaño del texto (12):

so.addVariable("tagcloud", "<tags><b:loop values='data:labels' var='label'><a expr:href='data:label.url' style='12'><data:label.name/></a></b:loop></tags>");

Visto en: Blogger Buster
Basado en una idea original de: Roy Tanck

[+/-]

Títulos de entrada por etiquetas

[+/-]

Menú de etiquetas (expandir y contraer)

Una sencilla manera de mostrar las etiquetas en nuestra sidebar de forma que no ocupen casi espacio.
Será muy útil para aquellos que tienen en su blog aplicado un número excesivo de etiquetas, ya que solo se mostrará el título del elemento con el símbolo [+/-] delante y una vez se pinche en este símbolo, las etiquetas aparecerán expandidas debajo hasta que, volviendo a pinchar en el símbolo, se oculten de nuevo.

[Paso 1] En la pestaña de Diseño - Edición Html, localizamos el código del elemento "Etiquetas" sin expandir la plantilla de artilugios:

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

[Paso 2] Sustituimos esa línea por este código:

<b:widget id='Label1' locked='false' title='Etiquetas' type='Label'>
<b:includable id='main'>
<script type='text/javascript'>
//<![CDATA[
if(typeof(rnd) == 'undefined') var rnd = '';
rnd = Math.floor(Math.random()*1000);
rnd = 'id-' + rnd;
document.write('<a href="#" onclick="tmp = document.getElementById("' + rnd + '"); tmp.style.display = (tmp.style.display == "none") ? "block" : "none"; return false;" style="float:left;margin-right:5px;">');
//]]>
</script>[+/-]
<script type='text/javascript'>
//<![CDATA[
document.write('<\/a>');
//]]>
</script>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<script type='text/javascript'>
//<![CDATA[
document.write('<div id="' + rnd + '" style="display:none;">');
//]]>
</script>

<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>
</li>
</b:loop>
</ul>

<script type='text/javascript'>
//<![CDATA[
document.write('<\/div>');
//]]>
</script>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

[Paso 3] Comprobar en "Vista Previa" y si todo está correcto "Guardar Cambios".

[+/-]

Menu de etiquetas en vertical

[+/-]

Contenidos por categorias

[+/-]

Eliminar numeración en etiquetas y archivos

[+/-]

Nube de etiquetas

[+/-]

Controlar el numero de etiquetas a mostrar en la sidebar

Cuando etiquetamos nuestras entradas, a menudo solemos colocar varias etiquetas a cada una de ellas, así que cuando añadimos un nuevo elemento para mostrar nuestras etiquetas en la sidebar, este se alargará más de lo deseado, haciendo en muchos casos que la estética del blog no sea la más adecuada.
Una solución a este problema, podría ser el mostrar solo aquellas etiquetas más relevantes o que usamos más a menudo, modificando el widget que las muestra.

[1] Si aún no hemos añadido el widget de "Etiquetas" en nuestra sidebar, iremos a nuestra plantilla y en la parte de Diseño pinchamos en "añadir nuevo elemento" y escogemos "Etiquetas".

[2] Una vez tengamos las etiquetas en la sidebar, nos situamos en la parte de Editar-HTML de la plantilla y expandimos los artilugios. Nos desplazamos hacia abajo por el código de la plantilla hasta dar con el widget de las etiquetas que acabamos de añadir:

<b:widget id='Label1' locked='false' title='Etiquetas' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'>
<data:label.name/>
</span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'>
<data:label.name/>
</a>
</b:if>
<span dir='ltr'>(<data:label.count/>)</span>
</li>
</b:loop>
</ul>

<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

[3] Una vez localizado lo eliminamos y lo sustituimos por este:

<b:widget id='Label1' locked='false' title='Etiquetas' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<ul>
<script type='text/javascript'>
var labelnum = 0;
<b:loop values='data:labels' var='label'>
if (<data:label.count/> > 2) {
document.write("<li><a expr:href='data:label.url + "?max-results=100"'
rel='nofollow'><span><data:label.name/></span></a>(<data:label.count/>)</li>");
}
</b:loop>
</script>
</ul>
<b:include name='quickedit'/>
</b:includable>
</b:widget>

[4] De esta manera solo se mostraran las etiquetas que estén siendo usadas más de dos veces, para aumentar este valor, cambiamos el 2 dentro del código por el número que queramos, en esta línea: