13

Lista de links original

Es una forma diferente de mostrar en tu sidebar una lista de links, o lo que sea. Lo vi en una web y lo tomé prestado :-$ de su código fuente, aunque le he hecho alguna pequeña modificación.
Podemos sustituir el icono que usamos para subir y bajar por el que más nos guste, solo hay que subirlo a una web de alojamiento de imágenes, copiar su url (dirección) y colocarla en el código.
Cuando pinchemos en el icono de arriba (Abrir), la lista de links se expandirá y para cerrar pinchamos en el icono de abajo (Cerrar).
Podéis verlo en mi sidebar en "Recomendados" y "Blogs de Ayuda" con un pequeño ojo para abrir y cerrar.

Os dejo el código:
<li>
<h2>TÍTULO QUE SE MOSTRARÁ <img alt="Desplegar" src="URL DE LA IMAGEN (ICONO)" onclick="getElementById('divContenedor_3').style.display='block';getElementById('boton_3').style.display='block';" title="Desplegar"/></h2>
<br/>
<div id="divContenedor_3" style="display: none;">
<ul><li><a href="URL DE LA PÁGINA">NOMBRE DE LA PÁGINA</a></li>
<li><a href="URL DE LA PÁGINA">NOMBRE DE LA PÁGINA</a></li>
<li><a href="URL DE LA PÁGINA">NOMBRE DE LA PÁGINA</a></li>
<li><a href="URL DE LA PÁGINA">NOMBRE DE LA PÁGINA</a></li>
</ul>
</div>
<br/>
<div id="boton_3" style="display: none;">
<img alt="Contraer" src="URL DE LA IMAGEN (ICONO)" onclick="getElementById('divContenedor_3').style.display='none';getElementById('boton_3').style.display='none';" title="Contraer"/>
</div>
</li>
NOTA
Si vais a emplear el código más de una vez, como he hecho yo, tenéis que sustituir donde dice "divContenedor" y "boton" por otro número, es decir si aplicáis el código por primera vez, ponéis 1, a la siguiente vez que lo uséis 2 y sucesivamente... ya que si no se hace así, los códigos se "lían" entre ellos y no funcionan.
Si os apetece usar mis ojitos :-) os dejo la url:
Abrir:
http://img129.imageshack.us/img129/5394/eye1ti5.png
Cerrar:
http://img209.imageshack.us/img209/5336/eyenq1.png

Y esta otra de unas flechitas muy guapas:
Abrir:
http://img75.imageshack.us/img75/7168/fle02ee5.gif
Cerrar:
http://img77.imageshack.us/img77/5382/fle03ys4.gif

Entradas Relacionadas:

13 comentarios:


Anónimo

Rose, ¿Este truco es para poner los links en forma de cascada como los tienes tu?

He cogido otro codigo en otro blog de ayuda y me sale pero queria probar con este tuyo y no me sale correctamente...

Anónimo

No, toxic, este muestra un pequeño icono al lado del título que al pinchar en el se expanden los links y se ve otro icono al final de los links para volver a cerrarlos.

Hace tiempo lo tenía en El Escaparate y queda chulo.

¿Qué problema tienes?

Anónimo

Muy buenas Rosa.
Me gustaríasaber como puedo tener un bloquecito como el que tu tienes en tu blog de RECOMENDADOS y BLOGS AMIGOS, es decir, igual que el tuyo con la barra de desplazamiento lateral etc..., soy incapaz de hacerlo según este comentario y código. No quiero ningún ojito que abra o cierre la lista, la quiero abierta como la que tu tienes y con la posibilidad de ver algúnas web o amigos más con la barra lateral "ascensor".

Ayudame porfavor Rosa.
Gracias

Anónimo

Charete los links los he añadido desde un elemento de página de Blogger, de forma "normal" como cuando añades cualquier lista de links y las barras se añaden más tarde, según explico en este post:

Scrollbars

Anónimo

Wenas... gracias a tus truquillos me acabo de hacer un blogroll chulísimo me ha quedado precioso, gracias otra vez Rosa!

Anónimo

Juanjo, hasta las flechitas quedan bien con el blog, por eso del "tipo comic" ;-)

Por cierto, la nueva cabecera está super-simpática:D:D

Unknown

Oye Rosa como haces para que cuando haces clik, cambie de icono??.
Genial tu blog!!!

Anónimo

Max, ¿Te refieres a las listas de mi sidebar?
Si es así, tengo preparada una entrada sobre eso, que subiré en breve ;-)

MAG

Rosa:
Apliqué el truco en mi blog sin problemas.
La consulta es si se puede agregar una descripción del contenido de los blog, y si tengo que agregar bloques de cuatro enlaces al repetir el código.
Mi blog es http://itibonzi.blogspot.com y recién estoy empezando a dar mis primeros pasos en este mundo fascinante.
Gracias por tu ayuda.
Miguel.

Anónimo

MAG En el ejemplo he añadido cuatro enlaces, pero puedes poner los que necesites... cada vez que repitas esta línea en el código (justo debajo de la última)podrás colocar un nuevo enlace:
<li><a href="URL DE LA PÁGINA">NOMBRE DE LA PÁGINA</a></li>

Debajo de cada una de esas líneas, es decir, del enlace a cada blog, podrías incluir un texto como descripción, entre <p> y </p>

MAG

Rosa:

Gracias por la ayuda y la atención.
Te seguiré consultando para mejorar mi blog.

Anónimo

si gracias, pero una consulta yo quiero que pase eso pero... que con el mismo boton de desplegar lo contraiga como lo puedo hacer??

Anónimo

kappiih Este por ejemplo...

http://elescaparatederosa.blogspot.com/2009/04/expandir-y-contraer-cualquier-gadget.html

Y si buscas en el blog creo recordar que hay algún sistema más...

Publicar un comentario

Si vas a dejar una consulta, procura tener habilitado tu perfil en Blogger o deja la url del blog a revisar (no enlace).

Los comentarios están siendo moderados.

:) :(( :( :P :D :$ ;) :I :X :O |O :S