Igualar columnas sidebar en blogger

Se trata de igualar la altura de la sidebar cuando tenemos dos o más columnas.

Desde siempre había querido tener las dos sidebars de mi plantilla de la misma altura ya que como tienen distinto color de fondo parecía que una se quedaba coja respecto de la otra. Al final lo he conseguido usando jQuery.

1. Bajamos el fichero jquery-1.2.6.js y lo alojamos en nuestro servicio de alojamiento habitual.

2. Antes de </head> copiamos el script:

<script type="text/javascript" src="jquery-1.2.6.js"></script>
<script language="javascript">
function equalHeight(group) {
tallest = 0;
group.each(function() {
thisHeight = $(this).height();
if(thisHeight > tallest) {
tallest = thisHeight;
}
});
group.height(tallest);
}
$(document).ready(function() {
equalHeight($(".columnas"));
});
</script>

3. Antes de ]]></b:skin> copiamos el css que adapta el estilo de las columnas a nuestro blog, en mi caso es el siguiente:

/* Columnas
---------------------------- */
.columnas {
width:100%;
float:right;
margin: 0px;
padding: 0px;
}

.columnas .widget{
text-align: left;
margin: 3px;
padding: 3px;
}

.columnas h2 span {
color: $sidebarheader;
}

.columnas ul {
list-style:none;
margin-left: 0;
}

.columnas li {
margin:0;
padding-left: 5px;
text-indent:-40px;
line-height:1.5em;
}

.columnas p {
color:#666;
line-height:1.5em;
}

4. Sin expandir artilugios buscamos esto o algo parecido (depende de los widgets que tengamos en nuestras sidebar1 y sidebar2):

<div class='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar1' preferred='yes'>
<b:widget id='HTML1' locked='false' title='' type='HTML'/>
<b:widget id='Label1' locked='false' title='Nube de etiquetas' type='Label'/>
<b:widget id='LinkList1' locked='false' title='Enlaces' type='LinkList'/>
</b:section>
</div>

<div class='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar2' preferred='yes'>
<b:widget id='HTML2' locked='false' title='Últimas entradas' type='HTML'/>
<b:widget id='HTML3' locked='false' title='Últimos comentarios' type='HTML'/>
</b:section>
</div>

y cambiamos sidebar por columnas, quedando así:

<div class='sidebar-wrapper'>
<b:section class='columnas' id='sidebar1' preferred='yes'>
<b:widget id='HTML1' locked='false' title='' type='HTML'/>
<b:widget id='Label1' locked='false' title='Nube de etiquetas' type='Label'/>
<b:widget id='LinkList1' locked='false' title='Enlaces' type='LinkList'/>
</b:section>
</div>

<div class='sidebar-wrapper'>
<b:section class='columnas' id='sidebar2' preferred='yes'>
<b:widget id='HTML2' locked='false' title='Últimas entradas' type='HTML'/>
<b:widget id='HTML3' locked='false' title='Últimos comentarios' type='HTML'/>
</b:section>
</div>

Eso es todo. Este truco es muy útil cuando tenemos las sidebars entre dos widebars, como es mi caso en esta plantilla.

Visto en cssnewbie.