Agregar una sección a la sidebar

Ignasi nos muestra en El meu mon My world, la forma de agregar una sección en la sidebar de Blogger.

Hay que aclarar dos cosas, una sección no es una nueva sidebar como se ve normalmente sino una especie de clón de la primera que se ubicará justo debajo de esta. Al definirla, podemos darle propiedades diferentes y hacer que el blog sea gráficamente más flexible.

Por otro lado, los códigos no se van a adaptar a cualquier plantilla (eso es imposible) pero están lo suficientemente detallados como para que podamos entender el concepto.

Luego de hacer el correspondiente backup de la plantilla, vamos a DISEÑO, EDITAR HTML y marcamos la opción "Expandir elementos".

Allí, buscamos esto:

/* Variable definitions ====================

Esta es la parte de estilo que define las variables utilizadas por Blogger para que podamos modificar colores y fuentes desde la parte de diseño, sin necesidad de escribir directamente en la plantilla.

Ahí, agregamos lo siguiente:

<Variable name="bottomSidebar2BgColor"
description="Bottom Sidebar Two Background Color"
type="color" default="#fff" value="#ffffff">
<Variable name="bottomSidebar2TextColor"
description="Bottom Sidebar Two Text Color"
type="color" default="#666" value="#666666">
<Variable name="bottomSidebar2LinkColor"
description="Bottom Sidebar Two Link Color"
type="color" default="#475" value="#447755">
<Variable name="bottomSidebar2VisitedLinkColor"
description="Bottom Sidebar Two Visited Link Color"
type="color" default="#798" value="#779988">

Luego, dentro de la misma hoja de estilo, buscamos esto:

/* Sidebar Boxes -------------------------*/

o, de no existir, cualquier otro lugar es aceptable, siempre y cuando esté debajo de las otras definiciones de la sidebar. Ahora, agregamos las propiedades que tendrá la nueva sección:

.sidebar2 .widget {
margin:.5em 13px 1.25em;
padding:0 0px;
}

.widget-content {
margin-top: 0.5em;
}

#sidebarbottom-wrap3 {
background: $bottomSidebar2BgColor
url("archivo")
no-repeat left top;
margin:0 0 15px;
padding:10px 0 0;
color: $bottomSidebar2TextColor;
}

#sidebarbottom-wrap4 {
background: transparent
url("archivo")
no-repeat left bottom;
padding:8px 0px 8px;
}

#sidebar2 {
background: transparent
url("archivo")
repeat-y;
color: $bottomSidebar2TextColor;
}

#sidebar2 h2 {
color: $bottomSidebar2TextColor;
border-bottom: 1px dotted $bottomSidebar2TextColor;
margin-bottom: 0.5em;
}

#sidebar2 a {
color: $bottomSidebar2LinkColor;
}

#sidebar2 a:hover, #sidebar2 a:visited {
color: $bottomSidebar2VisitedLinkColor;
}

.sidebar2 h2 {
margin:0;
padding:0 0 .2em;
line-height:1.5em;
font:$headerFont;
}

.sidebar2 ul {
list-style:none;
margin:0 0 1.25em;
padding:0 0px;
}

.sidebar2 ul li {
background: traanpsrent url("http://www.blogblog.com/rounders4/icon_arrow_sm.gif")
no-repeat 2px .25em;
margin:0;
padding:0 0 3px 16px;
margin-bottom:3px;
border-bottom:1px dotted $borderColor;
line-height:1.4em;
}

.sidebar2 p {
margin:0 0 .6em;
}

Como se ve, básicamente, se repiten las mismas propiedades que tenemos para la sidebar existente, excepto que a esta la llamaremos sidebar2.

Luego, justo antes de:
<div id='footer-wrap1'><div id='footer-wrap2'>
agregaremos el código HTML:

<div id='sidebarbottom-wrap3'>
<div id='sidebarbottom-wrap4'>
<b:section class='sidebar2' id='sidebar2'></b:section>
</div>
</div>

Una vez que guardamos la plantilla, en el la primera solapa de diseño aparecerá la nueva sección y desde allí podremos modificar colores y otros parámetros.