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.

La sidebar o barra lateral y el bloque de entradas con la misma altura

Normalmente las plantillas de blogger suelen contener una sidebar o barra lateral. En ocasiones podemos encontrar diseños que contienen dos o más barras laterales pero prácticamente siempre tendremos el problema de la altura de éstas.

La altura en una sidebar es irregular, de manera que, según agregamos gadgets (elementos de página), ésta va "creciendo" hacia abajo.

¿Pero que sucede si no tenemos los suficientes gadgets como para "alargarla" lo suficiente? ¿Y si nuestros artículos son más largos que la barra lateral?

En la imagen siguiente puedes ver mejor lo que conseguiremos con este truco:

Trucos blogger, trucos para tu blog, ayuda blogger, La sidebar o barra lateral y el bloque de entradas con la misma altura


Lo mejor de todo es que el procedimiento es sencillo y el resultado: un blog más elegante y ordenado.


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






Pega el script:

<a style="padding: 4px;" href="http://goo.gl/4xVx"><center><script type='text/javascript'>
var blsidebar_i=new Object()
blsidebar_i.bl_igual=["sidebar-wrapper", "newsidebar-wrapper", "main-wrapper"]
blsidebar_i.blaltura_config=function(reset){
var blsidebar_1=0
var resetit=(typeof reset=="string")? true : false
for (var blsidebar_tipo=0; blsidebar_tipo<this.bl_igual.length; blsidebar_tipo++){
if (document.getElementById(this.bl_igual[blsidebar_tipo])!=null){
if (resetit)
document.getElementById(this.length[blsidebar_tipo]).style.height="auto"
if (document.getElementById(this.bl_igual[blsidebar_tipo]).offsetHeight>blsidebar_1)
blsidebar_1=document.getElementById(this.bl_igual[blsidebar_tipo]).offsetHeight
}
}
if (blsidebar_1>0){
for (var blsidebar_tipo=0; blsidebar_tipo<this.bl_igual.length; blsidebar_tipo++){

if (document.getElementById(this.bl_igual[blsidebar_tipo])!=null)

document.getElementById(this.bl_igual[blsidebar_tipo]).style.height=blsidebar_1+"px"
}
}
}
blsidebar_i.resetHeights=function(){
this.blaltura_config("reset")
}
blsidebar_i.blfunc=function(target, functionref, bl_tipo){
var bl_tipo=(window.addEventListener)? bl_tipo : "on"+bl_tipo
if (target.addEventListener)
target.addEventListener(bl_tipo, functionref, false)
else if (target.attachEvent)target.attachEvent(bl_tipo, functionref)
}
blsidebar_i.blfunc(window, function(){blsidebar_i.blaltura_config()}, "load")

blsidebar_i.blfunc(window, function(){if (typeof blsidebar_i.blsidebar_func!="undefined") clearTimeout(blsidebar_i.blsidebar_func); blsidebar_i.blsidebar_func=setTimeout("blsidebar_i.resetHeights()", 200)}, "resize")</script>Trucos y ayuda para tu blog</center></a>

Guarda el gadget para terminar.

¿No te funciona el truco?

Debes saber que en algunas plantillas (normalmente las que han sido modificadas o diseñadas), el truco no funciona correctamente, o en caso de hacerlo, aparece un enorme espacio bajo la sidebar o barra lateral.

Por otra parte, puede deberse al nombre asignado en el script (sidebar-wrapper o main-wrapper) para describir la barra lateral y el bloque de entradas, que en tu plantilla, tienen otra definición.

kiselbri dice...

Hola jaime: lo intente en los dos blogs y en ninguno me funciono. Como veras, me estoy aplicando al maximo y he logrado algunos trucos en mi blog . Muchas gracias

Unknown dice...

Hola Jaime, me encantó este truco, porque suele pasarme en el blog, que las entradas quedan más largas que la sidebar, y buscaba como mejorar eso.
Pero no se alarga, el único cambio que puedo ver es que donde coloqué el gadget aparece el link "trucos y ayuda para tu blog", pero sólo eso.
Bueno, ojalá se pueda arreglar. Desde ya mil gracias por tus consejos y ayuda. Saludos desde Argentina!

Jaime Trujillo Escobedo dice...

kitty, en tu caso debería funcionar ya que utilizas una plantilla mínima yel ID de la sidebar o barra lateral es el "original" (sidebar-wrapper).

Prueba a añadir el truco y después, en Diseño>Edición de HTML>expandimos artilugios busca este bloque:

#sidebar-wrapper {
background: #cccccc;
float:right;
overflow:hidden;
width:220px;
word-wrap:break-word;
}

Añade la línea que ves en negrita y haz vista previa.

¿Ves un fondo de color gris en la sidebar hasta el final del blog?

Si es así, el truco funciona correctamente ;).

Jaime Trujillo Escobedo dice...

Cabeza de novia, a kitty le sucedió lo mismo (comentario 3). Prueba añadiendo el color de fondo ^^.

Debes saber que tardas un poquito en aparecer. En tu caso debería aparecer de inmediato ya que las entradas son largas y no tienes muchos gadgets en la barra lateral.

Unknown dice...

Hola Jaime, gracias por responder tan rápido! Hice lo que propones, y se ve gris si, pero sigue del mismo largo. Ahora que hago, quito eso que le agregué en negrita, y espero que aparezca? Gracias otra vez :)

Jaime Trujillo Escobedo dice...

Desgraciadamente el truco no funciona en todas las plantillas, Cabeza de novia. Lo he probado con tu plantilla y no produce cambio alguno :S.

Seguiré probando haber si se me ocurre alguna otra forma de alargar la sidebar o barra lateral.

Jaime Trujillo Escobedo dice...

Cabeza de novia, acabo de resolver el problema en tu plantilla. Sigue los siguientes pasos para poder realizar el truco:

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

Busca estos bloques de CSS:

/* ---( layout structure )---*/

#outer-wrapper {
width: 900px;
margin: 0px auto 0;
margin-top: 20px;
text-align: left;
font: $bodyfont;
}
#main {
float: left;
padding: 0px 5px;
background-color: $mainbgcolor;
border: 5px solid #fff8dc;
margin-bottom: 20px;
margin-top: 5px;
width: 555px;
font-size: $bodyfont;
line-height: 1.5em;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
#sidebar {
float: right;
width: 230px;
margin-bottom: 10px;
padding-top: 0px;
margin-top: 5px;
padding-right: 35px;
font-size: 90%;
line-height: 1.4em;
color: $sidebartextcolor;
background-color: $sidebgcolor;
border: 5px solid #fff8dc;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}


Y reemplázalos por estos:

/* ---( layout structure )---*/

#outer-wrapper {overflow: hidden;
width: 900px;
margin: 0px auto 0;
margin-top: 20px;
text-align: left;
font: $bodyfont;
}
#main {overflow: hidden;
float: left;
margin-bottom: -32768px;
padding-bottom: 32768px;
background-color: $mainbgcolor;
border: 5px solid #fff8dc;
margin-top: 5px;
width: 555px;
font-size: $bodyfont;
line-height: 1.5em;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
#sidebar {overflow: hidden;
margin-bottom: -32768px;
padding-bottom: 32768px;
float: right;
width: 230px;
padding-top: 0px;
margin-top: 5px;
padding-right: 35px;
font-size: 90%;
line-height: 1.4em;
color: $sidebartextcolor;
background-color: $sidebgcolor;
border: 5px solid #fff8dc;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}


¡Abrazos!

Nota: Esta otra solución la encontré en Vagabundia ;).

kiselbri dice...

Jaime, yo de nuevo. He vuelto a probar y me ha quedado la sidebar igual, pero lo que cambio fue el otro lado....Cambio a un color gris mas claro ???

Anónimo dice...

Terrific work! This is the type of information that should be shared around the web. Shame on the search engines for not positioning this post higher!

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