Sand Dollar (añadir sidebar)

Recuerda
que aunque yo pruebe los "trucos"
Antes de hacer ningún cambio
GUARDA SIEMPRE TU PLANTILLA
Nunca es seguro
que todo salga bien...

A petición de varios visitantes de mi blog, voy a explicar como añadir una nueva sidebar a la plantilla Sand Dollar de Blogger.
Aunque suelo decirlo constantemente, no está de más recordar, que las modificaciones en las plantillas que expongo en El Escaparate, están hechas "a mi manera", por lo tanto no siempre será la manera ideal de llevarlas a cabo, simplemente el resultado suele ser óptimo del modo que lo hago y por eso me atrevo a publicarlo, con el único fin de ayudar.

Tendremos en cuenta que vamos a partir de una San Dollar original, sin modificaciones anteriores.
Voy a ir paso a paso, siempre hacia abajo en la plantilla, para que sea más fácil de encontrar las partes donde haremos las modificaciones:

[1] Vamos a nuestra plantilla, y en la parte del CSS (recordad que es esa donde hay muchas llaves de estas {}, localizamos esta línea de código para situarnos:

#content-wrapper {

[2] Debajo del content-wrapper, encontraremos esto:

@media all {

dentro de esto vamos a necesitar cambiar algunos valores, nos tendrá que quedar así:

@media all {
div#main {
float:right;
width:52%;
margin-right: 30px;
margin-left: 20px;
padding:20px 0 10px 1em;
border-left:dotted 1px $bordercolor;
border-right:dotted 1px $bordercolor;
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 */
}

Las líneas:
border-left:dotted 1px $bordercolor;
border-right:dotted 1px $bordercolor;

son las que hacen que se vean las barras horizontales punteadas de separación entre las entradas y las sidebar,(lo veréis abajo, en la "captura de la plantilla") si no queréis incluirlas las borráis y listo.

[3] Debajo justo de esa parte encontramos esto: div#sidebar {, donde también hemos de cambiar algunos valores, de forma que nos quedará así:

div#sidebar {
margin:0px 0px 0px 0;
padding:20px 0 10px 1em;
text-align:left;
float: left;
width: 20%;
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 */
}

[4] Llegados a este punto, hemos de añadir el CSS necesario para la nueva sidebar y lo pegaremos justo debajo del código anterior, quedará así:

}
div#newsidebar {
margin:0px 0px 0px 0;
padding:20px 0 10px 1em;
text-align:left;
float: right;
width: 20%;
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 */
}

Como habréis observado es prácticamente una copia de la sidebar existente, simplemente hemos modificado algunos valores, tened mucho cuidado con no omitir ninguna llave {, pues no obtendríamos un resultado óptimo.

[5] Por último seguimos bajando en nuestra plantilla, dejamos atrás el CSS y llegamos al HTML, buscamos esto:

<div id='main-wrapper'>

y justo encima, añadiremos el nuevo código para que nuestra sidebar aparezca en "añadir elementos" de nuestra plantilla.

<div id='newsidebar-wrapper'>
<b:section class='sidebar' id='newsidebar' preferred='yes'>
</b:section>
</div>

[6] Guardamos cambios y vamos a la plantilla para añadir un elemento dentro de la nueva sidebar, ya que ahora la tendremos ahí, pero estará vacía y no se verá en el blog hasta que no pongamos algo dentro.