Para empezar, algo muy importante que no se os debe olvidar es realizar la copia de seguridad de la plantilla tal y como he explicado en la entrada anterior.Una vez hecha la copia de seguridad, nos podremos manos a la obra. Accedemos a la ficha Diseño -> Edición de HTML.
Teniendo desactivada la casilla Expandir plantillas de artilugios, buscamos el siguiente código que podemos encontrar dentro del apartado Outer-Wrapper:
width: 220px;
float: $endSide;
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 */
}
Éste es el código de la barra lateral que tenemos actualmente a la derecha de nuestro blog. Lo que vamos a hacer es crear una nueva a partir de ésta. Para ello, copiaremos el código citado anteriormente y lo pegaremos justo debajo.
A continuación, vamos a realizar algunas modificaciones en el código que acabamos de pegar.
En primer lugar, modificamos el nombre de la barra (sidebar) por newsidebar.
Si nos fijamos en el código, tenemos la propiedad float que indica la alineación de la barra. La primera barra tiene alineación derecha ($endSide), mientras que a la barra que acabamos de crear le daremos alineación izquierda ($startSide), por lo que tendremos que modificar el valor $endSide por $startSide.
Si quisiésemos que las dos barras aparecieran al mismo lado, dejaríamos el código de la propiedad float tal y como está.
La anchura de la barra la indica la propiedad width y viene indicada en píxeles.
El código final de la nueva barra tendría que tener más o menos el siguiente aspecto:
width: 220px;
float: $startSide;
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 */
}
Para terminar la creación de la nueva columna en nuestro blog, bajaremos casi hasta el final de la plantilla donde comienza el cuerpo de la página (body) y buscaremos el siguiente código:
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='Followers1' locked='false' title='Seguidores' type='Followers'/>
<b:widget id='BlogArchive1' locked='false' title='Archivo del blog' type='BlogArchive'/>
<b:widget id='Profile1' locked='false' title='Datos personales' type='Profile'/>
</b:section>
</div>
Éste es el código de la barra que tenemos en el blog actualmente con sus gadgets de seguidores, archivo del blog y datos personales.
Bien, pues de nuevo, seleccionamos este código y lo pegamos, pero en este caso en vez de a continuación, subimos un poco hacia arriba en la plantilla y lo pegamos antes del siguiente código que tenemos también dentro del cuerpo de la página (body):
Eliminamos los gadgets que tenemos agregados a la barra, puesto que no puede haber dos gadgets archivo del blog ni seguidores, y además modificamos el nombre de la barra por el de newsidebar. Éste sería el código final de la barra nueva:
<b:section class='sidebar' id='newsidebar' preferred='yes'>
<b:widget id='Followers1' locked='false' title='Seguidores' type='Followers'/>
</b:section>
</div>
Como podéis ver le he agregado el gadget de Seguidores, desde la ficha Diseño -> Elementos de la página, para que podamos apreciar la existencia de esta nueva barra.
Si guardamos los cambios y comprobamos el resultado comprobaremos que por la anchura del blog y de las columnas, el resultado que queríamos no se visualiza correctamente.
Hasta aqui hemos agregado una nueva columna y le hemos puesto alineación. Ahora modificaremos la anchura del blog para que ambas columnas se encuentren al mismo nivel.
De nuevo, accedemos a la ficha Diseño -> Edición de HTML y buscamos el código que define tanto el ancho del blog como el ancho de las columnas o barras.
En primer lugar, modificaremos el ancho del blog, para ello buscamos dentro del encabezado de la página (head) en el apartado Outer-Wrapper el código siguiente:
width: 660px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}
Como podemos ver tenemos definido un ancho de 660 píxeles para el blog. Si nos fijamos un poco más abajo encontraremos el ancho de la zona donde se muestran las entradas (main-wrapper) que inicialmente está definido en 410 píxeles, que si lo sumamos a los 220 píxeles de ancho que tiene cada columna, comprobaremos el por qué no cabe en pantalla.
Pues como he dicho antes, modificaremos el ancho del blog, en vez de 660 píxeles lo vamos a establecer en 870 píxeles (sumamos los 410 px del blog más los 220 px de cada barra y dejamos un poco de margen para el espacio entre cada uno de estos elementos).
Si guardamos los cambios y visualizamos ahora el resultado, más o menos tendríamos esto:
Las medidas son orientativas, podéis jugar con ellas a vuestro gusto.Solo un apunte más, para modificar el espacio que hay entre la nueva barra y la parte central de nuestro blog, añadiremos en la creación de la barra nueva (newsidebar) el siguiente código:
De esta forma, nuestro blog tendría el siguiente aspecto:
44 comentarios:
Buenísiima tu entrada, voy a probarlo, aunque lo veo un poco largo. Para esto hay que estar bien concentrado.
Bueno, ya te cuento.
Es fácil cuando entiendes la plantilla, es solo cogerle el truco, cuando se lo hayas cogido ya verás haces columnas por todos los lados.
Pues sí tienes razon, vi primero esta entrada. Luego cuando volvi a entrar me equivoqué de post.
Bueno el caso es que ahora, con muchos apuros, me ha salido, ya tengo dos columnas. Me ha costado lo suyo, pero se me ha quedado estupendo,
Gracias,
un saludo, josé carlos
Felicidades por el nuevo aspecto de tu blog, te ha quedado muy bien.
Saludos.
Gracias Jose M., en fin, que ahora no estaría mal cambiar el color de fondo de las columnas, no?....
Puede ser que en esta entrada encuentres respuesta a tu pregunta.
No sabes cuanto me ayudó este tutorial, desde hace mucho quería agregar una tercera columna a mi plantilla, pero lo único que encontraba era cambiar toda la plantilla y perdería algunos artilugios, muchísimas gracias y te voy a agregar a mi blog para que otra gente pueda aprender mas de tu sitio...
Saludos desde Chile
Muchas gracias por tu comentario, saludos
Muy bueno. pero una pregunta. el lugar donde van los post me queda muy a la izquierda. ¿como lo arreglo?
http://www.desordenartistico.blogspot.com
Hola JuaNMaN,
por lo que veo en tu blog tienes definida la zona de las entradas con 410 px de ancho, la barra lateral derecha con 450 px y la izquierda 220 px.
El ancho del blog lo tienes definido en 870 px. Si te das cuenta si sumas todas las anchuras superan el ancho del blog, razón por la cual la barra lateral derecha aparece abajo y no a la misma altura que los demás elementos.
Modifica el ancho de la barra lateral derecha o amplía la medida del ancho del blog.
quisiera saber porque me tira este error no he podido agregar una nueva colmna debido a esto ayuda por favor gracias!!
Se ha encontrado más de un artilugio con el ID: Followers1. Los ID de artilugio deben ser exclusivos.
Hola Schutzstaffel,
estás duplicando el gadget Seguidores y, como bien te indica en el mensaje de error, ese gadget es único es decir solo puede aparecer una vez en la plantilla y como en la tuya aparece dos veces por eso no te deja guardar la plantilla con la nueva columna.
Debes borrar, en el body de la plantilla, una de las líneas que contiene el gadget Seguidores.
Hola primero que nada felicitaciones porque este blog esta muy interesante para los que conocemos poco de htlm estuve leyendo para hecer estos cambios en mi blog y me da el siguiente error:
No hemos podido guardar tu plantilla.
Por favor corrige el siguiente error:
Declaracion de la variable no valida en mascara de pagina.La variable se utiliza pero no esta definida.Información: starside
Hola Boutique Country,
es que le falta una T, no es STARSIDE, es STARTSIDE.
Saludos.
Gracias por el llamado de atención, que pena disculpame era algo tarde ya cuando empeze a realizar los cambios y casi no veia...Gracias nuevamente y felicitaciones por tu blog.
Saludos...
Mónica.
De nada Mónica, saludos
Hola José, por primeraa vez he podido agregar una tercer columna gracias a vos. Lo hice en un blog de prueba. Intenté hacerlo en el mio, pero no puedo. como puedo hacerlo sin tener que eliminar nada de él. Es http//:artesaniasalemardelaspampas.blogspot.com
Desde ya muchisimas gracias
Hola Artesana,
bueno pues la mejor forma de hacerlo es agregando el código directamente tal y como lo has realizado en el blog de prueba.
Debes comprobar si en el blog de prueba y en el real tienes aplicada la misma plantilla.
Si no es así, te aconsejo que apliques la misma plantilla en los dos blogs para que al aplicarlo en el blog real no tengas ningún problema.
Saludos.
Yo de nuevo. Al aplicarla se me suprimen todos los artilugios. Es inevitable?
Hola Jose. yo de nuevo. intenté hacerlo como me decis, pero al guardarla me dice que se eliminarán los artilugios. Es esto inevitable?
Hola Artesana,
es que creo que estás comentiendo un error, o lo estoy entendiendo yo mal que también puede ser, no te estoy diciendo que apliques la plantilla del blog de pruebas, te estoy diciendo que repitas todos los pasos en el blog real para así no suprimir todos los gadgets que tengas añadidos.
Ahora sí!, justamente copiaba la plantilla del blog de prueba. Ya me pongo a trabajar y despues te cuento como quedó. Muchas gracias José
Espero que te quede bien, saludos
José, pude hacerlo!!! Ya tengo mi blog a tres columnas. Muchisimas gracias por tus indicaciones y paciencia. saludos
De nada, saludos.
Hola José!
Finalmente he conseguido añadir la columna que tanto se resistía. Lo que ocurre es que la última parte no logro hacerla, es decir, establecer un espacio entre el texto central y las dos columnas para que no quede tan junto. Dónde exactamente tengo que pegar eso de padding-$endSide:1em; ?
Gracias!
Hola Sue,
debes agregarlo en la definición de la barra lateral (sidebar-wrapper), es decir, dentro del primer código que hay al principio de esta entrada.
muy bueno!!!!!
Hola :) Me ayudast muchisisisimo pero mi blog lo veo demaciado grande he intentado arreglarlo pero no he podido, quiero que me quede mas o menos asi http://icarlysnack.blogspot.com/. me podrias ayudar??? Este es mi blog http://isatkmasyicarly.blogspot.com/ te lo agradeceria mucho :)
pues yo veo los dos del mismo tamaño :S
jejeje q' pena contigo es q' ayer se vea inmenso no t imaginas cuanto pero d todas maneras me gustaria q' la columna d la derecha los textos no queden tan a la orilla. Se puede hacer???
Hola Andrea,
lo único que debes hacer es disminuir el ancho del blog, pero claro para eso tendrás que modificar el ancho de la imagen de cabecera que tienes puesta y modificar el ancho de las barras laterales y la central.
Huy no mejor lo djo asi jejeje Gracias x tu ayuda :)
jajajaa, ok, de nada :)
hola, primero de nada quiero felicitarte por esta gran pagina que has creado. bueno la duda que tengo que lo hago todo tal cual lo dices pero me sale que hay un error cuando intento guardar la plantilla, me pone que los id son exclusivos. que debo hacer? no lo entiendo porque lo de seguidores no se duplica. porcierto tengo 3 columnas abajo del todo (footer) por si tiene algo que ver.
Hola ernes
eso te ocurre porque estás duplicando algún apartado que es exclusivo.
Haz una cosa, la nueva barra lateral déjala sin ningún gadget en el código y luego los agregas desde la pantalla de Elementos de la página
Hola José, vuelvo a molestart jejeje es q mira q cuando pongo un gadget en la parte de abajo del blog sale como cortado la part q esta como en rosa y no c como ponerla derechita, me podrias ayudar??? y q pena contigo =)(mi blog es isatkmasyicarly.blogspot.com) t lo agradeceria mucho!!!
Hola Andrea L.
te refieres al borde del pie del blog que no aparece redondeado?
sip en la part derecha =)
ok, pues ese borde redondeado realmente es una imagen, y dado que has hecho más ancho el blog, tendrás que hacer esa imagen del mismo ancho que el blog.
Una vez que hayas modificado la imagen, súbela a algún servidor de imágenes, consigue la dirección URL de dicha imagen y cámbiala en la plantilla HTML de tu blog sustituyéndola por la primera.
ok voy a intentarlo, gracias =)
De nada, espero que lo consigas :-)
Está todo bien pero me sale desordenado, no se toma en cuenta el content-wrapper? porque tambien tiene medida.
Hola Ángel
como indico en el post, en esta plantilla el ancho del blog viene definido por outer-wrapper y ése es el hay que modificar para que las barras laterales no aparezcan desordenadas.
El content-wrapper que indicas, sí que hay una referencia en el body pero en la zona de definiciones de formatos no aparece nada, por lo que solo modificando el ancho outer-wrapper y teniendo en cuenta el ancho de las barras laterales y central del blog te debería cuadrar.
Espero que ahora sí lo puedas solucionar, un saludo :-)
Publicar un comentario
Cualquier comentario que incluya en su contenido la dirección URL de una web o blog será reportado inmediatamente por spam y no será publicado.