Agregar una sección nueva en la columna lateral

Hace tiempo que andro, me comentaba en la entrada de crear una sección con pestañas con jQuery, que quería agregar esa sección, pero que le gustaría que en lugar de estar, como primer elemento de la columna lateral, o arriba, quedara en tercero.



En ese caso, lo que podemos hacer, y que es más facil, es agregar otra sección,  que quedará antes de la sección con pestañas o tabs, de ese modo, podemos colocar antes, los widgets que queramos, y posicionarla en segundo, tercero, cuarto, o el lugar que se nos antoje, dependiendo de los widgets que pongamos.



Esto también puede ser útil, cuando queremos una sección con diferente apariencia, sobre todo, cuando tenemos definidos el mismo estilo en el título, el fondo, etc., de la columna lateral,  por ejemplo, como en el caso de la plantilla que usaba, que por cierto, pronto estará disponible para que la puedan usar,  a petición de varios chicos (as).



Antes de empezar con esto, vamos a ver un poco, acerca de las secciones en Blogger, y como funcionan:

• Cuando tu creas un sección en la plantilla, del modo que les voy a decir, se crear una area, que aparece punteada (cuando no tiene un widget ) en los elementos de la página, o en Diseño, (tomando en cuenta la nueva interfaz de Blogger).

• Todas las plantillas de Blogger, tienen estas secciones, y tienen la ventaja de que, no necesitamos ir a la edición de HTML de la plantilla, para agregar widgets, o editarlos, ya que podemos hacerlo desde los elementos de la página o en Diseño (en la nueva interfaz).

• Hay muchas secciones en toda la plantilla: la columna principal del blog, la cabecera, en la columna lateral, en fin, cada elemento o cosa que aparece en los elementos de la página o Diseño (en la Nueva interfaz de Blogger), en forma de rectángulos a veces casi cuadraditos (dependiendo del ancho que tenga), son una sección, y también, dependiendo de algunos atributos que tenga, puede o no, agregarse ahí, mas de un widget, podemos cerrarlo o bloquearlo, para que no se pueda arrastrar y mover cada widget, etc.

Ahora, empecemos:



Instrucciones paso a paso

Paso 1: En la interfaz actual, desde nuestro escritorio, vamos a Diseño ► Edición de HTML.

En la nueva interfaz de Blogger (ahora disponible desde Blogger in Draft), vamos a Plantilla ►Editar Plantilla...

Esta parte, está allá al fondo, cuando ingresamos a Plantilla, y así ingresamos a la Edición de HTML de la plantilla.

Paso 2: Con la ayuda de ctrl F, buscamos:

<div id='sidebar-wrapper'>

La linea anterior, la podrán encontrar en la mayoría de las plantillas que han sido editadas, o en las de Diseño, (las viejitas)  en el caso de las plantillas del Diseñador de plantillas, buscaríamos esta linea:



<div class='column-right-inner'>

Paso 3: Inmediatamente después, pegamos el código de la sección nueva:

<b:section class='seccion-nueva' id='seccion1' showaddelement='yes'></b:section>

Paso 4: Checamos en vista previa, y si todo luce bien, guardamos los cambios.



Con las lineas de código que estamos agregando, bastará para tener una sección nueva, a la que podemos agregar todos los widgets que queramos, y para eso, tenemos que ir a los elementos de la página o Diseño (en la nueva interfaz de Blogger) y ponerlos.



Podemos personalizar nuestra sección con CSS, usando el ID que es seccion1 o bien, con la clase, que es seccion-nueva, y para lograrlo, escribimos nuestro CSS, yendo al Diseñador de plantillas►Avanzado► Añadir CSS...



Por ejemplo:



Personalizar los títulos de los widgets en la sección que creamos:

#seccion1 h2 {

color: #000000; /*el color de fuente o texto del titul*/

baackground-color: #ffffff; /*el color de fondo*/

padding: 5px;

margin: 0 0 6px; /*le ponemos margen abajo*/

}

Si quisieramos que cada widgtet de la sección, luciera separado uno del otro (como cajitas), entonces, escribiríamos:

.seccion-nueva .widget {

background-color: #f0eeb8; /*el color del fondo*/

margin: 0 0 16px; /*margen al fondo para separarlo*/

border: 1px solid #cfb473;/*el color y estilo del borde*/

}

Si quisieramos usar imágenes como fondo o background, ya sea del título del widget, o del fondo entonces,

en lugar de background-color, escribiriamos...

background: url(imagen.gif) no-repeat left top;

Sólo sustituimos imagen.gif por nuestra imagen.



Ahora, ya tenemos una sección nueva en nuestra columna, y le podemos dar la apariencia que se nos antoje :)