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ú tipo acordeón con efecto deslizante para tu blog

Estamos ante un menú elaborado con la librería Mootools, que no es tan popular como otras pero abunda notablemente en efectos para páginas web.

Se trata de un menú tipo acordeón construido con imágenes que se desliza suavemente al pasar el cursor por encima. Ideado por ByScripts y conocido también como Byslidemenu.

Encontramos dos modelos, uno vertical y otro horizontal.

Puedes ver el ejemplo en funcionamiento justo a continuación:


Antes de instalarlo debes considerar que Mootools no es compatible con librerías de efectos como jQuery, Scriptaculous o Prototype por lo que si utilizas alguna de éstas últimas en tu plantilla, ten por seguro que obtendrás algún error.

Otro factor a destacar es su composición. Es un menú de imágenes por lo que cada uno debe crear sus propias imágenes con el texto que se desee.


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



Busca la etiqueta </head> y agrega esto antes:
<script src='https://sites.google.com/site/scriptsbalcon/b/bljjacord2.js' type='text/javascript'/>
<script src='https://sites.google.com/site/scriptsbalcon/b/blAcordeJTE.js' type='text/javascript'/>
<style type='text/css'>#blAcordeeJTE{width: 178px;overflow: hidden;padding: 0;position: relative;margin: 0px auto;list-style-type: none;border-top:none;}#blAcordeJTE {width: 640px; overflow: hidden;padding: 0;position: relative;margin: 0px auto; border:2px solid #cccccc; list-style-type: none;border-left:none;}ul.bljj1 li{border-left: 2px solid #CCCCCC;}ul.bljj2 li{}ul.blAcordeeJTE a li, div.blAcordeeJTE a div{border-left: none;}</style>

Ahora localiza la etiqueta </body> y antes incluye lo siguiente:
<script type='text/javascript'>
window.addEvent('load', function(){
var slideMenu = new blAcordeJTE();
var blAcordeeJTE = new blAcordeJTE('blAcordeeJTE', {vertical: true});
});
</script>

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




Pega este código en su interior:

Si deseas usar el menú horizontal utiliza este:
<ul class="bljj1" id="blAcordeJTE">
<li class="first"><a href="URL ENLACE"><img src="URL IMAGEN" /></a></li>
<li><a href="URL ENLACE"><img src="URL IMAGEN" /></a></li>
<li><a href="URL ENLACE"><img src="URL IMAGEN" /></a></li>
<li><a href="URL ENLACE"><img src="URL IMAGEN" /></a></li>
</ul>

O este otro si deseas usar el menú vertical:
<ul class="bljj2" id="blAcordeeJTE" style="width: 178px;">
<li class="first"><a href="URL ENLACE"><img src="URL IMAGEN" /></a></li>
<li><a href="URL ENLACE"><img src="URL IMAGEN" /></a></li>
<li><a href="URL ENLACE"><img src="URL IMAGEN" /></a></li>
<li><a href="URL ENLACE"><img src="URL IMAGEN" /></a></li>
</ul>

Cambia URL ENLACE por la dirección de los enlaces y URL IMAGEN por las URL de tus imágenes.

Para ampliar el menú añadiendo más imágenes utiliza líneas como esta:
<li><a href="URL ENLACE"><img src="URL IMAGEN" /></a></li>

Recuerda que siempre deben situarse antes de </ul>.

Con respecto al tamaño de las imágenes, yo las construí con 220 píxeles de ancho y 246 de alto. Puedes utilizar el tamaño que mejor se ajuste a tu blog aunque el mejor resultado ofrece es el que utilicé en el ejemplo.

Y con esto terminamos la sencilla instalación, en la cual el mayor trabajo estará en diseñar las imágenes del menú. Por suerte, obtendrás un artilugio personal y único.

saler dice...

extraordinario!! muchas gracias por este increible menu!

Dario dice...

Jaime necesito de tu ayudam en miblog desde unos dias sale una rana amarilla como en la parte de atrás de la plantilla, quisiera que me ayudaras a quitarla. Gracias.

Futbol Mundial

Jaime Trujillo Escobedo dice...

Muchas gracias Saler, ¡Disfrútalo!

Jaime Trujillo Escobedo dice...

Dario, no pude ver la ranita a la que te refieres aunque supongo que se trata del logotipo utilizado en Imageshack.

La desventaja de dicho sitio es que las imágenes poseen una fecha de "caducidad" por lo que bastará con alojar el fondo de nuevo (haciendo uso de blogger esta vez) y utilizar la nueva URL.

Laube dice...

Qué monada Jaime... Yo aún no me he decidido... No sé qué quedará mejor en mi blog, si unas pestañas de este tipo (son compatibles con mi plantilla?) o las normales bajo el encabezado.
Qué me recomiendas?. Ya sabes que valoro tu opinión...
Un besote guapetón

Jaime Trujillo Escobedo dice...

Laube, aunque podría quedar muy bien, deberías probar puesto que un simple menú de navegación siempre puede utilizarse mientras que este artilugio ha sido construido con Mootools y ello podría interferir en la carga de imágenes de tu blog (al no ser que disminuyas la cantidad de posts a mostrar en la portada).

Laube dice...

ok, entiendo, Jaime... Es preferible entonces algo más sencillo.
Ya había pensado también reducir el numero de entradas en cada página. Te haré caso.
Un besote

Fuentecillas dice...

Hola Jaime
¡¡ Me encanta esta nueva forma de presentar las imágenes¡¡.
¿ Me atreveré? Que chulada niño.
Eres único e irrepetible.
Saludos profe.

Jaime Trujillo Escobedo dice...

¡Hola Fuentecillas! El efecto visual es sin duda ideal para la mayoría de blogs. Con respeco a presentar imágenes... ¿Revisaste la entrada acerca de la galería para posts?

Imagino que para mostrar fotos te será más cómodo que haciendo uso de este método (cuanta menos edición tenga este menú mejor: fabricar las imágenes que lo componen nos llevará mucho trabajo). Abrazotes.

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