Como agregar una columna extra para mi blog? - Blogs de 3 Columnas-
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 arriba
#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
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 arriba
#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
Siempre dejando un espacio, no pegadito a main-wrapper ya que es aparte.
preferred='yes'>
type='Profile'/>
Si lo que quieres es que las dos columnas queden juntas , en alguno de los lados, debes pegar el código despues de
preferred='yes'>
type='Profile'/>
Si lo que quieres es que las dos columnas queden juntas , en alguno de los lados, debes pegar el código despues de
