Este tutorial te va a servir para añadir una columna extra para tu blog, si tu blog solo tiene dos columnas (incluyendo el contenido), con este tutorial podrás agregarle otra adicional. Y el mismo sirve para agregarle cuantas columnas quieras.

Primero debes ingresar a Edición de HTML y sería bueno que descargues la plantilla antes de hacerle cualquier cambio, por razones de seguridad.
Para empezar busca (control+f) /* Page Structure

Ahora cambia sección por sección, el ancho (width) por el que aparece abajo.

En algunos casos los nombres tienen ligeros cambios , pero en general siempre suelen mantener la esencia como decir main-wrapper puede aparecer como #main-wrap … y asi sucesivamente.


#outer-wrapper{ (En esta se predetermina el ancho total del sitio)
width:970px;

#main-wrapper {(En esta se predetermina el ancho del contenido)
width:500px;

#sidebar-wrapper {(Columna lateral)
width:270px;

———-> un poco más abajo

#Header-wrapper{
width:970px;

———-> un poco más abajo

#Footer{
width:970px;

—-

Si apareciera en ves de px el % de porcentaje, nada más lo borras y lo agregas tal y como aparece ahí arriba. Ejemplo Si apareciera en #main-wrapper width:30%, debes cambiarlo por width:500px;

Ahora para agregar la nueva columna a la que vamos a llamar #lanueva , tienes que copiar el código en rojo y pegarlo al final de el #sidebar-wrapper(el azul) (a manera de ejemplo)

#sidebar-wrapper {
width: 270px;
float: right;
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 */
}

#lanueva {
width: 200px;
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 */
}

Si te fijas #lanueva le pusimos un ancho de 200px , pero realmente la puedes poner del ancho que prefieras.

Eso si, el total de la suma de anchos del #sidebar-wrapper , #main-wrapper y #lanueva , debe ser equivalente al ancho #outer-wrapper, nunca superior.

Para el caso especifico de este tutorial el #outer-wrap mide 970px , el #main-wrap 500px, y el sidebar-wrapper 270px y #lanueva 200 px. Para una suma total de 970px .

Así como estan esos códigos #lanueva va estar alineada a la izquierda y #sidebar-wrapper a la derecha. En algunos templates el sidebar puede venir a la izquierda, por lo que deberias cambiar el float: left; por float: right; para el caso de la nueva, generalmente al contrario del lado en que se encuentre la columna lateral original.

Ahora vamos a añadirle tu PERFIL a #lanueva de manera temporal, con el fin de agregar contenido, arribita de <div id=’main-wrapper’> Siempre dejando un espacio, no pegadito a main-wrapper ya que es aparte.

<div id=’lanueva’>

<b:section class=’sidebar’ id=’lanueva’
preferred=’yes’>

<b:widget id=’maestroweb’ locked=’false’ title=’About Me’
type=’Profile’/>

</b:section>

</div>

Si lo que quieres es que las dos columnas queden juntas , en alguno de los lados, debes pegar el código despues de <div id=’sidebar-wrapper’> , y la posición en que aparezcan lo va a determinar el parametro derecho o izquierdo que hayas puesto arriba en “float” (en Page Structure) para cada una de las columnas.

Ahora opcionalmente se puede configurar el ancho que va aparecer en el editor de elementos.

Busca el código que sale en negro y le pegas abajo el código que sale en rojo.

/** Page structure tweaks for
layout editor wireframe */
body#layout #header {
margin-left: 0px;
margin-right: 0px;
}

body#layout #outer-wrapper {

width: 970px;

}

Este post fue verificado usando la plantilla HARBOR de BLOGGER2 , y el resultado de la misma puede bajarse dandole -click aca- para que puedan comparar y verlo puesto en practica. Es un archivo .txt por lo que no ocupas ningún programa extra para verlo.

Este Blog esta ahora hosteado en Wordpress, pero el tutorial sigue siendo valido

tags: