Mostrando entradas con la etiqueta Etiquetas. Mostrar todas las entradas
Mostrando entradas con la etiqueta Etiquetas. Mostrar todas las entradas

Cómo instalar un gadget de etiquetas en forma de menú despegable

Artículo publicado en el blog Ciudad Blogger, uno de los sitios con más información sobre tecnología Blogger Ve la entrada en su blog original.

Ya que seguimos con el tema de ahorrar espacio en el blog veamos cómo podemos mostrar las etiquetas en forma de menú desplegable, esto será para ahorrar espacio y para tener las etiquetas con otro estilo diferente al tradicional.
Cuando usamos el gadget de etiquetas éstas se muestran en forma de lista ordenada:



Lo que haremos será que se muestren de esta forma:





Sólo necesitas entrar en Diseño | Edición de HTML, marcar la casilla Expandir plantillas de artilugios y buscar este código:
<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>
< b:if cond='data:showFreqNumbers'>
< span dir='ltr'>(<data:label.count/>)</span>
< /b:if>
< /li>
< /b:loop>
< /ul>
Elimínalo y en su lugar pega esto:
<br/>
< select class='menu-etiquetas' onchange='location=this.options[this.selectedIndex].value;'>
< option>Selecciona una categoría</option>
< b:loop values='data:labels' var='label'>
< option expr:value='data:label.url'><data:label.name/>
(<data:label.count/>)
< /option>
< /b:loop>
< /select>
Con eso será suficiente. Puedes cambiar el texto Selecciona una categoría donde se indica. Si quieres que no se muestren el número de entradas que tiene cada etiqueta elimina lo que está en color azul.

También puedes darle un poco de color para que se vea más o menos de esta forma:



Si lo quieres así sigue el mismo procedimiento pero adicionalmente deberás pegar antes de
]]></b:skin> este código:
.menu-etiquetas {
background-color: #CEE3F6; /* Color de fondo */
color: #000000; /* Color del texto */
}
Ahí puedes cambiar los colores donde se indica.
No está de más decir que primero necesitas tener el gadget de Etiquetas... digo, por si alguien busca el código y no lo encuentra.

Cómo ocultar el mensaje "Mostrando las entradas con la etiqueta "...."

¡ Artículo publicado en el blog El Balcón de Jaime, que pese a ser un blog terminado, es uno de los mejores en truvos blogger. ! Ve la entrada en su blog original.

Ocultar o eliminar el mensaje de "Mostrando entradas con la etiqueta..."
En determinadas plantillas podemos encontrarnos con un cartel muy conocido que se visualiza en las páginas de etiquetas o el resultado de alguna búsqueda...




Para eliminar el cartel de tu blog, sigue los siguientes pasos...

Diseño>edición HTML>expandimos artilugios

Busca la línea de código que te muestro a continuación:

<b:include data='top' name='status-message'/>

Ahora sólo tienes que eliminarla y Guardar cambios.


Para ocultar el cartel de tu blog, sigue los siguientes pasos...

Diseño>edición HTML>expandimos artilugios

Busca la etiqueta ]]></b:skin> y encima pégale este bloque:

.status-msg-wrap {
display:none;
visibility: hidden;
}

Ahora simplemente
guarda cambios.
¡Así de sencillo!

Etiquetas, entradas y enlaces en dos columnas

¡ Artículo publicado en el blog El Balcón de Jaime, que pese a ser un blog terminado, es uno de los mejores en truvos blogger. ! Ve la entrada en su blog original.

Etiquetas, entradas y enlaces de la sidebar en dos columnas
Esta es una forma de mostrar las etiquetas, las entradas del gadget de archivos o los enlaces de las listas de enlaces en dos columnas.

Es muy sencillo de poner y el resultado parece muy elegante...


Diseño>edición HTML>
expandimos artilugios

Busca la etiqueta ]]></b:skin> y encima pega este bloque de CSS:

#sidebar .BlogArchive ul li,
#sidebar .Label ul li,
#sidebar .LinkList ul li{
width: 90px;
float: left;
display: inline;
margin-right: 4px;
}

BlogArchive
representa el gadget de archivos

Label representa el gadget de etiquetas

LinkList representa la lista de enlaces. Si tienes más de una lista, búscala por el nombre del gadget (por ejemplo: blogs amigos) y copia la palabra LinklistX (la X representa un número, por ejemplo LinkList2)

Guarda cambios y listo.

Cómo instalar las etiquetas en cuatro columnas en el pie del blog

¡ Artículo publicado en el blog El Balcón de Jaime, que pese a ser un blog terminado, es uno de los mejores en truvos blogger. ! Ve la entrada en su blog original.

Etiquetas divididas en cuatro columnas encima del pié del blog
Tras haber publicado el truco para tener las etiquetas, las entradas y los enlaces de la sidebar en dos columnas, me quedé con ganas de crear otro truco similar.

Ayer por la tarde tuve el suficiente tiempo para inventar el interesante procedimiento de incluir nada más y nada menos que cuatro columnas de etiquetas encima del footer (pié del blog)...





Diseño>edición HTML>expandimos artilugios


Busca la etiqueta ]]></b:skin> y encima añade estos bloques de CSS:

#etiquetasbloque {
width:870px;
text-align:left;
margin:0 auto 10px;
line-height: 1.6em;
clear:both;
padding-top: 12px;
}

.etiqueta {
color: #000000;
line-height: 1.5em;
}

.etiqueta .widget {
padding:0 0 1.5em;
margin:0 .4em 1.5em .4em;
}

.etiqueta ul {
list-style:none;
margin:0 0 0;
padding:0 0 0;
}
.etiqueta ul li {
float:left;
list-style-type: none;
width:20%;
margin: 0 0 5px;
background: transparent url(http://www.iconfinder.net/data/icons/silk2/bullet_green.png) no-repeat left center;
padding-left: 15px;
}

.etiqueta:hover {
color: #999999;
}

Ahora busca esta línea:

<div id='footer-wrapper'>

Y encima agrega lo siguiente:

<div id='etiquetasbloque'>
<b:section class='etiqueta' id='etiqueta'>
<b:widget id='Label112' locked='false' title='Etiquetas' type='Label'>
</b:widget>
</b:section>
</div>

Con este paso finalizamos el truco. Puedes ver el resultado en vista previa.

Guarda cambios para terminar.

Cómo decorar las etiquetas con una palabra o frase al lado

¡ Artículo publicado en el blog El Balcón de Jaime, que pese a ser un blog terminado, es uno de los mejores en truvos blogger. ! Ve la entrada en su blog original.

Decorar los números de las etiquetas o incluir una palabra personal
Cuando añadimos el gadget de Etiquetas, éste muestra el número de entradas junto a cada categoría.

Hace tiempo aprendimos a quitar el número que aparece junto a cada tag.

Antes de empezar debes tener el gadget de Etiquetas instalado:




Una vez lo tengas en el blog podremos comenzar. Vamos a personalizar un poco más el número, añadiéndole una palabra o frase al lado...




Diseño>edición HTML>expandimos artilugios


Busca la siguiente línea:

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

Un poco más abajo encontrarás esta otra:

(<data:label.count/>)

Sustitúyela (con los paréntesis incluidos) por este bloque:

(
<b:if cond='data:showFreqNumbers == 0'>
recetas
<b:else/>
<b:if cond='data:label.count == 1'>
1 receta
<b:else/>
<data:label.count/> recetas
</b:if>
</b:if>)

Cambia la palabra recetas por una frase o palabra personal (debes escribirla tres veces).

Por último, haz vista previa para ver el resultado y guarda cambios.


Etiquetas divididas en 4 columnas arriba de las entradas

¡ Artículo publicado en el blog El Balcón de Jaime, que pese a ser un blog terminado, es uno de los mejores en truvos blogger. ! Ve la entrada en su blog original.

Etiquetas divididas en cuatro columnas encima del bloque de entradas
Previamente vimos el truco para incluir las etiquetas divididas en cuatro columnas encima del pié del blog.

Son bastantes las personas que me preguntaron cómo hacer dicho truco pero, en lugar de incluir las columnas encima del pié del blog, insertarlas encima del bloque de las entradas (main-wrapper).




Diseño>edición HTML>expandimos artilugios


Busca la etiqueta ]]></b:skin> y encima añade estos bloques de CSS:

#etiquetasbloque {
width:870px;
text-align:left;
margin:0 auto 10px;
line-height: 1.6em;
clear:both;
padding-top: 12px;
}

.etiqueta {
color: #000000;
line-height: 1.5em;
}

.etiqueta .widget {
padding:0 0 1.5em;
margin:0 .4em 1.5em .4em;
}

.etiqueta ul {
list-style:none;
margin:0 0 0;
padding:0 0 0;
}
.etiqueta ul li {
float:left;
list-style-type: none;
width:20%;
margin: 0 0 5px;
background: transparent url(http://www.iconfinder.net/data/icons/silk2/bullet_green.png) no-repeat left center;
padding-left: 15px;
}

.etiqueta:hover {
color: #999999;
}

Ahora busca esta línea:

<div id='main-wrapper'>

Y encima agrega lo siguiente:

<div id='etiquetasbloque'>
<b:section class='etiqueta' id='etiqueta'>
<b:widget id='Label112' locked='false' title='Etiquetas' type='Label'>
</b:widget>
</b:section>
</div>

Nota:

En el primer paso, debes pegar los bloques de CSS que darán estilo a las columnas. Si realizaste el truco de las etiquetas divididas en cuatro columnas encima del pié del blog, no será necesario que los introduzcas de nuevo.

Cómo controlar el número de entradas a mostrar en "etiquetas"

¡ Artículo publicado en el blog El Balcón de Jaime, que pese a ser un blog terminado, es uno de los mejores en truvos blogger. ! Ve la entrada en su blog original.

Controlar el número de entradas a mostrar en las páginas de etiquetas
Si deseas evitar que tu blog tarde demasiado en cargar cuando accedes a las entradas de una etiqueta, o simplemente no te gusta que las entradas ocupen un largo espacio y desconfiguren la longitud de tu blog, este truco te servirá de ayuda.

Blogger por defecto, muestra un total de 20 posts recientes en las páginas de etiquetas, pero siguiendo los pasos que te muestro a continuación, puedes escoger el número de posts a mostrar.


Diseño>Edición de HTML>expandimos artilugios




Busca esta línea (puedes encontrar hasta tres iguales):

data:label.url

Y sustituye cada una por esto:

data:label.url + "?max-results=NUMERO"

En donde dice NUMERO debes insertar el número de entradas a mostrar.

Una vez hayas escrito el número de posts a mostrar en cada una de las líneas guarda la plantilla:



Ahora dirígete a tu blog y haz clic sobre alguna etiqueta. Comprueba que se muestra el mismo número de entradas que indicaste.

Como ofrecer la opción de suscribirse a distintas categorías

¡ Artículo publicado en el blog El Balcón de Jaime, que pese a ser un blog terminado, es uno de los mejores en truvos blogger. ! Ve la entrada en su blog original.

Ofrecer la opción de suscribir a diferentes etiquetas

Este truco es muy sencillo de realizar y ofrece la gran ventaja de ahorrarnos el incluir elementos de página que posibiliten la suscripción a etiquetas o categorías del blog.

Se trata de poner un código en la plantilla para que, con solo pulsar el botón Feed del navegador, aparezcan distintas formas de suscribirse al blog:


En la imagen puedes ver la opción "Suscribirse a Setas comestibles" debido a que estoy leyendo artículos con esta etiqueta.


Para incluirlo en tu blog sigue los siguientes pasos:


Diseño>Edición de HTML>expandimos artilugios




Busca la etiqueta <body> (que estará debajo de la etiqueta </head>) y encima inserta este bloque:

<b:if cond='data:blog.pageType != &quot;archive&quot;'>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<link expr:href='&quot;DIRECCION DE TU BLOG/feeds/posts/default/-/&quot; + data:blog.pageName' expr:title='data:blog.title + &quot; - &quot; + data:blog.pageName' rel='alternate' type='application/rss+xml'/></b:if></b:if></b:if>

Sustituye DIRECCION DE TU BLOG por la url de tu sitio web (sin incluir la barra final, es decir, la que te muestro en rojo:http://elbalcondejaime.blogspot.com/).

Para terminar, guarda la plantilla:


Como poner imágenes o iconos distintos según la categoría

¡ Artículo publicado en el blog El Balcón de Jaime, que pese a ser un blog terminado, es uno de los mejores en truvos blogger. ! Ve la entrada en su blog original.

Imágenes diferentes según la etiqueta bajo el título de las entradas

Lo que vamos a conseguir con este truco que se me ha ocurrido es algo muy útil, que nos puede ayudar a roganizar el blog de otra forma, a crear un índice, a destacar las entradas de una etiqueta o categoría específica...

Básicamente lo que haremos es introducir un código en la plantilla que permitirá mostrar una imagen (o un enlace / texto) en especial en todas las entradas de una etiqueta.

Pongamos un ejemplo para entenderlo mejor. Si yo tengo un blog con las siguientes etiquetas: peces, perros y gatos, insertaré en el código el nombre de cada animal y una foto que después aparecerá en las entradas con esa etiqueta para describirlo.

En la siguiente imagen puedes ver como cada entrada tiene su correspondiente imagen (la primera entrada tiene la etiqueta "peces", la segunda "perros" y la tercera "gatos").




Las fotos aparecerán en todos los artículos con la etiqueta "perros, gatos o peces" respectivamente, lo que ayudará bastante a tus lectores.


Diseño>Edición de HTML>expandimos artilugios




Busca este bloque de código:

<b:if cond='data:post.title'>
<h3 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>

Y justo debajo añade esto:

<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.name == &quot;ETIQUETA&quot;'>
<img align='right' src='URL DE LA IMAGEN'/>
</b:if>
<b:if cond='data:label.name == &quot;ETIQUETA&quot;'>
<img align='right' src='URL DE LA IMAGEN'/>
</b:if>
<b:if cond='data:label.name == &quot;ETIQUETA&quot;'>
<img align='right' src='URL DE LA IMAGEN'/>
</b:if>
<b:if cond='data:label.name == &quot;ETIQUETA&quot;'>
<img align='right' src='URL DE LA IMAGEN'/>
</b:if>
<b:if cond='data:label.name == &quot;ETIQUETA&quot;'>
<img align='right' src='URL DE LA IMAGEN'/>
</b:if>
<b:if cond='data:label.name == &quot;ETIQUETA&quot;'>
<img align='right' src='URL DE LA IMAGEN'/>
</b:if>
</b:loop>

Reemplaza en el código:

ETIQUETA por la etiqueta que desees. Ten en cuenta que tienes que escribirla tal y como aparece en las entradas del blog (con mayúsculas o minúsculas).

URL DE LA IMAGEN por la dirección del icono o la imagen que representará a la etiqueta que incluyas.

Si deseas añadir más etiquetas y por tanto, más imágenes, utiliza esta línea tantas veces como quieras:

<b:if cond='data:label.name == &quot;ETIQUETA&quot;'>
<img align='right' src='URL DE LA IMAGEN'/>
</b:if>

Pero recuerda que debes pegarla siempre antes del cierre </b:loop>.

Las imágenes aparecerán a la derecha del título pero puedes centrarlas o alinearlas a la izquierda cambiando align='right'por align='center' o align='left'.

Finalmente guarda la plantilla:

Como editar el texto y el aspecto del cartel "Mostrando entradas con la etiqueta..."

¡ Artículo publicado en el blog El Balcón de Jaime, que pese a ser un blog terminado, es uno de los mejores en truvos blogger. ! Ve la entrada en su blog original.

Editar el texto y el aspecto del cartel "Mostrando entradas con la etiqueta..."

Hace ya bastante tiempo aprendimos a ocultar o eliminar el cartel con el mensaje "Mostrando entradas con la etiqueta..." y, a decir verdad, nos fué de mucha utilidada casi todos.

En un comentario que leí hace unos días me preguntaban si existe una forma de editar el texto del cartel, así como darle un estilo personalizado.

Y por supuesto que existe, es más, se me ha ocurrido un método sencillísimo de conseguir ambas cosas...

Editar el texto y el aspecto del cartel


Diseño>edición HTML>expandimos artilugios




Busca este bloque de código:

<div class='status-msg-wrap'>
<div class='status-msg-body'>
<data:navMessage/>
</div>
<div class='status-msg-border'>
<div class='status-msg-bg'>
<div class='status-msg-hidden'><data:navMessage/></div>
</div>
</div>
</div>

Y reemplázalo por esto otro:

<div class='status-msg-wrap'>
Estás viendo los artículos con la etiqueta... &quot;<data:blog.pageName/>&quot;</div>

Puedes cambiar la frase que se mostrará en el cartel y escribir algo a tu gusto.

Ahora vamos a aplicarle el CSS necesario para poder editarlo a nuestro gusto.

Busca la etiqueta ]]></b:skin> y añade este bloque encima:

.status-msg-wrap{background:url("URL DE LA IMAGEN") no-repeat scroll 0 0 #fff;
padding: 4px; border: 1px solid #ccc;}

Sustituye URL DE LA IMAGEN por la dirección del icono o la imagen de fondo [+].

Aquí te dejo el icono del ejemplo, por si deseas utilizarlo en tu cartel:


trucos y ayuda blogger


En caso de querer añadir una imagen de fondo y que ésta rellene todo el cartel, cambia el atributo no-repeat por repeat.

- Puedes editar la separación que habrá entre el contenido del cartel y el borde en la línea padding: 4px; (editando la cifra -4- por una mayor o menor).

- El grosor del borde puedes editarlo en la línea border: 1px solid #cccccc;, cambiando el valor 1px. El estilo (solid) también puede editarse. Para ello, visita este artículo acerca de los estilos de borde.

Finalmente el color del borde (#cccccc) también puede cambiarse, con ayuda de la tabla de colores.

Guarda tu plantilla para terminar:

Cambiar la palabra Etiqueta por una imagen o palabra

¡ Artículo publicado en el blog El Balcón de Jaime, que pese a ser un blog terminado, es uno de los mejores en truvos blogger. ! Ve la entrada en su blog original.

Reempazar el texto "Etiquetas" por una imagen o icono
Si la plantilla que usas en tu blog de blogger no ha sido editada o modificada, lo más probable es que, al lado de las etiquetas que asignas a cada una de tus entradas, aparezca la palabra "Etiquetas".

En esta entrada aprenderemos a reemplazar esa palabra por una imagen o un icono cualquiera, con el propósito de obtener algo muy similar a lo que puedes ver a continuación:


Diseño>Edición de HTML>expandimos artilugios



Busca la línea <data:postLabelsLabel/> que estará en un código muy parecido a este:

<div class='post-footer-line post-footer-line-2'>
<span class='post-labels'>
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
</b:loop>
</b:if>
</span>
</div>

Simplemente tienes que borrar esa línea y pegar esta otra en su lugar:

<img style="border: none;" src="URL DE LA IMAGEN"/>

Incluye la dirección de tu icono o imagen en donde dice URL DE LA IMAGEN.

Haz vista previa para ver el resultado y guarda la plantilla para finalizar:

Inserta una nube de etiquetas o categorías en el blog

¡ Artículo publicado en el blog El Balcón de Jaime, que pese a ser un blog terminado, es uno de los mejores en truvos blogger. ! Ve la entrada en su blog original.

Nube de enlaces
NubedeenlacesHace tiempo descubrimos un truco muy interesante que nos permitía mostrar las etiquetas del blog en forma de nube 'flotante', que además, tenía movimiento y resultó ser una completa novedad en blogger.

En esta otra entrada voy a enseñarte a incluir una nube de enlaces en el blog, sin movimiento, pero totalmente personalizable y bastante atractiva.

La instalación es sencilla ya que únicamente requiere el uso de un gadget o elemento de página y además, los colores o tamaños podrán editarse.

Diseño>añadir gadget (elemento de página)>html-javascript


Lista de blogs con movimiento personalizable en blogger

Pega el código necesario:

<div id="blnub">
<a href="DIRECCION PAGINA" class="blink1">TITULO</a>
<a href="DIRECCION PAGINA" class="blink2">TITULO</a>
<a href="DIRECCION PAGINA" class="blink3">TITULO</a>
<a href="DIRECCION PAGINA" class="blink4">TITULO</a>
<a href="DIRECCION PAGINA" class="blink1">TITULO</a>
<a href="DIRECCION PAGINA" class="blink3">TITULO</a>
<a href="DIRECCION PAGINA" class="blink2">TITULO</a>
<a href="DIRECCION PAGINA" class="blink4">TITULO</a>
<a href="DIRECCION PAGINA" class="blink1">TITULO</a>
<a href="DIRECCION PAGINA" class="blink3">TITULO</a>
<a href="DIRECCION PAGINA" class="blink4">TITULO</a>
<a href="DIRECCION PAGINA" class="blink1">TITULO</a>
<a href="DIRECCION PAGINA" class="blink3">TITULO</a>
</div>

<style>
#blnub{text-align:center; padding:5px;}
#blnub a{text-decoration:none;}
#blnub a:hover{text-decoration:none; color: #CC3366;}
#blnub .blink1{font-size:14px; color:#3399CC;}
#blnub .blink2{font-size:20px; color:#3366CC;}
#blnub .blink3{font-size:16px; color:#006699;}
#blnub .blink4{font-size:15px; color:#339966;}
</style>

En cada línea reemplaza DIRECCION PAGINA por la dirección del blog, la web o el artículo al que conducirá el enlace y TITULO por el título que aparecerá en la nube.

Si deseas añadir más enlaces a la nube, inserta líneas como esta (siempre antes del cierre </div>) :

<a href="DIRECCION PAGINA" class="blink3">TITULO</a>

Teniendo en cuenta que blink3 es un estilo distinto a blink1, blink2 y blink4 por lo que puedes editar el valor 3 para cambiar el aspecto del enlace.

Puedes cambiar el color de los enlaces editando el valor hexadecimal de las líneas 'color:#3399CC;' y haciendo uso de la tabla de colores.

Guarda el gadget para terminar.

Aplicación de Nube de etiqueta por Oloblogger


Hace como 4 años,Roy Tanckideó un sistema para que las etiquetas de un blog pudieran verse en un formato que simulaba tres dimensiones. Le llamó Cumulus.

Por aquellas fechas publiqué algunas entradas para aplicarlo en Blogger siguiendo la adaptación de Blogger Buster(Blogumus), añadiendo algunas modificaciones que permitían usar enlaces de cualquier otro tipo y mostrando también cómo hacer una nube de imágenescapturadas automáticamente desde un álbum de Flickr o Picasa.

El caso es que desde el principio muchos fueron los que tuvieron problemas y todavía hoy, bastantes me los siguen planteando. Esta entrada servirá de compendio resumido de cómo instalar las dos variantes mencionadas y que además... os funcionen!!

Y si no lo hacen que al menos sepáis cómo repararlas, porque la única causa por la que se os puede cascar el invento es por el problema del alojamiento de la base del gadget: el fichero tagcloud.swf


Como se puede deducir de su extensión, este fichero es un ShockWave Flash o lo que es lo mismo, una animación. Es el alma de todo y los códigos que veréis a continuación lo único que hacen es indicar los parámetros necesarios para que se incorpore un contenido determinado y que se vea con cierto aspecto.

Pero si no podemos acceder en caliente al .swf no tendremos nada y ese es el origen de las desdichas de casi todos. Así que antes de pensar que el cacharrito no funciona, lo primero que hay que hacer es comprobar que nuestro fichero marcha. 

En los siguientes ejemplos tenéis uno que -de momento- pita y que está alojado en 000Webhost, hosting gratuitio que últimamente estoy probando con algunas cosas que no puedo almacenar en Blogger.

Su dirección eshttp://oloblogger.comuv.com/tagcloud.swf, pero una vez más insisto en que debéis descargarlo, subirlo a un sitio bajo vuestro control y por último sustituir la dirección que yo utilicé por la vuestra (ojo que aparece dos veces). De lo contrario, cualquier día os podrá dejar de funcionar otra vez.

Este es el link para bajarlo:




Nube de etiquetas automática


Este tipo de código hay que pegarlo en la plantilla, sin expandir artilugios, después de la línea que forma la sección correspondiente a la barra lateral.

Las referencias típicas serían <b:section class='sidebar' id='sidebar' preferred='yes'> en plantillas clásicas y<b:section-contents id='sidebar-right-1'>en las del nuevo diseñador. Hay muchas variantes pero las palabras clave siempre son section y generalmente sidebar.

Después de la instalación podréis moverlo con facilidad más abajo dentro de la sidebar o incluso a otra zona de gadgets, accediendo al apartado Diseño delEscritorio.

Ventaja: Las etiquetas se generan automáticamente
Inconveniente: Los enlaces no funcionan en algunas versiones de IE

<b:widget id='Label88' locked='false' title='Labels' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
&lt;object type=&quot;application/x-shockwave-flash&quot; data=&quot;http://oloblogger.comuv.com/tagcloud.swf&quot; width=&quot;250&quot; height=&quot;200&quot; allowscriptaccess=&quot;always&quot; &gt;
&lt;param name=&quot;movie&quot; value=&quot;http://oloblogger.comuv.com/tagcloud.swf&quot; /&gt;
&lt;param name=&quot;wmode&quot; value=&quot;transparent&quot; /&gt;
&lt;param name=&quot;flashvars&quot;
value=&quot;bgcolor=0xffffff;&amp;tcolor=0x000000&amp;hicolor=0xcc0000&amp;mode=tags&amp;distr=true&amp;tspeed=100&amp;tagcloud=&lt;tags&gt;
<b:loop values='data:labels' var='label'>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url' style='18'><data:label.name/></a>
</b:loop>
&lt;/tags&gt;&quot; /&gt;
&lt;p&gt;Blogumulus by &lt;a href=&#39;http://www.roytanck.com/&#39;&gt;Roy Tanck&lt;/a&gt; and &lt;a href=&#39;http://www.bloggerbuster.com&#39;&gt;Amanda Fazani&lt;/a&gt;&lt;/p&gt;
&lt;/object&gt;
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>


Nube de etiquetas o de enlaces simples (manual)


Para subsanar el problema con IE existe una segunda alternativa, que es prescindir del loop que genera automáticamente las etiquetas. En este caso ya no necesitamos editar la plantilla y directamente podemos poner el código en un gadget tipo HTML/JavaScript.

Ventaja: Podemos mostrar sólo las etiquetas que más nos interesen. Podemos crear una lista de enlaces cualquiera.
Inconveniente: No basta con copiar y pegar, hay que ir incorporando a mano los enlaces que queremos que se vean

<embed quality="high" allowscriptaccess="always" flashvars="bgcolor=0xFFFFFF&tcolor=0x990000&hicolor=0x333333&mode=tags&distr=true&tspeed=100&tagcloud=&lt;tags&gt;
&lt;a href='http://NOMBRE_BLOG.blogspot.com/search/label/ETIQUETA1' style='18'&gt;ETIQUETA1&lt;/a&gt;
&lt;a href='http://NOMBRE_BLOG.blogspot.com/search/label/ETIQUETA2' style='18'&gt;ETIQUETA2&lt;/a&gt;
&lt;a href='http://NOMBRE_BLOG.blogspot.com/search/label/ETIQUETA3' style='18'&gt;ETIQUETA3&lt;/a&gt;

&lt;/tags&gt;" type="application/x-shockwave-flash" src="http://oloblogger.comuv.com/tagcloud.swf" id="tagcloud" wmode="transparent" name="tagcloud"></embed>

Cada línea de estas de entre las marcadas en gris, tiene que ser personalizada con la dirección de vuestro blog y la etiqueta que queréis mostrar. Una línea para etiqueta visible.

&lt;a href='http://NOMBRE_BLOG.blogspot.com/search/label/ETIQUETA1' style='18'&gt;ETIQUETA1&lt;/a&gt;


Y de la misma manera que hemos hecho con la dirección de búsqueda de una etiqueta del blog, podemos incluir como URL del enlace cualquier otro destino que queramos. 

Como ponemos las direcciones a mano ya no estarán vinculadas a las etiquetas y así podremos construir con este mismo aspecto de esfera móvil, un blogroll, una lista de sitios recomendados o cualquier otro tipo de conjunto de enlaces.


Configuración


En ambos casos (formando parte de la plantilla o como gadget) los parámetros de configuración son los mismos:

  • bgcolor=0xFFFFFF: El color de fondo en hexadecimal
  • tcolor=0x000000: Código hexadecimal del color del texto del enlace
  • hicolor=0xcc0000: Código hexadecimal del color del hover para el texto del enlace
  • distr=true: Para hacer una distribución uniforme de las etiquetas por el espacio disponible. False para que no sea así.
  • tspeed=100: El número indica la velocidad a la que se desplazarán los enlaces cuando pasemos el puntero por encima. A mayor número, mayor velocidad. Probad con 1500 y veréis qué divertido.
  • style="18": Tamaño de fuente en píxeles.

<param name="wmode" value="transparent" />
wmode="transparent": Para anular el color de fondo y así dejar ver el fondo de la página tras los enlaces.

Tanto object como embed admiten los valores width y height para poder limitar el espacio que ocupará la nube.

-Artículo por Oloblogger. Viitar Sitio.

Gracias por tu visita al Blogger Magazine, las últimas novedades de los mejores maestros bloggers.
Related Posts Plugin for WordPress, Blogger...