Cómo agregar cuatro columnas de gadgets bajo el Header

¡ Artículo publicado en el blog El Balcón de Jaime, que pese a ser un blog terminado, es uno de los mejores en truvos blogger. ! Ve la entrada en su blog original.

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á...