Configuración:
.
Biología
.
Botánica
.
Tecnología
.
Sociedad
A mis trece años de edad, el día 2 de Diciembre de 2007 inicié ‘El Balcón de Jame’. Este humilde espacio, cuyo secreto siempre fue el de compartir sin recibir nada a cambio, me dio la oportunidad de conocer un mundo nuevo, un entorno en el que me sentía yo mismo.

Hoy, 17 de abril de 2011 finalizo esta etapa de mi vida con una gran sonrisa y junto al recuerdo que este blog y cada unos de vosotros me habéis concedido.

He sido bloggero.

Jaime Trujillo Escobedo.

Menú vertical expandible

Un menú bastante cómodo y práctico si lo que queremos es tener una especie de "organización" al buscar cosas, se trata de un menú vertical que al hacer click se expande por las categorias, miralo en la imágen y me entenderás...



Diseño>edición HMTL>expandimos artilugios

Buscaremos la etiqueta <head> y justo debajo le pegaremos este código:

<style type="text/css">.texthidden {display:inline}.shown {display:block}</style><script type="text/javascript">document.write('<style>.texthidden {display:none} </style>');</script><script type="text/Javascript">function expandcollapse (postid) {whichpost = document.getElementById(postid);if (whichpost.className=="shown") {whichpost.className="texthidden";}else {whichpost.className="shown";}}</script>

Ahora guardamos cambios.

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

Pegamos el código:

<a href="javascript:void(0);" onclick="expandcollapse('video')"><img border="0" src="http://img340.imageshack.us/img340/4420/54074410lz1.gif"/></a><br/>
<ul id="video" class="texthidden">
<li><a href="URL DEL SITIO" target="_blank">TITULO</a></li>
<li><a href="URL DEL SITIO" target="_blank">TITULO</a></li></ul>
<a href="javascript:void(0);" onclick="expandcollapse('musica')"><img border="0" src="http://img230.imageshack.us/img230/4025/68368781hz1.gif"/></a><br/>
<ul id="musica" class="texthidden">
<li><a href="URL DEL SITIO" target="_blank">TITULO</a></li>
<li><a href="URL DEL SITIO" target="_blank">TITULO</a></li></ul>
<a href="javascript:void(0);" onclick="expandcollapse('imagen')"><img border="0" src="http://img138.imageshack.us/img138/9530/51862521cf7.gif"/></a><br/>

<ul id="imagen" class="texthidden">
<li><a href="URL DEL TITULO" target="_blank">TITULO</a></li>
<li><a href="URL DEL SITIO" target="_blank">TITULO</a></li></ul>
<a href="javascript:void(0);" onclick="expandcollapse('contadores')"><img border="0" src="http://img337.imageshack.us/img337/443/43453470ow3.gif"/></a><br/>
<ul id="contadores" class="texthidden">
<li><a href="URL DEL SITIO" target="_blank">TITULO</a></li>
<li><a href="URL DEL SITIO" target="_blank">TITULO</a></li></ul>
<a href="javascript:void(0);" onclick="expandcollapse('botones')"><img border="0" src="http://img406.imageshack.us/img406/1425/73940793gl3.gif"/></a><br/>
<ul id="TITULO" class="texthidden">
<li><a href="URL DEL SITIO" target="_blank">TITULO</a></li>
<li><a href="URL DEL SITIO" target="_blank">TITULO</a></li></ul>

Recuerda...

- Donde pone "URL DEL SITIO" ponemos la dirección url de nuestro/a web o blog elegido/a

- Donde pone "TITULO" pondremos el titulo del sitio web o blog


- Si nos damos cuenta hay direcciones de imágenes en el código,(representadas en color verde) las cambiaremos por algunas relaccionadas con los enlaces que pongamos.

¡Suerte!

www.bonaisima.com dice...

Una pregunta Jaime ,como le agreg0 otro modulo ,por ejemplo,le he cambiado los nombres .gif ,pero ccuando trato de agregar otro modulo adicional de los que tiene ,me habre la ventana de arriba ,como logro agregarle un modulo adicional

Jaime Trujillo Escobedo dice...

bonaisima, te comento que aún debo revisar esta entrada. En cuanto modifique el menú te avisaré y podrás hacer lo que me pides.

Gra dice...

Hola Jaime !!
Este menú me gusta mucho....estoy tratando de entenderlo. Por casualidad: como hiciste el menú de categorias de tu sidebar????. si no es indiscrecion??? ;)..tambien me viene a la perfección!!
SALUDOS
GRA

Jaime Trujillo Escobedo dice...

Hola Gra. Pronto dispondrás de esta entrada actualizada con el menú modificado.

En cuanto a mi menú... ¿indiscreción? ¡Para nada! Es un gusto poderte explicar como lo hice.

Aunque puede resultar un tanto lioso seguí los siguientes pasos:

1) Cree un total de 10 gadgets html-javascript con los títulos de mis 10 categorías. Dentro inserté los enlaces de las sub-categorías y los publiqué.

2) Tras colocarlos en el orden que quería, apliqué un truco muy similar a este pero haciendo uso de Scriptaculous.

Dicho truco lo explicaré en breve con una entrada, para facilitar las cosas ;).

3) Por último les atribuí propiedades CSS únicas, con el ID (nombre) que a cada gadget correspondía (por ejemplo: #HTML1, #HTML2, #HTML3...).

Como te dije, resulta un tanto complicado para ser explicado en un comentario. Por medio de un artículo todo parecerá más sencillo.

¡Abrazos!

Gra dice...

Jaime!!
Aguardo con ansias !!! mi contenido no está muy bien presentado que digamos....:(
Gracias!!!!

Jaime Trujillo Escobedo dice...

Tranquila Gra que en unos días (desde que consiga un ratito entre los estudios) comienzo a preparar la entrada.

¡Gracias a ti!

Cocofansclub dice...

Hola JAIME!!podrias ser tan amable e indicarme la entrada para localizar como poner esa pestaña(no se si asi se llama)que tienes en el sidebar con el titulo "estadisticas y otros"
muchas gracias
saludos!!
claudia

Jaime Trujillo Escobedo dice...

Claudia, lo que buscas está en esta entrada ;).

Escribe tu comentario en la entrada...

El Balcón de Jaime fue terminado el 17 de abril de 2011. Leer despedida.

Me gustaría conocer tu opinión. El comentario será moderado y en breve se publicará.

Si deseas incluir un enlace utiliza este código:

<a href="Dirección de tu página">Titulo del enlace</a>

Para publicar un código haz uso del Conversor de entidades.

Intenta escribir sobre algo relacionado con el artículo. Si no lo haces, podría tardar en responderte.

¿Problemas al comentar? Utiliza el formulario antiguo