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.

Sidebar o barra lateral flotante y desplegable para tu blog

Supongo que conocerás bien la sidebar o barra lateral que prácticamente todas las plantillas de blogger -al no ser que haya sido modificada- tienen y lo que en ella puedes agregar, ya sea una imagen, una frase (o varias), una lista de enlaces, tus blogs favoritos...

Hoy quiero presentarte una nueva forma de ofrecer a tus lectores información, herramientas o entretenimiento en una sidebar flotante que permanece fija en la esquina izquierda del blog y puede desplegarse o recogerse.



Aunque puede parecer algo complicado de instalar, debo decir que es un truco sencillísimo y que únicamente tendrás que añadir el contenido. Puedes ver el truco en funcionamiento para comprobar si realmente deseas aplicarlo.


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






Pega el código:

<script src="http://sites.google.com/site/scriptsbalcon/b/blprototype.js" type="text/javascript"></script>
<script src="http://sites.google.com/site/scriptsbalcon/b/blsidebarefecto.js" type="text/javascript"></script>
<script src="http://sites.google.com/site/scriptsbalcon/b/blsidebarflotante.js" type="text/javascript"></script>
<style>
#blsidebar_flotante{text-align:left;}
#blsidebar_flotante h2 {color:#000000;font-family:arial;font-size:14px;font-weight:normal;margin:10px;}
#blsidebar_flotante ul{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}
#blsidebar_flotante li a{width:100%;}
#blsidebar_flotante li a:link,
#blsidebar_flotante li a:visited{color:#000000;display:block;list-style-type:none;}
#blsidebar_flotante li {color:#000000;display:block;list-style-type:none;margin:0 20px 4px;padding:2px;width:120px;}
#blsidebar_flotante li a:hover{padding-left: 2px;text-decoration:none;}
#blsidebar_flotante {background:none repeat scroll 0 0 #E0DDD6;border:1px solid #B4B4B4;height:auto;left:0;position:fixed;top:80px;width:auto;}
#blsidebarflt_main img {text-align: center; padding:4px; border: none;}
#blsidebarflt_lat img{border:none;}
#blsidebarflt_main{float:left;height:320px;overflow:auto;padding:4px;width:200px;}
#blsidebarflt_lat {float:left;height:137px;width:35px;}
#credit {float:right;}
body{font-size:75%;}
a{outline: none;}
a:active{outline: none;}
#blsidebarflt_links{width:200px;}</style>
<div id="blsidebar_flotante">
<div id="blsidebarflt_main" style="display:none;">

AQUI MAS CONTENIDO

<div id="blsidebarflt_links">
<h2>Lista de enlaces</h2>
<ul>
<li><a href="URL ENLACE 1">TITULO ENLACE 1</a></li>

<li><a href="URL ENLACE 2">TITULO ENLACE 2</a></li>

<li><a href="URL ENLACE 3">TITULO ENLACE 3</a></li>

<li><a href="URL ENLACE 4">TITULO ENLACE 4</a></li>
</ul>
<div id="credit"><a href="http://goo.gl/4xVx"><img title="Conseguir widget" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsdu7pf3YsYu86PZ77GqjPe2XqlmWHznhuxweWHJ7M0jaGLqfFc37Q3LpnHiexUnbGXv52ylO_1KtloYc8r1BDmPckljBKwi1oBjnndSJY4E3tgyTj_017lCh0wnUoyiCjLrKYShuPlE3Y/s320/blget.png" /></a></div>
</div> </div>
<a id="blsidebarflt_lat" href="#"><img alt="Abrir sidebar" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhr_PimHxp8ROIXlPZzzmrTTcNM-_incnLoPetNdzRub5cc5MGSEwKk9NNygCJIHng4OlmdLfT99NzPsHv_iUOfLw9ULC9xZRhMaBGafKCgGz4kCxbvgP72ZnZKnHdMDbBRLShDdSdS5o2i/s320/blsidebarimg.png" /></a>

</div>

Ahora simplemente necesitas rellenar tu barra lateral.

Reemplaza AQUI MAS CONTENIDO en el código, por una frase, un párrafo, una imagen [+]...

En URL ENLACE debes escribir la dirección de tu enlace (ya sea el de tu blog, el de un sitio web, un foro...)

En TITULO ENLACE escribe el texto que tendrá el enlace.

Para agregar más enlaces en la lista de enlaces inserta líneas como esta:

<li><a href="URL ENLACE 4">TITULO ENLACE 4</a></li>

Asegúrate de que siempre las introduces antes del cierre </ul>.

Si por el contrario, deseas menos enlaces, borra alguna de las líneas.

Notas:

- La sidebar flotante "crecerá" junto al contenido, por lo que si agregas mucho texto o una lista de enlaces demasiado extensa, no debes preocuparte: aparecerá una barra para desplazarse.

- Si quieres cambiar la imagen que actúa como botón para abrir la sidebar, borra la siguiente línea en el código:
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhr_PimHxp8ROIXlPZzzmrTTcNM-_incnLoPetNdzRub5cc5MGSEwKk9NNygCJIHng4OlmdLfT99NzPsHv_iUOfLw9ULC9xZRhMaBGafKCgGz4kCxbvgP72ZnZKnHdMDbBRLShDdSdS5o2i/s320/blsidebarimg.png

Inserta en su lugar, la dirección de la imagen o el icono que hayas escogido [+].

A continuación te ofrezco cuatro botones por si deseas llevarte alguno:

El Roli dice...

Muchisimas gracias de veras me ayudaste mucho. Queda muy buena la sidebar en mi blog, no tengo palabras para agradecertelo.

Jaime Trujillo Escobedo dice...

No hay nada que agradecer, El Roli. Me alegro muchísimo de haberte podido ayudar con este truco.

¡Saludos!

Oskar dice...

Hola jaime ya puse la sidebar en mi blog es una pasada, te queria preguntar, se puede cambiar el nombre de sidebar por otro como enlaces eso es posible?? saludos Gracias

felix dice...

Jaime...

Gracias por tus consejos. Este en especial quedaría genial aunque en mi blog creo que no lo podría poner. No obstante, como siempre agradecerte la ayuda que nos prestas.

Un abrazo

Jaime Trujillo Escobedo dice...

Hola Oskar! Por supuesto que puedes cambiar la imagen. He actualizado la entrada y en el apartado "Notas" encontrarás como hacerlo.

Gracias a ti ;).

Jaime Trujillo Escobedo dice...

Felix Casanova, ten en cuenta que puedes editar el aspecto del widget a tu gusto (ya sea el botón, el fondo o el tamaño del texto), por lo que si deseas instalarlo puedo ayudarte en lo que necesites.

¡Recibe un fuerte abrazo!

Oskar dice...

Gracias Jaime eres un artista, ya mismo voy a ponerlo lo voy a dedicar a enlaces y tu seras el primero de la lista,
Saludos y un abrazo chao

Jaime Trujillo Escobedo dice...

Gracias a ti, Oskar, no solo por comentar sino también por el haberme incluído en tu lista. Es un honor para mí.

¡Abrazos!

felix dice...

Jaime...

Hola amigo, una consulta. ¿este truco me serviría por ejemplo para titularlo "Páginas amigas" y al desplegarse se vieran los banners de las mismas?
¿Como lo haría?

Otra pregunta abusando de tu confianza ;). Veo el efecto que tienes en los followers de opacidad que al pasar el ratón se muestra en su color ¿es difícil? o quizás lo hayas explicado ya en otro post y no lo vi.

Gracias de antemano.-

Jaime Trujillo Escobedo dice...

Por supuesto, Felix Casanova. Únicamente deberías eliminar este bloque (que representa la lista de enlaces):

<h2>Lista de enlaces</h2>
<ul>
<li><a href="URL ENLACE 1">TITULO ENLACE 1</a></li>
<li><a href="URL ENLACE 2">TITULO ENLACE 2</a></li>
<li><a href="URL ENLACE 3">TITULO ENLACE 3</a></li>
<li><a href="URL ENLACE 4">TITULO ENLACE 4</a></li>
</ul>

Y en donde dice AQUI MAS CONTENIDO incluir los banners con sus respectivos enlaces (en esta entrada explico como hacerlo).

En cuanto a la opacidad en los seguidores... ¿Te refieres a utilizar la opacidad en tu widget de seguidores o en una imagen?

Si es esto último lo que deseas, podrás encontrarlo en esta entrada :D.

felix dice...

Jaime...

Muchas gracias por la ayuda amigo. En cuanto a la opacidad me refería al gadget de seguidores.

Un fuerte abrazo¡

Anónimo dice...

como hago para que funcione en un archivo *.php

Garry dice...

no funciona en un archivo PHP :((

Jaime Trujillo Escobedo dice...

Felix Casanova, en ese caso añade esto en tu plantilla, antes de la etiqueta ]]></b:skin>

#Followers1{
filter:alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
-khtml-opacity: 0.5;}

#Followers1:hover{
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
-khtml-opacity: 1.0; }

Guaerda la plantilla para terminar ;).

felix dice...

Jaime...

Muchas gracias amigo. Lo he probado y el efecto me gusta mucho. Te quedo muy agradecido.

Un fuerte abrazo

Jaime Trujillo Escobedo dice...

Garry & Anónimo, ¿Para qué deseáis adjuntarlo en un archivo PHP? Funciona correctamente de esta forma :S.

Jaime Trujillo Escobedo dice...

Un placer, Felix Casanova y siento haberme retrasado tanto al responderte (los estudios...).

¡Abrazos!

6470 dice...

Excelente el aporte, pero tengo una duda, tengo 2 blogs en uno anda en otro no, por que puede ser??

Jaime Trujillo Escobedo dice...

6470, ¿Has implementado la librería jQuery en tu otro blog? Al utilizar Prototype junto a ella obtendremos un error.

Gustavo Cordova dice...

Gracias pero tengo una curiosidad como hago que se cierre la barra al darle clic nuevamennte

Jaime Trujillo Escobedo dice...

Gustavo, ¿Te refieres a incluir un botón que oculte tanto la sidebar flotante como la imagen que la 'abre' o despliega?

Grafíca Tu Mundo dice...

como podemos cambiarle el tamaño a la caja

Jaime Trujillo Escobedo dice...

Dado que se trata de un parámetro que contendrá un valor específico, te recomiendo que antes incluyas el contenido que se mostrará en la caja, Grafíca Tu Mundo.

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