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:plantilla blogger2 blogger blogspot 3+columnas tutorial columnas how+to como+hacer template blogs bitacoras www blogalaxia tricks ayuda+para+tu+blogayuda+para+mi+blog
h3dicho
31 Responses to “Como agregar una columna extra para mi blog? – Blogs de 3 Columnas-”
abril 3rd, 2009 at 4:17 PM
perdon te di mal mi dirección de blog, es esta: sgsdg
abril 3rd, 2009 at 4:13 PM
se que suena un poco raro pero a mi no me sale en mi plantilla es de “/* Page Structure” me podrias ayudar
Mi blog es: sfghsg, por si te gusta la música entra aquí
marzo 24th, 2009 at 7:43 PM
Por favor ayudenme, es urgente!
No sé xq sale eso, por favor
marzo 23rd, 2009 at 6:27 PM
Cuando doy el ultimo paso me sale que:
El código ID del nuevo widget “maestroweb” no es válido para este tipo: Profile
que hago??
febrero 18th, 2009 at 2:35 PM
como puedo agregar una columna de comentarios para que registren los ussuarios sus comentarios en mi blog a cerca del mismo? y aparezcan todo el tiempo?
febrero 11th, 2009 at 2:33 AM
He podido poner la tercer columna!!!!!!!!!!
Muchas gracias por el dato, ya que fue la unica explicación que me resulto.
Y de paso reitero mi pregunta ¿se le puede cambiar el color al fondo de las columnas, un color por columna?
Saludos!!!!!!!!!
enero 16th, 2009 at 1:13 AM
Hola!!!!!!!!! Intento ahora con tu explicacion.Te hago una pregunta: se puede cambiar el fondo del color de las columnas? Elegir un color distinto de fonfo para cada columna, y otro para el cuerpo principal?DEsde ya, muchas gracias.
noviembre 13th, 2008 at 3:56 PM
he puesto la tercera columna pero me ha quedado en la mitad y en blanco no puedo poner gadgets ni nada me ayudas por favos. mi blog para que lo veas http://negociosempleodinero.blogspot.com
noviembre 10th, 2008 at 12:22 AM
Hola, la verdad tu tutorial es el mejor que he encontrado para hacer columnas extras, pero me queda un solo problema:la columna (derecha) que creé me aparece SOBRE el area de los posts. yo la quiero mover (toda) más hacia la derecha. en dónde puedo cambiar valores para que quede bien?gracias de antemano
noviembre 5th, 2008 at 10:52 AM
MuY BUENO!gracias
octubre 30th, 2008 at 12:47 PM
una cosa tan dificil lo haces muy facil, y además el que quiera aprender también puede aprovecharlo, gracias por tus contenidos
octubre 28th, 2008 at 11:07 AM
En blogia la plantilla y los comandos html son muy diferentes por lo que añadir una tercera columna con lo leido en este artículo y sin saber html es difícil. Haber si hay alguien que se atreviera a hacerlo para blogia. Sería un artículo que triunfaría, ya que, por lo que he leido somos muchos en blogia que estamos intentando hacerlo y no lo conseguimos porque las mayoría de tutoriales no nos valen. Un saludo.
octubre 11th, 2008 at 11:28 AM
Hola!! muchas gracias por ayudarme en algo que venia buscando hace tiempo!! saludos desde paraguay
septiembre 14th, 2008 at 7:07 PM
GRACIAS MAN!!! ESTUBE BUSCANDO COMO PONERLE 3 COLUMNAS AMI BLOG DESDE KE LO EMPEZE Y NO ENCONTRABA LA MANERA!!! HASTA KE ALFIN TU PUBLICACION ME AYUDO A PONERLA GRACIAS Y PURA VIDA!!!!! ESTE ES MI BLOGxhardtokillx.blogspot.com
agosto 20th, 2008 at 4:50 PM
Mira…despues de SYSTEM OF A DOWN, y MARTIN PALERMO, vos sos mi idolo jejejeMucha gracias por las columnas y por el leer masmuchas gracias en seriome sacaron canas los dospero vos la hiciste simpleun abrazo
agosto 15th, 2008 at 2:00 PM
una consulta… como podria agregar un sidebar(widebar)horizontal en la parte superior del blog y que este a los larg…saludos…
agosto 10th, 2008 at 3:16 AM
ESTE MENSAJE APARECE LUEGO DE SEGUIR TOODOOOS TUS PASOS.ME AYUDAS?No se ha podido analizar su plantilla, porque no está bien formada. Asegúrese de que todos los elementos XML se han cerrado correctamente. Mensaje de error de XML: The element type “b:section” must be terminated by the matching end-tag “”.
agosto 3rd, 2008 at 10:38 PM
juas!!! llevaba tiempo buscando hacer esto en nuestro blog y gracias a ti me ha quedado de puta madre.elbichoonline¡¡¡Muchas gracias!!!
julio 28th, 2008 at 2:52 PM
telo agradezco me fue muy util el tuto y logre la tercera columna con exito gracias.
julio 20th, 2008 at 10:33 PM
te agradezco mucho! me funcionó, pueden ver en mi blog, ahora tengo dos columnas!! jeje, gracias!
julio 7th, 2008 at 5:51 AM
jajajajajajaja compadre mil gracias fueron muchas horas de buscar algi funcional hasta que te encontre saludos
mayo 17th, 2008 at 7:36 PM
sabe, hace poco cambie mi resolucion de pantalla a 1280x 1024 y mi blog se ve pequeño y me he dado cuenta que otros blog se ajustan a la resolucion de la pantalla del que las visitacomo se logra eso????
febrero 7th, 2008 at 8:31 AM
exelente tu tuttorial. muy claro pero no puedo encontrar en mi plantilla el foot para modificarlo.tengo una plantilla 565.me podrias ayudar?gracias
febrero 6th, 2008 at 1:20 PM
Cualquier duda esta el ejemplo enhttp://www.maestroweb.ticoblogger.com/3columnas.txtX un tiempo estuvo fuera de servicio.. pero cualquier duda verifiquen ese código..
enero 30th, 2008 at 11:10 PM
Hola, muy buena tu ayuda! Lo probé, pero me quedan las columnas muy pegadas, sobre todo lanueva y el main, y no sé cómo resolverlo!! ¿Alguna ayuda? Muchas gracias!
enero 20th, 2008 at 1:53 PM
Oh de verad muchas gracias era justo lo que buscaba!!!
noviembre 4th, 2007 at 12:50 PM
Muy bueno el post me funciono de maravilla saludos!!!!
septiembre 22nd, 2007 at 6:45 PM
mae q bueno ya lo puse y si funciona
agosto 31st, 2007 at 10:45 PM
Gracias por compartir estos tips tan importantes.
agosto 13th, 2007 at 11:24 AM
por fin, pero hare los cambios con tiemp y cuidado. Gracias
agosto 13th, 2007 at 2:38 AM
Muy bueno el post. Cuando tenga tiempo me pongo a travesear mi plantilla