jueves, 30 de julio de 2009

AGREGAR UNA NUEVA SIDEBAR

Respondiendo al siguiente comentario de Cris me decidí a explicar como crear una nueva sidebar.

"Llevo unos días que se me ha metido e la cocorota poner una segunda colmna a mi blog, porque ya no me caben las cosas en mi columna lateral. He buscado instucciones en google pero no lo he conseguido, no me acabo de enterar y casi la lío.Podrias hacer una entrada sobre esto? ¿Hay que cumplir algún reqisito para poder hacer eso?"

Lo primero comentarte Cris es que nada en el blog es fijo, es decir podemos crear cualquier cosa que creamos oportuna, el único inconveniente es saber hacerlo, ya que para este tipo de cosas el asistente de blogger no nos sirve, deberemos modificar nuestra plantilla mediante código HTML y CSS. Lo ideal sería que todos supieramos estos lenguajes pero como todo, es cuestión de ponerle ganas y pensar un poco, cuando nos ponemos a modificar código nada es automático, debemos de ajustar los códigos a nuestros requerimientos, por tanto intentaré explicar de la forma mas clara posible como hacerlo.

En primer lugar deberemos centrarnos en las estructuras que están implicadas, que principalmente son:Veamos como se refleja esto en el código:

Iremos a la plantilla de nuestro blog, en el caso de blogger Diseño->Edicición de HTML. Antes de nada recomendaros realizar una copia de vuestra plantilla y la búsqueda rápida mediante las teclas Ctrl+F para buscar fragmentos de código.

Lo fundamental a la hora de hacer estas modificaciones es ser conscientes del tamaño del que disponemos. Por tanto nos fijaremos en el atributo width de main-wrapper que es el área donde se muestran los post y de sidebar-wrapper que será la sidebar existente, en el código os aparecerá de la siguiente forma:

#main-wrapper {
padding-top: 0px;
width: 500px;
float: right;
....
}

#sidebar-wrapper {
padding-top: 160px;
padding-right: 30px;
padding-left: 15px;
width: 210px;
float: left;
....
}
Estos fragmentos de código no serán exactamente iguales en vuestro caso, pero lo importante es entender lo que significa. Lo señalado en azul es el ancho y por tanto tendremos que sumar esos valores para saber del ancho del que disponemos, en este caso sería 500px de main + 210px de sidebar =710px. Por tanto dispondríamos de 710px. Es evidente que si añadimos una nueva sidebar tendremos que reducir alguno de estos valores para hacerla encajar. Lo común será crear una nueva sidebar con el mismo ancho que la que tenemos y reducir el espacio del main.

Teniendo esto claro, procederemos a agregar la nueva zona y lo haremos de la siguiente forma:

Buscaremos el fragmento de código con la siguiente estructura.

<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
......AQUI OS APARECERÁ INFORMACION DE VUESTROS GADGETS.
</b:section>
AQUI ES DONDE AÑADIREMOS EL EL CODIGO.
</div>
Sustituiremos la línea que señalé en azul por lo siguiente:

<b:section class='sidebar' id='sidebar2' preferred='yes'></b:section>

Los ID no deben coincidir, observamos como el id de la primera sidebar se llama sidebar y el id de la segunda sidebar se llama sidebar2

Si guardáramos los cambios en este punto, lo que nos pasaría sería que se nos deformaría todo, ya que le estamos agregando una nueva sidebar que no cabe!, por tanto se solaparían y saldría todo desordenado, por tanto es en este punto donde tendremos que ajustar los anchos de cada elemento. Teniendo en cuenta los datos que dedujimos al principio, lo normal sería agregar una sidebar del mismo tamaño que la existente y reducir el tamaño del 'centro', para ello lo que haremos será copiar un nuevo fragmento de código especificanto las características de la nueva sidebar. Lo haremos de la siguiente forma:


#sidebar-wrapper {
padding-top: 160px;
padding-right: 30px;
padding-left: 15px;
width: 210px;
float: left;
....
}


#sidebar2-wrapper {
padding-top: 160px;
padding-right: 30px;
padding-left: 15px;
width: 210px;
float: right;
....
}
La parte señalada en rojo es la que añadimos justamente en la parte inferior del código azul, que es el código de la primera sidebar que teníamos anteriormente pero modificando en la primera linea #sidebar-wrapper por sidebar2-wrapper, los atributos los dejaremos todos igual con el objetivo que sean ambas columnas iguales. Lo único que cambiaremos será float que pondremos right o left dependiendo de donde queramos la nueva columna.

Como punto final adaptaremos el tamaño de la parte central. Como ejemplo al principio os comenté que disponíamos de 710px que en vuestro caso será otro valor, pues los que haremos será sumar el valor de las 2 sidebar en el ejemplo width de sidebar=160px + width sidebar2=160px serían un total de 320px, si teníamos al principio 710px entonces nos quedará para la parte central: 710px-320px=390px. Este sería el valor que tendremos que modificar en el width del main-wrapper. De esta forma nos quedaría todo bien cuadrado.

Ahora solo queda guadar los cambios y esperar que todo haya salido bien. Os recomiendo hacer esto con tiempo y intentando entender bien cada uno de los pasos ya que de no ser así el resultado será un fracaso. Espero hayáis entendido el procedimiento, ya me contaréis vuestras anécdotas :).

24 Comentarios:

Cris dijo...

Gracias, gracias, gracias, gracias. Si es que no sé que es lo que estaba haciendo mal... Ahora me queda cuadrar todas las tontunas de mi columna y listo! Me va a quedar más chulooo!!
Ya te diré cuando lo haga para que pases a verlo!
Besitos!!!

caxitos dijo...

Cris No hay de que, como comenté si no se tienen nociones básicas no es fácil hacer este tipo de cambios y puedes acabar un grave dolor de cabeza, por eso todos los que quieran hacer estos cambios intentar entender los pasos y preguntar cualquier cosa que no entendáis. Cris gracias a ti!!

Cris dijo...

Una cosita más... (soy una pesadilla, lo sé):
He ensanchado un poco el blog para que las columnas tengan más espacio, pero los post se quedan muy cerca de la columna de la izda. ¿Qué número tengo que cambiar para dejar un margen más amplio entre main y las sidebares? Lo he estado intentando hacer sola pero estoy viendo que al final la lío...

Besitos de te he puesto un enlace entre que llega lo que te dije y no.

caxitos dijo...

Crissss Hayy hay hay!!!! que tocaste? Hay que aumentar las cosas proporcionalmete :( partiendo de las medidas originales, si aumentaste por ejemplo el width del main en 10 tendras que hacer lo mismo para las 2 sidebars, la primera que tenias se llama sidebar y la nueva se llama newsidebar.Las medidas que yo te puse eran 160 para cada una y 500 para el main.Deberías hacerlo de esa forma y otra forma es con las propiedades padding, hazlo de la primera forma que te dije y si no te termina de convencer te explico como se hace con padding.

Cris dijo...

Ya.yayayaya. no sé lo que he hecho exactamente, pero más o menos me cuadra como está. Es más o menos el mismo margen que tienes tú, lo que pasa es que en el mío lo veía más desordenado porque a veces escribo hacia la derecha, otras hacia la izda., etc. Pero ya lo veo bien. Graciassss!

Francesco dijo...

Saludos, no me funciona, no me sale esta parte

#sidebar-wrapper {
padding-top: 160px;
padding-right: 30px;
padding-left: 15px;
width: 210px;
float: left;
....
}

Me sale asi :

#sidebar h2 {padding:0 0 0 12px; margin:2px; background:#f0f6fb; line-height:40px; font-weight:normal;}
#sidebar ul{padding-bottom:20px;}
#sidebar ul li {display:block; padding:3px 3px 3px 20px; text-decoration:none; margin:0; border:0; float:none;}
#sidebar ul li a { display:block;text-decoration:none; }
#sidebar ul li a:hover { }

No se si sera por la plantilla ... Ayuda ...

Graxias...

Francesco dijo...

Saludos nuevamente, en si ese es mi problema principal, (el del sidebar), ya que quisiera poner otro en el lado izquierdo pero en la mayoria de los tutos ponen codigos (html) para buscar que en la plantilla de mi blog estan pero de otra manera, como lo puse en el ejemplo anterior..

Tambien tengo un inconveniente con la fecha en las q publico los post, pues esta no sale.

Por favor pido su ayuda, este es mi blog :

www.themaso.blogspot.com

Muxas gracias... Los enlazare con mucho gusto...
Xfa help...

Sumer dijo...

Una pregunta Caxitos, en aquí tu banner, ¿porque un enlace va más rápido que el otro?. Por favor responde y gracias.

caxitos dijo...

Francesco Es muy dificil que encuentres como tu dices un tutorial en el qua aparezcan los código tal cual los tienes tu ya que cada plantilla es un mundo, por normal general se expone cual es la base para hacer las modificaciones, queda a mano del propietario del blog realizarlas.

Entiendo que si ves el código y no sabes que es cada cosa sea algo imposible de hacer modificaciones de este tipo.

Si quieres mandame tu plantilla por correo y intentaré agregarte la nueva sidebar, ya que explicar como agregar una sidebar para cada plantilla es misión imposible. Un saludo espero noticias tuyas.

caxitos dijo...

Sumer Jejeje va uno mas rapido que el otro por que has puesto mal el código, revisa la entrada donde se explicaba como hacerlo y en caso de no solucionarlo mandame tu código por correo y te explico cual es el problema.!!! Saluditosss!!

Mayhem dijo...

Hola, wenas, primero agradecerte esto :)
he seguido todos los pasos, pero luego (despues de guardar) voy a "Elementos de página" y sigue apareciendo solo 1 barra lateral... ke debo hacer?
Graciaaaaaaaas

caxitos dijo...

Hola Mayhem Es complicado ver que te falló, como sabrás cada plantilla es un mundo, la parte que muerta la sidebar es la que comienza por div, te recomiendo mieres todo cuidadosamente, te fijes si tienes reservado el espacio para la nueva sidebar, si es asi tan solo te kedaría mostrarla. Deberias dejar por lo menos la dirección de tu blog para por lo menos poder mirar cual es tu plantilla. Si no consigues hacerlo mandame si quieres la plantilla por email y yo mismo intentaré agregarte la nueva sidebar. Un saludo! :)

Francesco dijo...

Saludos, Caxitos, gracias por tu respuesta, tienes toda la razon pa q ...

Y Graxias por disposicion a ayudarme, te mando en este momento por correo la plantilla en xml, y en el notepad...

Graxias...

caxitos dijo...

Francesco Te comento que ya te agregue la nueva sidebar, ha sido trabajo de chinos ya que la plantilla no es de blogger si no de wordpress, te la mando por correo para que la puebes, ya me dices como quedó la cosa.

Francesco dijo...

Muchas Graxias Caxitos !!

Te lo agradesco un mundo, pero aun no eh recibido la plantilla estamos 05 de septiembre...

Chekate bien el e-mail, capaz te equivocaste XD ...

De antemano muchisimas Graxias y espero recivirla pronto.

Francesco dijo...

Saludos, caxitos, nose si llego el comentario que mande ayer, sobre que no me habia llegado la plantilla, espero me ayudes con eso MUCHAS GRAXIAS

fake.fk6@gmail.com mi mail...

Graxias

caxitos dijo...

Francesco Te volví a enviar la plantilla al correo, pruebala y ya me cuentas, la tienes como datos adjuntos. Un saludo!

Francesco dijo...

Ok Graxias... hace unos 3 dias la recibi, es q estaba en el Spam XD...

Oie a manera de agradecimiento te quisiera enlazar, dime como quieres q te ponga ...

Graxias

Rodrigo dijo...

buenas amigo, muy interesante tu blog, te pediria que entres al mio, porque quiero agrandar la vista, me aparece mucho espacio verde para los costados sin nada, y no se como ocuparlo, muchas gracias :D

te dejo mi mail para que me respondas si podes...
elrodrixbm91@hotmail.com

caxitos dijo...

Rodrigo Lo que tienes que hacer para ampliar tu sidebar es aumentar el numero de pixeles, tendras que aumentar el width, tendrás que buscar el nombre de tu sidebar en el código de tu plantilla, lo mas normal es que se llame sidebar-wrapper, pruebalo y me cuentas.

díasdeaventura dijo...

Hola¡
He creado la sidebar nueva pero no me aparece como tal en elementos de página.
Qué debo hacer?
Muchas gracias por tus aportaciones a quienes tratamos de acercarnos a este campo de los blog.
Saludos

caxitos dijo...

diasdeaventura :) A ver...en primer lugar esto no lo recomiendo a gente que no tenga dominio con CSS y HTM ya que lo mas seguro es que acabe en catastrofe. La clave está en el div que es lo que permite mostrar el nuevo elemento. Sinceramente si tras varias pruebas no lo consigues y tu blog es relativamente nuevo lo mas facil es cambiar de plantilla, conservar todos tus datos entradas y comentarios y existen millones de plantillas que se adaptan a todos los gustos y colores. D todas formas si te empeñas en crear la nueva sidebar puedes indicarme el nombre de tu plantilla y te aconsejare mas especificamente.

Publicar un comentario en la entrada

Haga su comentario

Bienvenido al Rincon del Blog
Tus comentarios nos ayudan a mejorar
Muchas Gracias por Comentar.