24 octubre, 2006

Añadir y dividir columnas en Blogger Beta

Tras el apunte "Cómo actualizar con éxito de Blogger a Blogger Beta" he observado que algunos de los recursos que se ofrecen en los enlaces se pueden afinar y mejorar bastante más. Ése es el caso del recurso de edición de columnas que ofrecía Hackosphere, el cual tiene un pequeño error al no prever que las columnas se pueden mover si no existe contenido en el "#main-wrapper". La solución es muy sencilla, y tras ella se abre un abanico de posibilidades para añadir secciones donde nos interese, siempre y cuando respetemos el código interno de Blogger, y lo que es mejor, editables desde la interfaz gráfica.

Lo primero que hay que hacer para editar con éxito es tener unos mínimos conocimientos de CSS (si no se dispone, Dreamweaver puede ayudar algo); entender el funcionamiento de las plantillas de Blogger; y algo de precaución, que pasa por hacer copias de nuestras plantillas operativas desde la página de edición en html, y realizar los experimentos en otro blog de pruebas.

Para empezar, creemos un blog con una plantilla similar a la nuestra donde realizar las pruebas que posteriormente se pasarán al que utilizamos para publicar nuestros artículos. Antes de proseguir, es importante plantearse la opción de cambiar de plantilla, sobre todo si la que utilizamos en la publicación utiliza medidas relativas para definir las dimensiones de las capas. De ser así, posiblemente nos compliquemos la vida dado que los porcentajes varían según el tamaño de la página y es posible que no obtengamos el resultado deseado. Para evitar este pequeño inconveniente es recomendable utilizar plantillas con medidas absolutas, en píxeles, como "Minima", "Scribe" o "Rounder".

Una vez creado el blog de pruebas y seleccionada la plantilla, nos dirigimos a Template>edit html. En el cuadro de edición html, y con "Expand Widget Templates" desactivado, buscamos el "emboltorio" de las columnas "#sidebar-wrapper " dentro del bloque CSS delimitado en la sección "Outer-Wrapper". Seguidamente se selecciona y copia todo el conjunto de estilos para la columna, tal y como se ilustra en la imagen. La idea es crear columnas con los mismos estilos de la principal y de camino evitarse complicaciones y diseños anárquicos.

Con el texto copiado, nos situamos justo debajo de la llave de cierre ("}")del conjunto de estilos definidos para la columna, y pegamos. Cada vez que repitamos esta acción, estaremos creando una columna nueva que tenemos que identificar con un nombre diferente para cada una. Para ello deberíamos tener realizado un croquis sobre la distribución de la columnas en nuestra plantilla. Las posibilidades son numerosas, permitiendo tener dos columnas, a la derecha e izquierda, dos columnas dentro de una columna, o dos columnas independientes en un lateral del blog. Al identificar cada columna con un nombre diferente, por ejemplo "#sidebarl-wrapper ", lo que realmente se está haciendo es crear una capa con un conjunto de estilos similares que posteriormente ubicaremos en un lateral del blog o incluiremos dentro de la capa principal "#sidebar-wrapper " que contiene la columna.

Dividir Columnas

Identificada cada columna creada se procede a cambiar su tamaño y posición, lo que puede afectar a otras capas del diseño de nuestro blog. El tamaño viene delimitado por el tag "width" y la posición por el tag "float". En este caso he identificado la columna como "#sidebarl-wrapper ", la "l" de left, y le he modificado su tamaño a 15opx y su posición a la izquierda (left).


#sidebarl-wrapper { width: 150px;
float: left;
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 */
}


Hacemos lo mismo para la columna de la derecha, con la salvedad de que ahora habrá que delimitar un margen "margin-left", que impida que se unan las dos columnas por un lateral. Este margen lo he establecido en 10px, que restarán al tamaño de la columna, que pasa de 150 a 140. Aparte, se indicará que la columna se posicione en la derecha cambiando la propiedad de "float" a "right". Importante, la suma de las dimensiones de las dos columnas, incluyendo el margen, no pueden sobrepasar la dimensión de la columna principal.


#sidebarr-wrapper { width: 140px;
float: right;
margin-left:10px;
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 */
}


El último paso, una vez definidas las nuevas columnas, consiste en crear las capas, ubicar y aplicar los estilos creados. Para ello nos posicionamos en la capa "<div id="'sidebar-wrapper'">". Si nos fijamos en su contenido podemos observar un par de instrucciones que explico por encima para comprender el contenido de la capa. Así, b:section es el delimitador de la sección. Una capa sólo y obligatoriamente debe tener una sección a la que se le aplica los estilos y un único identificador para el conjunto de la plantilla. Las secciones acogen los b:widget que son los elementos que agregamos como enlaces, complementos, banners... Estas instrucciones son vitales para poder trabajar posteriormente desde la edición visual de las plantillas. Copiamos por tanto todo su contenido salvo los "widget" que posteriormente iremos ubicando, y lo pegamos entre el cierre de sección de la columna principal quedando algo así:


<div id="'sidebar-wrapper'">
<b:section class="'sidebar'" id="'sidebar'" preferred="'yes'">
[Widgets]
</b:section>

<div id="'sidebarl-wrapper'">
<b:section class="'sidebar'" id="'sidebarl'" preferred="'no'">
[Widgets]
</b:section>
</div>

<div id="'sidebarr-wrapper'">
<b:section class="'sidebar'" id="'sidebarr'" preferred="'no'">
[Widgets]
</b:section>
</div>
</div>


Los último ajustes que habrá que hacer son los siguientes. Identificamos el "id" de cada div con el nombre de la columna que queramos colocar. Identificamos el "id" de b:seccion con un nombre cuaquiera que sea único, por ejemplo "sidebarr"; e importantísimo, cambiamos la propiedad de "preferred" a "no". Muy importante, asegurarse que las dos nuevas capas están dentro de la capa principal. Si todo sale bien, podemos ir colocando los widgets que teníamos en la principal en las dos nuevas columnas. Una vez terminado este proceso podemos ir a "Page Elements" y obtendremos algo parecido a la imagen. Desde al interfaz gráfica podremos editar todo lo que queramos tal y como lo hacíamos antes.

Añadir una columna

Para añadir una columna se realizará un procedimiento parecido al anterior y bastante más sencillo. Lo único que hay que tener en cuenta es que tendremos que modificar el tamaño de algunos de los elementos de nuestra plantilla. Independientemente de si queremos la columna a la derecha o izquierda de la plantilla, lo conveniente es que modifiquemos las dimensiones de "#header-wrapper " (cabecera), "#outer-wrapper" (edición) y "#footer" a 760px, o la medida que estimemos oportuna, en el tag "width". De esta manera hemos ganado espacio para añadir una columna más y nos aseguramos que ésta quede olgadamente bien dimensionada y posicionada.

Lo siguiente será repetir casi lo mismo que se explicó en la división de columnas. Se copia el "emboltorio" de la columna principal y se pega seguidamente cambiando el nombre que sigue a la almohadilla ("#").

#sidebar-wrapper {
width: 330px;
float: left;
word-wrap: break-word;
overflow: hidden;
}

#sidebar-right-wrapper {
width: 330px;
float: right;
word-wrap: break-word;
overflow: hidden;
}

Seguidamente nos posicionamos en la capa "<div id="'sidebar-wrapper'">" y copiamos su contenido desde "div" hasta el cierre de "/div", y pegamos a continuación, cambiando el "id" de la capa y el "id" de la sección como se hizo en la división de columnas. Al final debería quedar algo así:

<div id="'sidebar-wrapper'">
<b:section class="'sidebar'" id="'sidebar'" preferred="'yes'">
[Widgets]
</b:section>
</div>

<div id="'sidebar-right-wrapper'">
<b:section class="'sidebar'" id="'sidebar-right'" preferred="'yes'">
[Widgets]
</b:section>
</div>



Nótese que a diferencia de la división de columnas, "preferred" tiene la propiedad "yes" y cada capa es independiente y no pertenece a otra columna. Movemos los widgets de un lado a otro de la columna y terminamos por realizar los últimos ajustes de las dimensiones de la plantilla. Para ello le damos a "preview" y observamos si las dimensiones son las correctas. En caso de que no lo sea, se ajustará en el tag "width" de las columnas o de los "emboltorios" afectados: cabecera, cuerpo, pie, e incluso #main-wrapper, que por defecto suele estar a 420px. Para estos ajustes tener siempre en cuenta la referencia de "#outer-wrapper" (Cuerpo), en este caso 760px, por lo que no vendrá nada mal la ayuda de una calculadora.