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.

Añadir cuatro columnas bajo la cabecera

En ocasiones me habían preguntado si había forma de añadir columnas encima de las entradas para disponer de más espacio en la sidebar (barra lateral).

Trás experimentar con las plantillas de blogger, dí con la solución de cómo añadir cuatro columnas encima de las entradas.

> Es un truco sencillo pero te recomiendo que descarges la plantilla para tener una copia de seguridad por si acaso. Si no sabes cómo descargarla, aquí te lo enseño.

Una vez tengas la copia de seguridad, podrás empezar con el truco.

Diseño>edición HTML>expandimos artilugios

1) Busca estos bloques en el CSS de tu plantilla (están separados) y cambia los valores como te lo indico en rojo:

#header-wrapper {
width:900px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}

#outer-wrapper {
width: 950px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}

#main-wrapper {
width: 640px;
float: $startSide;
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 */
}

#footer {
width: 240px;
clear:both;
margin:0 auto;
padding-top:15px;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;
}

2)
Una vez tengas las medidas correctas busca la etiqueta ]]></b:skin> y encima pegale estas definiciones:

#columna-bloque{
width: 940px;
clear: both;
margin: auto;
height: 200px;
margin-bottom: 10px;
line-height: 1.4em;
}

#columna-bloque h2{
border: 1px solid #b2b2b2;
background: #ededed;
margin-top:-1px;
font-family:'Trebuchet MS',Trebuchet,Helvetica,Arial,Verdana,Sans-Serif;
color: #9e9e9e;
font-size: 12px;
background: trasparent;
margin: .5 em 0 .5 em;
padding: 5px;
}

.columna{
padding: 5px;
}

3)
Por último busca esta línea:

<div id='main-wrapper'>

Y pégale esto encima:

<div id='columna-bloque'>

<div id='columna1' style='width: 25%; float: left; margin:0; text-align: left;'>
<b:section class='columna' id='columna1' preferred='yes' style='float:left;'>
</b:section>
</div>

<div id='columna2' style='width: 25%; float: left; margin:0; text-align: left;'>
<b:section class='columna' id='columna2' preferred='yes' style='float:right;'>
</b:section>
</div>

<div id='columna3' style='width: 25%; float: right; margin:0; text-align: left;'>
<b:section class='columna' id='columna3' preferred='yes' style='float:right;'>
</b:section>
</div>

<div id='columna4' style='width: 25%; float: right; margin:0; text-align: left;'>
<b:section class='columna' id='columna4' preferred='yes' style='float:right;'>
</b:section>
</div>

<div style='clear:both;'/>
</div>
Haz vista previa para ver si todo va bien y guarda cambios.

Ahora podrás añadir artilugios bajo la cabecera de tu blog. Aquí te dejo unas imágenes para que veas cómo te quedará...


Laube dice...

Qué interesante, Jaime!!!!! Esas 4 columnas, cada una un gadget distinto, podrían convertirse en 4 especie de etiquetas del blog o simplemente son gadgets y poco más????
Es que me gustaría poner etiquetas en la parte superior de mi blog, para tener postres, cocina en general, salud... No sé si me he explicado bien...
Gracias por tus estupendos artículos!

Jaime Trujillo Escobedo dice...

Laube, me temo que tener un gadget de etiquetas dividido en cuatro columnas encima del bloque de entradas (main-wrapper) no será posible con este truco.

¡Pero no te preocupes! Atenta a los siguientes artículos del balcón, ya que publicaré el truco para que puedas tener tus etiquetas en la parte superior del blog ;).

Mackie dice...

hola como estas, te molesto con una consulta, como hago para añadir una sola columna de punta a punta debajo de la cabecera no entiendo mucho de html. quiero poner un menu desplegable y la mi barra no deja que se despliegue. te agradezco de antemano. y dejo la direccion del sitio para que veas la plantilla.

dimensionptc .blogspot.com
saludos.

Jaime Trujillo Escobedo dice...

Mackie, no es necesario agregar una columna. Puedes habilitar el crosscol (zona superior al bloque de entradas) o simplemente incluir el menú en un gadget html-javascript y arrastrarlo encima del bloque de las entradas.

Para habilitar el crosscol:

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

Busca esta línea:

<b:section class='crosscol' id='crosscol' showaddelement='no'/>

Sustituye no por yes

En caso de no encontrar dicha línea busca esta otra y realiza lo mismo:

<b:section class='main' id='main' showaddelement='no'>

Por último guarda cambios. Ve al apartado de Diseño > Elementos de página y podrás agregar gadgets bajo la cabecera ;).

¡Saludos!

Mackie dice...

muchas gracias. lo voy a poner en práctica y despues te cuento.
saludos.

Jaime Trujillo Escobedo dice...

Mackie, espero tus noticias pues ;).

Saludos.

tHeLaRiOs dice...

Hola y salu2 , bueno creo que este truco funciona con los templates de 2 columnas , pero de todos modos se agradece

Jaime Trujillo Escobedo dice...

tHeLaRiOs, me temo que te equivocas. En el ejemplo (imágenes) puedes ver mi blog de pruebas, el cual consta de una única sidebar :S.

Si tienes problemas para realizar el truco avísame (en caso de no funcionar puede deberse a otra cosa, la sidebar no tiene nada que ver).

Negrevernis dice...

Hola, Jaime.

¿Este truco se puede aplicar justo antes del footer?

Gracias de antemano.

Jaime Trujillo Escobedo dice...

Negrevernis, hay un truco muy similar al que buscas en esta entrada.

Negrevernis dice...

Gracias, Jaime.

Pero lo que busco es aprovechar una línea que me aparece en la pestaña de Diseño, justo antes del Footer. Lo que quiero es dividir ese espacio en cinco columnas, pero no encuentro este truco.

Un saludo.

Jaime Trujillo Escobedo dice...

Negrevernis, dicho truco aún no ha sido publicado. Es probable que algún día lo veas por aquí.

¡Saludos!

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