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.

Permitir que los lectores de tu blog puedan "arrastrar" la sidebar o barra lateral

La participación de los lectores en un blog siempre es bien recibida. Pero lo es mucho mas si el blog en el que nos gusta permanecer leyendo puede configurarse a nuestro gusto, permitirnos el colocar las cosas en lugares distintos o personalizar su aspecto.

Se me ocurrió un método que puede ayudarte a ofrecer comodidad a los visitantes de tu blog. Básicamente se trata de habilitar la sidebar o barra lateral de forma que pueda arrastrarse a cualquier sitio.

Permitir que los lectores de tu blog puedan


Puedes ver el truco en funcionamiento visitando este blog de pruebas.

Utilizaremos prototype y scriptaculous para conseguir lo que andamos buscando.


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




Busca la etiqueta </head> y añade estos scripts justo encima (no necesitarás hacerlo si ya se encuentran en tu plantilla:

<script src='http://www.google.com/jsapi'/>
<script>
google.load(&quot;prototype&quot;,&quot;1.6.0.3&quot;);
google.load(&quot;scriptaculous&quot;, &quot;1.8.2&quot;);
</script>

Seguidamente busca esta línea y añade lo que ves en color verde:

<div id='sidebar-wrapper' style='cursor:move; border:0px;' title='Arrastra la barra lateral a donde desees'>

Para terminar, busca la etiqueta </body> y justo encima agrega esto:

<div id='blmovside' style='cursor:move; border:0px;'><script type='text/javascript'>new Draggable(&#39;sidebar-wrapper&#39;);</script></div>

Guarda cambios para terminar...

Anónimo dice...

Hola. :s

He tratado por varias formas de solucionar el problema de "amontonamiento" en mi blog y no he logrado nada, preciso de tu ayuda nuevamente.

Necesito saber cómo puedo poner mi lista de enlaces de una categoría en una ventana aparte -ejemplo: Tú tienes un cuadrito a la derecha de varias categorías y al hacerle click a una, te manda a una ventana de lado izquierdo con la lista de posts de esa categoría. Entonces, realmente agradecería que me dijeras como hacerlo.

Mi blog está así: "Etiqueta o Categoría"
*Enlace 1
*Enlace 2
*Enlace 3
Y así sucesivamente.

Por favor, ayúdame. Gracias.

Anónimo dice...

Ya eres blog amigo Jaime, me gusta tu blog.

Jaime Trujillo Escobedo dice...

¡Muchas gracias, Carlos Soler! Ya estás añadido en El Balcón ;).

Jaime Trujillo Escobedo dice...

El Cementerio Olvidado, en mi caso lo único que hice fué poner una lista de enlaces e introducir links hacia mis etiquetas.

En tu caso, por ejemplo, puedes crear una entrada y en ella insertar enlaces hacia las distintas etiquetas del blog.

Por ejemplo, en una entrada incluyes un enlace con el título "Canciones en inglés" que conduzca hacia dicha categoría, usando la siguiente dirección:

http://elcementerioolvidado.blogspot.com/search/label/Canciones%20en%20Ingles

Jose dice...

Hola, tengo un problema bastante gordo: y es que al usar este truco se me movió todo el blog y quedó más grande y movido hacia la izquierda y las entradas no se veían, así que quité lo que había hecho. Pero sigue igual.
A ver si puedes ayudarme.
http://fibraoptica2.blogspot.com

Jaime Trujillo Escobedo dice...

Tranquilo, Jose, por suerte hay una solución. Sigue los siguientes pasos:

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

Busca la etiqueta ]]></b:skin> y añade este bloque encima:

#content-wrapper {
margin-left:288px;
padding:0 16px;
text-align:left;
width:663px;
}

Haz vista previa para ver el resultado.

Ahora busca este otro bloque y añade lo que ves en negrita...

#header-wrapper {
background:url("http://www.blogblog.com/moto_son/headbotborder.gif") repeat-x scroll left bottom #88BB22;
border:0 none;
padding:0 0 16px 310px;
text-align:center;
}

Guarda la plantilla para terminar ;).

Jose dice...

La primera parte la he hecho cambiando donde pone margin-left:288px; y he puesto margin-left:168px; porque en la vista previa este último me quedaba más hacia la izquierda y en el otro algunos widgets me quedaban mal.
Pero la segunda parte, donde pone:
#header-wrapper {
background:url("http://www.blogblog.com/moto_son/headbotborder.gif") repeat-x scroll left bottom #88BB22;
border:0 none;
padding:0 0 16px 310px;
text-align:center;
}

A mí me pone:
#header-wrapper {
background: #8b2 url(http://www.blogblog.com/moto_son/headbotborder.gif) bottom $startSide repeat-x;
margin: 0 auto;
padding-top: 0;
padding-$endSide: 0;
padding-bottom: 15px;
padding-$startSide: 0;
border: 0;
}

Así que ¿dónde pongo eso que está en negrita de 310px si tengo varias cosas que ponen padding?

Jose dice...

Oh, al final conseguí ajustar correctamente todo el blog, cambiando algunas cosillas de lo que me decías, pero me ha servido de mucha ayuda para saber donde tenía que probar para ajustarlo.
Muchas gracias... Y perdón por las molestias. ;)

Jaime Trujillo Escobedo dice...

Me alegro mucho, Jose. Parece que ha vuelto a la normalidad ;). Molestia ninguna, en todo caso debería ser yo el que se debe disculpar por haber tardado tanto en responder al comentario.

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