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 flotante y desplegable para tu blog

Es probable que si tienes un blog y sueles añadirle complementos para personalizarlo a tu gusto te hayas preguntado alguna vez... ¿Dónde coloco esto?

En el caso de un menú, esta pregunta puede hacerse popular. Dado que la mayoría de los menús requieren un espacio bajo la cabecera o en la barra lateral para que sus enlaces sean mostrados con facilidad a los lectores, te encontrarás con un problema si en tu blog tienes cada elemento posicionado en el lugar idóneo y no deseas cambiarlo.

Llegado el caso de no saber como ofrecer a tus visitantes los enlaces que toda barra de navegación posee, te aconsejaría utilizar este maravilloso menú, creado a partir de una idea publicada con anterioridad.

Se compone por una simple franja que permanece fija en el lateral izquierdo del blog y que al hacer clic en ella, despliega un menú muy atractivo con tu lista de links.

Menú vertical flotante y desplegable para tu blog

Al pulsar la franja una vez haya sido desplegado el contenido, éste volverá a ocultarse. Puedes ver el menú en funcionamiento accediendo a este blog.


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



Busca la etiqueta ]]></b:skin> en tu plantilla y debajo añade este script:

<script type='text/javascript'>
//<![CDATA[

var bldespll;
var bldespll2=-200;

function blcnbotndesplegg() {
if (bldespll==2) { bldespll=-2} else {bldespll=2};
document.getElementById("blmenuflntdesplegab")
.style.top=parseInt(document.getElementById("blmenubt").style.top)+30+"px";
document.getElementById("blmenuflntdesplegab").style.visibility="visible";
blnlacc() }

function blnlacc(){
bldespll2=bldespll2+4*bldespll;
if(bldespll2 <- 200) {bldespll2=-200};
if(bldespll2 > 0) {bldespll2=0};
document.getElementById("blmenuflntdesplegab").style.left=bldespll2+"px";
if (bldespll2 <=-200 || bldespll2 >=0) {window.clearTimeout() } else {window.setTimeout("blnlacc();",50);} }

//]]>
</script>
<style>#blcnenlace{font-family:Arial,helvetica,sans-serif; font-size:12px; border-bottom:1px solid #CCCCCC;} #blcnenlace a{text-decoration: none; color: #333333;}#blcnenlace:hover{border-bottom: 1px solid #9D9D9D;}</style>

Ahora, justo encima de la etiqueta <body> incluye este código:

<div id='blmenubt' style='display:scroll;position:fixed;top:100px;left:0px;'>
<a href='javascript:void(0)' onclick='blcnbotndesplegg();' title='Desplegar Menú'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiT9SGFNVCp-mzWHBEXWEEZIvdoKIuJ1kco5jagY2LWPk3eh_C73dPZPCRgu1RT7G4LOfC4nAFevOYXfrbRNiMFAxey4EnhaDE5dOKxWVK1emN-Yvbh49QH6lZiuTrtCTYXD72SHU1YabE/s320/blmostrarmenu.png'/></a>
</div>

Una vez hecho esto, debajo de <body> añade esto otro:

<div id='blmenuflntdesplegab' style='position:fixed; visibility:hidden; background:url(&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhczkw7PivLYXZdnniad47JdffnV9GftfCe93RD8OTFid6PXFRxrvShPZic9XhyDeCKgGcoTataOfB5x0S_MDE1n6gDnQzaL3D6Nixg1yeD4ErOHoIFjTadPhQ66ug-vHfdRz7uyTSb3SI/s400/BLMENUDSS.gif&quot;) no-repeat scroll 0 0 #eeeeee; z-index:1;'>
<table style='border:1px solid #9D9D9D; width:150px; text-align:center; padding:5px;'>
<tr><td id='blcnenlace' style='padding-top:28px;'><a href='DIRECCION'>TITULO</a></td></tr>

<tr><td id='blcnenlace'><a href='DIRECCION'>TITULO</a></td></tr>
<tr><td id='blcnenlace'><a href='DIRECCION'>TITULO</a></td></tr>
<tr><td id='blcnenlace'><a href='DIRECCION'>TITULO</a></td></tr>
<tr><td id='blcnenlace'><a href='DIRECCION'>TITULO</a></td></tr>
<tr><td id='blcnenlace'><a href='DIRECCION'>TITULO</a></td></tr>
</table>
</div>

Reemplaza en cada línea DIRECCION con la dirección de la página web, blog o artículo del enlace y TITULO por el texto que aparecerá en el menú.

Guarda la plantilla y habrás terminado. En caso de tener alguna duda escribe un comentario para que pueda ayudarte.

Driwrgy dice...

Qué guay! Mi pregunta es: se puede cambiar el color del menú con la tabla de colores? De esta forma tendria las cosas muy recogiditas... Bss.

Jaime Trujillo Escobedo dice...

Driwrgy, sería algo complicado pero podría hacerse. ¿Qué colores desearías?

VacilandoUnRap dice...

Excelente muchas gracias, ya lo aplique a mi blog ;)

sl2

Deybi dice...

Yo es que era fanático mil por mil de los menus, pero ahora ni siquiera tengo uno en mi blog.

Anónimo dice...

hola jaime.
Todo perfecto, solo que me sale en la cabecera del blog y quisiera ponerlo en la sidebar de la derecha. ¿Como puedo hacerlo?. ¿Es posible?. Gracias

Jaime Trujillo Escobedo dice...

Pues creo que no eres el único, Deybi :P. He podido tener más de 10 distintos en El Balcón y actualmente me he decidido por algo completamente minimalista y sin imágenes.

Jaime Trujillo Escobedo dice...

Hola Gianna! ¿Te refieres a incluirlo enla barra lateral y hacer que deje de permanecer fijo en un lateral del blog?

Jaime Trujillo Escobedo dice...

MCarlitooH2, ya veo lo bien que ha quedado. ¡Saludos!

JOSE MEJIA dice...

HOLA JAIME GRACIAS POR TU APORTE.

QUISIERA SABER SI LA PUEDO DEJAR FIJA SIN OCULTARLA.

SALUDOS,

Jaime Trujillo Escobedo dice...

Jose, en ese caso, añade el segundo código en un gadget html-javascript, así como el tercero y elimina en el segundo la línea style='display:scroll;position:fixed;top:100px;left:0px;'.

¡Suerte!

Anónimo dice...

que hacer para que el menu al cargar la pagina ya venga desplegado???

Jaime Trujillo Escobedo dice...

Anónimo, habría que editar el script por completo. Te recomiendo que hagas uso de otro menú.

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