Ahorrando espacio en el gadget de etiquetas


Es frecuente que a medida que van aumentando los post publicados en nuestro blog también aumenten las etiquetas hasta formar una fila larga.

Hoy, en este post de resumen o compendio, vamos a recordar tres formas de ahorrar espacio en este gadget en particular.

1.§ Nube de etiquetas

Una forma de evitar que nuestras etiquetas están en una fila larga y poco estética sería colocarlas en forma de nube ( como en el caso de mi blog).



En tres post vimos cómo conseguir nuestra nube:

» Mediante el gadget de blogger (ver entrada).
» Añadiendo manualmente en la plantilla, mediante un script (ver entrada).
» Añadiendo una nube de etiquetas en movimiento (ver entrada).

2.§ Expandir/contraer gadget de etiquetas

Es otra opción para ahorrar espacio y si la nube de etiquetas no nos convence.


Vimos dos maneras de agregarla a nuestro blog:

» Mediante las librerías de Google API ,Prototype y Scriptaculous, con efecto deslizante (ver entrada)
» Usando javascript, sin efecto deslizante (ver entrada)

3.§ Etiquetas en dos columnas

Y si las dos formas anteriores no nos convencen, podemos colocar las etiquetas en dos columnas (ver entrada)

14 opinaron:

squirrel

Muy bueno; ahora habrá que decidir cuál forma es la mejor :)

Besos

Responder
Yessmi

Fenial; yo apliqué la opción uno, de la nube en movimiento.

Un abrazo

Responder
Graciela

Bueno Jési, si alguien quería tener un resumen perfecto :o aquí lo tienen.

Besitos y días bonitos :D

Responder
Jéssica YK

» squirrel: todas son buenas, depende de ti cuál escoger.

» Yessmi: me gustará ver cómo quedó en tu blog; a ver si me dejas la URL porque no puedo ver tu perfil :)

» Graciela: gracias por tus palabras y por la visita :)

S@lu2

Responder
Francisco

Hola Jesi como estas, te quiero hacer una pregunta para ver si esta disonible en blogger lo que quiero hacer, viste el blog del Respaldo?, quiero poner un directorio horizontal de la A a la Z para que cdo entre el lector le sea mas facil ubicar el artista, y despues entre en el artista y busque el disco que quiere descargar, se puede hacer eso?

Espero tus comentarios, besos

Responder
Jéssica YK

Francisco:
Podría hacerse con un menú horizontal, pero me gustaría saber si quieres que al dar pasar el mouse sobre la pestaña del menú se desplieguen subcategorías o que al dar click sobre une pestaña (digamos una pestaña con la letra "C") se abra una lista de entradas (post).

Necesito tu respuesta para ayudarte.
Gusto en saludarte :)

S@lu2

Responder
Francisco

Hola Jessi, gracias por tu respuesta, mira sería algo como esto, metete acá y te vas a dar cuenta lo que te digo.

http://www.chordie.com/

Donde dice browser artist: A B C D .... etc.
Ahí cdo seleccionas la letra saldrían las bandas, artistas, por ej:
Andres Calamaro, y cdo volves a criclear en Andres Calamaro te saldrian nuevamente un menu con todas sus canciones.

Ahora espero haberte orientado mejor!

Besos y como siempre, gracias y no hay apuro.

Responder
Jéssica YK

Francisco:
Voy a revisar la página que me indicas para poder ayudarte.

S@lu2

Responder
Jéssica YK

Francisco:

Estuve viendo la página y creo que ya se cómo podrías hacer algo parecido...Aunque es un poco largo de explicar.

Bien, primero pega este código en un nuevo elemento HTML, cuando lo guardes, arrasta el gadget debajo de la cabecera:

<style> #tabs { font: bold 7.5pt Verdana; } #navcontainer { float:left; margin: 0; padding: 4px 0px; width:100%; background:#575656; font-size:10px; line-height:normal; } ul#navlist { margin: 0; padding: 0; list-style-type: none; white-space: nowrap; } ul#navlist li { float: left; font: bold 7.5pt Verdana; line-height: 14px; margin: 0; padding: 2px 0 2px 0; } #navlist a, #navlist a:link { margin: 0; padding: 2px; color: #fff; border: 4px solid #575656; text-decoration: none; } #navlist a:hover { color: #fff; border: 3px solid #fff; } </style> <div id="navcontainer"> <ul id="navlist"> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>

Reemplaza Link1, Link2, etc por "A" "B", etc.

Ahora hay que reemplazar # por los enlaces y es ahí donde está un poco la dificultad.
Los enlaces que pongas tendría que ser de las etiquetas, pero como va a ser un menú o directorio por letras y no por los nombres de los artistas, habría que colocar etiquetas a cada artista con una letra y que estas etiquetas de letras no aparezcan en en la nube de etiquetas de la sidebar (donde le pusiste como encabezado "Bandas"). No sé si me dejé entender, pero mejor será con un ejemplo.

Digamos que publicas una entrada sobre Arjona, entonces lo etiquetas con la etiqueta "Arjona", esta etiqueta estará visible en la nube de etiquetas ; pero, otra etiqueta que tendrías que colocar a la entrada o post sería "A", esta etiqueta estaría oculta en la nube de etieutas, pero es necesaria para el directorio porque necesitamos el enlace o URL para ponerlo en el menú de arriba.

Y así sería con las demás entradas, el nombre del artista y una letra.

Cuando etiquetes todas tus entradas ya publicadas con una letra, has click en las letras que aparecerán en tu nube de etiquetas y copia la dirección o URL y pégala en el código anterior.

Luego, para ocultar esas etiquetas de la nube ve a tu gadget de nube de etiquetas. Donde dice "Mostrar, has click en "Etiquetas seleccionadas" y desmarcas las etiquetas que quedarán ocultas.

Eso sería todo, si tienes dudas me avisas :)

S@lu2

Responder
Francisco

Jessi muchas gracias por tu respuesta, voy a probarlo a ver como sale todo y te aviso ok.

Saludos!

Responder
Francisco

JESSI ME QUEDA BARBARO, EL TEMA QUE NO ME SALE TODAVIA ES COMO HAGO PARA ETIQUETAS POR EJ: ARJONA CON LA LETRA "A", digo

como hago para que la etiqueta tenga 2 etiquetas, asi y todo sabes que le puse un link de prueba en donde va el # y no paso nada che!! porque será??.

Espero que me comentes lo de la doble etiqueta

Besos

Responder
Jéssica YK

» Francisco:
En el editor de entradas es donde debes de etiquetar cada entrada, con dos etiquetas.

Ingresas a una entrada, y en la parte de abajo verás un espacio en blanco al lado de un texto que dice Etiquetas de esta entrada. En el espacio en blanco, escribe el nombre de las etiquetas separadas or comas, por ejemplo, Arjona, A.

Debes de etiquetar todas tus entradas de esa forma, con el nombre del artista y una letra; luego esas etiquetas aparecerán en la lista de etiquetas de la sidebar de tu blog; das click a una y copias la URL. Esa URL es la que pegaráss en el código, en lugar de #.

Si necesitas más ayuda, me avisas :)

S@lu2

Responder
Francisco

Jessi quedó muyyyyy bueno, le hice unos retoques a lo pampa y salió a la fuerza! ajjaja

Lo único que todavía no puedo lograr es que al linkear la "A" por ej, me separe los autores, Arjona, Alejandro Zaenz, etc,

Cdo vos tocas la "A", sale todo junto y mezclado.

Me gusta igual, yo porque me puse un poco maniático, ajja.

Muchas gracias Jessi, la verdad estoy impresionado de lo q sabe mi maestra.

Besos

Responder
El cofre del Duende

Hola, felicidades y gracias por todas tus ayudas realmente lo que quiero es sencillo pero no se nada de esto, quisiera que mis etiquetas sean como botones, no se si me explico, pueden ser rectangulos con bordes y pulsar en cada una de ellas, por ejemplo, inicio, quienes somos etc eso se puede o es obligatorio hacer un menu vertical? lo otro que quiero es que cuando abra tenga fijo el inicio los otros archivos siempre a continuación del inicio
gracias de antemano
Bel

Responder

Por favor, trata de tener habilitado tu perfil (has click en "Comenta con el antiguo editor" para iniciar sesión) o deja un enlace a tu blog escogiendo la opción "Nombre/URL", procura no dejar comentarios Anónimos.
Nota: Si es que se presenta algún problema con el formulario de comentarios, sólo has click en "Comenta con el antiguo editor"

Gracias por participar en el blog.

inicio