Añade una barra lateral (Side-bar) a tu blog

Como veréis hemos hecho algunos cambios en el blog como añadir una segunda barra lateral y una sección de Archivos recientes y Últimos comentarios ordenados por pestañas. Sinceramente os digo que no ha sido nada fácil y me ha llevado su tiempo llegar a comprender cada trocito de código ya que cada vez que cambiaba un valor todo se iba al carajo. Pero después de un arduo trabajo logre conseguir lo que esperaba. Para aquellas personas que tengan las mismas ambiciones que yo y que al igual que yo se han encontrado con algunas dificultades, voy a dedicar este y el siguiente post a explicar como he llevado a cabo el proceso.

En primer lugar aprenderemos a añadir una segunda “sidebar” a nuestra plantilla. Para ello nos dirigimos a la sección diseño/edición HTML sin necesidad de expandir los artilugios, no dirigimos a la parte del código donde encontremos estas líneas:

<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
…
(Elementos añadidos en la sidebar correspondiente)
…
</b:section>
</div>

Justo después de estas simplemente lo que hay que hacer es añadir otro DIV donde albergara nuestra segunda barra lateral.

<div id='sidebar-wrapper2'>
<b:section class='sidebar2' id='sidebar2' preferred='yes' showaddelement='yes'>
</b:section>
</div>

Posterior a esto lo último que nos falta es crear el estilo para nuestra nueva barra lateral. Para ello nos dirigimos a la zona donde tengamos el estilo de nuestra primera barra lateral para que nos sea más fácil ubicarlas para a continuación modificarlas. Deberíais ver algo así:

#sidebar-wrapper {
   margin:0px 0px 0px 40px;    /*(margen superior, izquierdo, inferior, derecho)*/
   float: left;
   padding: 0px 0px 20px 0px;  /*(relleno...)*/
   width:220px;                /*(anchura)*/
   color: $colortextolateral;
   overflow: hidden;
}

Pues debajo añadiremos este trozo duplicado pero cambiado de nombre.

#sidebar-wrapper2{
   margin:0px 0px 0px 0px;
   float: right;
   padding: 0px 10px 20px 0px;
   width: 140px;
   color: $colortextolateral;
   overflow: hidden;
}

Como os habréis fijado aparte del nombre hemos retocado algunos valores para que quedaran bien alineados en el blog, pero recordad que cada blog es un mundo por lo que deberéis ir probando las distintas dimensiones para acomodarlos a vuestro gusto.

Si tenéis problemas para conseguir el resultado que esperabais comentadlo que os ayudaremos en todo lo posible. Espero que les sea de utilidad. En el próximo post aprenderemos a agregar una script que nos permitirá poner distintas secciones ordenadas por pestañas.