169

Añadir una widebar (para plantillas de tres columnas)

Recuerda
que aunque yo pruebe los "trucos"
Antes de hacer ningún cambio
GUARDA SIEMPRE TU PLANTILLA
Nunca es seguro
que todo salga bien...
Con este método conseguiremos añadir a nuestra plantilla (solo si tiene dos sidebars colocadas al mismo lado), una nueva sidebar horizontal, que se verá sobre las que ya tenemos, ocupando el mismo espacio que ocupan las otras dos juntas:

Ejemplo de widebar
Es un espacio perfecto para añadir nuestro perfil o una nube de etiquetas por ejemplo.

[1] En primer lugar añadiremos el código CSS necesario antes de ]]>:<b:skin>, lo haremos sin expandir artilugios:
#widebar-wrapper {
width:400px;
float:left;
border: 1px solid #ddd;
padding-bottom:10px;
margin-bottom:10px;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
}
#widebar {
width:400px;
padding:10px 0 5px 10px;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
}

[2] Yo le he puesto una medida cualquiera 400px para el ejemplo, pero cada uno deberá colocar en width la medida que necesite, pensando en que la widebar tendrá que ocupar el mismo espacio que ocupan las otras dos juntas, es decir, la suma de los width de cada sidebar.
Además tendremos que cambiar el float:left; por float:right; según la posición de nuestras sidebars: left = izquierda, right = derecha.
También le he añadido un borde, para que se vean mejor los cambios en "vista previa", así podemos ir modificando su anchura fácilmente, sin tener que guardar los cambios hasta el final. Si una vez terminada su instalación, no queremos mostrar la nueva widebar con borde, borraremos esta línea: border: 1px solid #ddd;
En margin-bottom:10px; controlaremos la distancia de la widebar a las dos sidebars, aumentando o disminuyendo el valor (10).

[3] Ahora es el momento de añadir el código HTML necesario para mostrar la widebar y que colocaremos justo sobre <div id="main wrapper">
<div id='widebar-wrapper'>
<b:section class='sidebar' id='widebar' preferred='yes'>
</b:section></div>

Usaremos la vista previa y, si todo ha ido bien, veremos el borde de la nueva widebar sobre las otras dos, es ahora cuando podremos ajustar el ancho para ajustarla a la medida adecuada:

Borde del widebar
Una vez conseguido, guardamos los cambios y ya podremos añadir lo que sea en el nuevo elemento:

Elemento widebar


Si vas a utilizar las imágenes de esta entrada, subelas antes a tu propio alojamiento. No hagas Hotlinking

Entradas Relacionadas:

169 comentarios:


Anónimo

Oye Rosa este tema es muy interesante y quisiera ponerlo en mi blog, pero un inconveniente, como le puedo agregar dos sidebar ya que mi tema es tic-tac

Anónimo

Rosa:

Interesante, interesante...pero yo solo tengo una sidebar en la plantilla mínima con algunas cosillas como: tres columnas en el footer.

Lo que quiero que me digas es como hacer para "guardar" las entradas más antiguas y solo dejar en la pantalla de inicio las últimas dos o tres que se han escrito...como tú lo tienes.

Quizás ya tengas esa explicación en archivo...si es así indicame bajo que título encontrarla.

Gracias de antemano,

Tu fan número 1.

Cale

Muchas gracias por el tutorial, Rosa! Siempre quise tener una barra horizontal por encima de las otras laterales y ahora lo pude hacer!!

Tu blog me es muy útil para los cambios constantes de mi blog.
Muchas gracias.
:)

Ivsflowing

Hola rosa, una consulta, puse el truco en mi blog y me dio como resultado algo inesperado, te dejo una imagen de como me quedo...

http://img.godlike.cl/images/ejemplget.jpg

quisiera saber como puedo solucionar este problema

de pasada gracias por existir
jaja

B-Pirata

Me sucede lo mismo que a Ivsflowing. Sin embargo en un blog de pruebas que tengo me funciona bien... no se a que se deberá...

Anónimo

Roger, eso ya no sería problema, ya que tu plantilla está tan modificada que casi no puede considerarse una Tic Tac...lo malo en las Tic Tacs es querer añadir la columna manteniendo sus imágenes de fondo, pero así, como está la tuya ya no es tan complicado.

Hecho un vistazo a esta entrada a ver si te orienta, sino, hablamos...

Añadir sidebar

Anónimo

Ligia, ve a tu panel - configuracion - Formato y ahí, nada más entrar, lo verás.
Fácil, fácil ;-):-L

Anónimo

Cale, y bien chulos que están tus blogs :D

Anónimo

Ivsflowing, verás, en la explicación yo doy por hecho (ya que es lo más normal) que cuando las dos columnas están en el blog, al mismo lado, en la plantilla sus códigos también están colocados seguidos, justo después de main-wrapper.
Lo hago así, porque sería imposible de preveer cada caso, así que tomo de ejemplo el más lógico...

Tu, por ejemplo, tienes colocado el código así: sidebar - main -sidebar, así que tendrás que colocar el código para la widebar, por encima de todo eso, es decir, justo antes de:
<div id='left-sidebar-wrapper'>

Anónimo

Kyubit, en tu caso no puedo ver de que se trata el problema exactamente, ya que no dejas la dire del blog donde lo has puesto, pero guíate por las explicaciones que le he dado a Ivsflowing, ya que supongo será algo parecido...

Unknown

Buen truco. Esa nueva barra suele venir muy bien para poner el objetivo del blog, una presentación del autor o publicidad de AdSense.

Felicidades de nuevo. Siempre traes material nuevo y fresquito.

Saludos.

Toni

Felicidades por el blog que ha sido de mucha ayuda, he navegado con algunos que se ofrecen en la red, pero el tuyo está muy bien explicado todo y es de facil navegación en el mismo, así que uno más que se moverá por aquí para ir aprendiendo un poco más sobre HTML y todo este mundo blogger.
Pues eso felicidades y saludos mil
Toni

Cale

Hola rosa, te comento algo que me pasó cuando instalé la barra, quizás pueda servirle a otro.

Después de colocarla encima de las dos sidebars me dí cuenta que al insertar un widget, este no respetaba la relación que tenían los otros con respecto a la barra. Esto es, no se encontraban alineados a la planilla.

Esto lo pude solucionar agregando a la sección CSS las mismas propiedades que tenían las sidebars pero adaptadas a la widebar. O sea, copié el código CSS que vos indicás y le agregué algunos mas, que eran iguales (o adaptados) a los que tenían las sidebars. Básicamente el problema era con las propiedades width y padding, que necesitaban ser adaptadas para cada uno de los widgets a insertar.

Comprendo que esto pudo haber sido necesario ya que estoy adaptando una plantilla diferente a las estándar, pero quizás el consejo le pueda servir a otra persona que tenga el mismo problema.

Saludos!

Anónimo

Gracias, Rosita.

Un abrazo.

Anónimo

Cale, claro, ya digo en la entrada que he puesto el width solo de orientación, de hecho,para eso está el borde que puse, para ir variando medidas y comprobar el resultado...

No obstante, muchas gracias por tu observación, siempre viene bien que los problemas que surjan queden registrados en los comentarios.
Estoy segura que servirán para ayudar a alguien. :-L

David Sardinero

Muchas gracias Rosa, que antes me equivoqué de post al poner el comentario. Como te decía, creo que es justo lo que te pedí en el email así que ahora mismo me pongo a probarlo, a ver qué tal queda. De nuevo gracias por todo. Un abrazo Rosa!

Anónimo

Meridianas gracias por tu ayuda en lo referente a la visualización de los Post con el navegador Firefox.
Saludos
Fali

www.elrincondefali.blogspot.com

Anónimo

Rosa:
la idea es tentadora...
tendría que alinear mis dos barras laterales para eso.

Anónimo

David Sardinero, exacto David, y si te queda bien ya podrás incluir las tabs.

Anónimo

Fali, no hacia falta...dos veces. ¡Gracias a ti!

Anónimo

Jorge, todo sería intentarlo ¿no?

Anónimo

Hola Rosa, te "copié" alguna cosilla...y esta vez no te pedí auxilio !!, jajaja. Besos astures

Anónimo

Se nos une un nuevo amigo a los Top Commenters:

Anonymous se hace llamar.

¡Qué raro! Antes no lo tomaba como top comentarista... ¿le pasará algo al script?

Abrazo.

P.D.: Sigo con la pica XDDD Pero esperaré...

Anónimo

Fernandooo1 , al script no le pasa nada...los anonimous esos :D no se pueden filtrar, lo que pasa que antes eran pocos pero ahora se han unido todos jajajja quieren hacerse notar.

Anónimo

Juuum!

XDDDDD

Bueno, bueno... así veo ¬¬

Igual no me ganarán ya verás :D

MªJose

Gracias nuevamente por tus aportes son de gran utilidad.
Un besico desde mi rincón mágico

Xioe

Hola tengo un problemita con mi blog y es q se ve debajo de cada ficha la opcion para editar q es como un destornillador y una llave cruzada y no se como quitarle eso. si me puedes ayudar te lo agradeceria muchisimo... gracias
mi correo es xmmch@hotmail.com y mi blog es xioeentretejeres.blogspot.com/ para q veas a q me refiero, saludos

Anónimo

Xioely, eso no es ningún problema, de hecho, todos tenemos esos iconos de herramientas, pero solo los vemos nosotros, es decir, en tu blog solo los ves tu, no las visitas, sirven para editar el blog desde ahí.
Mira en esta entrada

PedroX

Bueno despues de 3 dias sin internet, vuelvo a estar aqui:S:S:S

Esto siempre lo habia querido hacer yo, pero ANTES, cuando tenia 2 sidebars... ahora tengo una sola...

Mira Rosa, que recomiendas colocar en esa widebar, porque antes cuando yo la queria colocar, me preguntaba que quedaria bien alli, si un buscador, o los archivos o no se!!!

Anónimo

PedroX, ahí quedaría muy bien la nube de etiquetas.
Mucha gente pone también los anuncios de Adsense...cada uno... :-X

Jocarl

hola rosa esta datos me fue util y aclara mi duda sobre mi blog porque si recordaras tenia valores errones en relacion al tamaño de cada sidebar !!!

gracias
saludos

Anónimo

Hola Rosa, aplique el scrip y me salió bien colocandolo arriba, ahora quisiera saber como se coloca el widebar pero debajo de los dos sidebar, en que parte del scrip debo cambiar, espero me des una solucion, gracias. Te felicito por tu blog es exelente.

Anónimo

Hola Rosa, soy una nueva visitante de tu blog, la verdad me gusto mucho el tip pero tengo el mismo problema de la otra persona, una de las columnas me queda mas arriba que la otra, ayudame porfa, me vuelvo loco, no puedo mas :(

Anónimo

Roberano, sigues los mismos pasos pero llamando a la nueva widebar, por ejemplo, widebar2 y el código html que se coloca para la primera antes del main, para esta nueva tendrás que colocarlo, después de todos los demás (los del min,las otras sidebars y el widewbar)

Anónimo

Daiana, no tienes el perfil habilitado y tampoco puedo ver el blog, así que difícilmente puedo saber a que se debe tu problema...

No obstante, guiate por los otros comentarios, estoy casi segura que es algo relacionado con las medidas.

El cavernario

Hola Rosa, nuevamente yo, Daiana, estoy intentado de todo, poner en lugares diferentes, el 2do, pedazo de codigo y nada, estaba buscando el codigo que le diste a la otra persona con el mismo problema que yo y no lo encontre, como le hago?
Gracias y muchos saludos !!

Anónimo

Daina, no ledi ningún código concreto, ya te digo que depende de las medidas, tendrás que encontrar la tuya ideal, probando a cambiar el ancho de la widebar, de la sidebars, de una sola...en fin, se trata de las medidas casi seguro.

Eulalia

Hola Rosa:
He colocado este truco en un blog, plantilla son of moto, y ha quedado super guay.
Una idea de para que puede servir: para colocar presentaciones de imágenes, que en la sidebar suelen salir cortadas.
Si quieres, (si alguien quiere) ver como ha quedado, solo has de pinchar aquí. Besos.

Anónimo

Eulalia, ha quedado genial ;-)

Anónimo

Hola Rosa!
De momento no tengo el blog terminado pero en cuanto lo termine te lo muestro. He añadido la widebar en la cual he escrito un pequeño texto. El problema es que no se ajusta al texto (queda una separación) sino que para que quede bien tengo que regular el height (en mi caso a 150px para que quede a la altura de la última frase). ¿Existe alguna manera para que la altura se ajuste a lo que escriba sin tener que regularlo cada vez que cambie de texto?
Muchísimas gracias!!

El blog de David

Anónimo

David, es que sin verlo tampoco me hago una idea concreta de lo que me explicas...depende de como hayas añadido el texto, si en un elemento "Texto" o si lleva algún código más...o del padding...que se yo, pueden ser tantas cosas...

jordi

HOLA ROSA ESTOY INTENTANDO HACER UN BLOG Y HE VISTO UNO CON UNA COLUMNA A LA IZQUIERDA Y OTRA A LA DERECHA MAS LA CENTRAL (JESY.2474BLOGSPOT.COM) Y ME HAN COMENTADO TU BLOG PARA HABER SI ME PUEDES AYUDAR (SOY MUY NOVATO) GRACIAS DE ANTEMANO Y PERDONA LAS MOLESTIAS OCASIONADAS

jordi

PERDONA TE DI MAL LADIRECCION DEL BLOG JESY2474.BLOGSPOT.COM

Anónimo

Jordi, si, conozco el blog que dices.

Veo que en los tuyos estás usando las plantillas Mínima ¡buena elección! por no decir la mejor :D

Es la plantilla más configurable y fácil de personalizar, de hecho, casi todos mis trucos toman como referencia el código de la Mínima y es la que uso yo en todos mis blogs.

Bien, mira en esta entrada:
http://elescaparatederosa.blogspot.com/2007/06/aadir-una-sidebar.html

No creo que se te complique demasiado, pero cualquier cosa ya sabes donde estoy.

jordi

SOY JORDI MI CORREO ELECTRONICO ES JORDI.ARRUFAT@HOTMAIL.COM

jordi

MUCHAS GRACIAS

jordi

No he sabido hacerlo, sería mucho pedirte si te añado como usuaria para escribir en mi blog Y ME LO HACES TU, si es mucho pedir por mi parte te pido disculpas.
sería el mejor regalo de cumpleaños Hoy cumplo 54 (es verdad) gracias

Anónimo

Jordi, con el permiso de escritura no me sirve, tendrías que darme el permiso de escritura y una vez que yo acepte, ahí mismo darme poderes de administrador sino no podré tocar la plantilla...

Por cierto ¡Muchas felicidades! :D

jordi

No hay problema, con lo de administradora Y GRACIAS POR TU AYUDA, voy a CONFIGURACION/PERMISOS/AÑADIR AUTORES y ........que pongo

jordi

hola soy jordi (arrufat)el que no tengo nni idea de hacer un blog, he visto que hay otro jordi y no queria que pensases que somos el mismo, cuando te vaya bien me dices lo que tengo que hacer añadirte como administradora? no hay problema hare todo lo que me digas y ya me diras como (creo que añaiendo tu e-mail.
un sludo

Anónimo

Jordi, tranquilo, que yo siempre miro en el perfil y así se con quien estoy hablando :D

Añades mi email y me llegará una invitación a mi correo, una vez yo acepte ya podré publicar, cuando veas que ya estoy añadida, vuelves ahí, a permisos y me das permiso como administrador, entonces me avisas y yo iré a ponerte la sidebar o lo que necesites.

Jaaziel

Mil gracias por tu blog y tus consejos.
Yo estoy en el paso previo, me gusta mucho "minima" de blogger, y quiero tener 2 sidebars, es decir tres columnas.
¿Has hecho un tutorial de eso o sabes como podría hacerlo?
Un saludo

Anónimo

Jaaziel, mira aquí:

http://elescaparatederosa.blogspot.com/2007/06/aadir-una-sidebar.html

Jaaziel

Muchisimas gracias Rosa,
no me exraña lo de las nubecitas, eres el "angel" de los blogs ;)

Anónimo

precisamente lo que estaba buscando con desesperacion.. muchas gracias...

DoN CeSaR

Saludos Rosa, no se si habras recibido mi comment anteriormente, pero no he podido poner mi widebar :(

Anónimo

DoN CeSaR, aunque ya la has retirado, he podido verla prueba de tu widebar antes y salia sobre la cabecera...eso es que no la has colocado (el código del paso 3) en el lugar correcto, como digo en la entrada ha de ir mas abajo justo sobre el código de las entradas.

DoN CeSaR

Porque sera que algunos comentarios mios como que se autoaprueban y otros no :/ , espero que hayas leido mi ultimo comentario

Anónimo

DoN CeSaR, no se a cual te refieres...el último que he leído tuyo lo he contestado...

carlos

Tentei fazer esta alteração no meu blog, mais diz que o comando não é encontrado sera que tem um nome diferente ?
Me da uma ajuda por favor.
Carlos

Anónimo

carlos , no hay enlace a tu blog.

CG-Araruama

Esta ainda em contrução - http://amararuama.blogspot.com/
Te aguardo, abraços
Carlos

Anónimo

CG-Araruama , el comando está en tu plantilla, pero tienes que buscar con "la plantilla de artilugios expandidos".

CG-Araruama

Perdoa-me amiga consegui, mais quando visualiso o menu fica todo contorcido, pode ajuar-me quanto a isto.
Carlos

DEPORTE 809

Hello rosa como esta espero k bien y k Dios te multiblique toda tu ayuda.
siempre ando por aki y esta primeraves k te pido ayuda y es qu ecuado trato aser lo de colocar el widebar a mi pagina el sidebar de la derecha no baja,para k entienda mejor lo k te digo te dejo mi pagina de ayuda
http://ayuda809.blogspot.com/
espero tu respuesta y otra ves gracia y k dios te vendiga

Anónimo

DEPORTE 809, tienes que colocar el código de la primera sidebar:
<div id='side-wrapper1'>
<b:section class='sidebar' id='sidebar1' preferred='yes'>
<b:widget id='Label1' locked='false' title='Labels' type='Label'/>
</b:section>
</div>

Justo encima de la segunda:
<div id='side-wrapper2'>
<b:section class='sidebar' id='sidebar2' preferred='yes'>
<b:widget id='Profile1' locked='false' title='About' type='Profile'/>
<b:widget id='Feed2' locked='false' title='Recent Posts' type='Feed'/>
</b:section>
</div>

Supongo que le cambiaste el float a las sidebars...es un error muy común el pensar que solo con eso basta...de hecho así es, pero el error se pone de manifiesto al intentar añadir algo como la widebar por ejemplo.

DEPORTE 809

Rosa trate todo lo k me dijiste pero todabia,no sale bien.si yo te pidiera el favor k lo isiera por mi tu gree k estaria disponible para aserme el favor.

Anónimo

DEPORTE, has eliminado el blog :O

DEPORTE 809

Rosa,borre el de ayuda,pero mi blog es deportes809.com.y tu gree k podria ayudarme

DEPORTE 809

Rosa que dice grees k me puede ayudar

Anónimo

DEPORTE, si quieres que lo intente envía los datos de acceso a tu blog a mi email, no se te ocurra ponerlos aquí ¿ok?

DEPORTE 809

Rosa te envie una invitacion a la pagina,me deja saber cuando lo resiva para ponerte como admitradora y mucha gracia por aceptar ayudarme.

DEPORTE 809

Rosa anda ahi hoy

Anónimo

DEPORTE, ya he aceptado;)

DEPORTE 809

Rosa ya di los privilegio

DEPORTE 809

Rosa un millon de gracias

Anónimo

DEPORTE, creo que ya está:D
Se ve bien en Firefox e IE (última versiones).
He incluido una imagen y el título de prueba, creo que todo ha ido bien.

DEPORTE 809

Rosa mucha gracia

Angel M.

Rosa, por favor ayudame, quiero que mi blog tenga tres columnas y no soy capaz, he seguido tus instrucciones y al final siempre me dice lo mismo, que mi plantilla no está bien, y ya no se como hacer.
Gracias
Texto enlace

Anónimo

Angel, esta entrada no explica como añadir una nueva sidebar,sino una widewar para blogs que ya tienen tres columnas...

Deberás seguir estás instrucciones:
http://elescaparatederosa.blogspot.com/2007/06/aadir-una-sidebar.html

Antonieta H.

rosa...sabes? no me aparece por ningún lado el código que dices en el paso 3 que plantilla más extraña tengo por lo que veo :(

Anónimo

Bluesoul, creo que has entendido mal...
Lo que tienes que buscar en el paso 3 (y que si está) es esto:
<div id="main wrapper">

Y encima de eso colocas el código que está dentro del rectangulito en el paso 3.

Antonieta H.

si rosa eso es lo que te decía que yo no encontraba por ningún lado de la plantilla...yo uso con mozilla ctrl + f para buscar :S ¿tu viste en el código de mi plantilla que aparecía?¿que otra cosa esta cerca de eso ? para mas o menos tener idea ...saludos rosa...

Anónimo

Bluesoul, cerca está el <div id='content-wrapper'> y en esa misma zona el <div id='crosscol-wrapper' style='text-align:left'>

Antonieta H.

buscando eso que me dices si me aparece pero hago todo como dices y al darle vista previa me sale que la plantilla no esta bien formada y lo estoy haciendo sin expandir artilugios...creo que voy a olvidarme de esto mejor :( gracias de todas maneras por decirme donde estaba el código :P

Antonieta H.

hola soy yo jajaja lo volví a intentar lo hace pero lo agrega abajo de la cabecera y si lo muevo a la sidebar no queda como aparece en tu entrada...seguiré intentando :P

Antonieta H.

ahora si pude rosa :) estaba haciendo una animalada :O gracias y disculpa tanto fastidio jajaj

Antonieta H.

hola rosa... esto también se puede aplicar como se ve aca ? osea que venga una horizontal y las otras dos divididas y luego la otra abajo horizontal? no se si me explico

Anónimo

Bluesoul, si, los pasos serían los mismos pero habría que cambiar el id (nombre) en el css para esa nueva columna, por ejemplo, widebar2.

En el html lo mismo, pero con id=widebar2

Luego para que se vea debajo, el código iría colocado al final del código de las otras dos sidebars.

Fer

Hola Rosa, es la primera vez que escribo aqu'i, y la verdad me has sido de gran ayuda en otros truquitos.

El caso es que al poner todo lo que comentas, me aparece el cuadro encima de la entrada y no se que hacer.

Te dejo mi blog para que veas.
Texto enlace

Anónimo

Fer, prueba a colocar el código a continuación del siguiente </div> que hay después de <div id="main wrapper">

Fer

Este es el tercer intento de poner el comentario, las otras veces desaparece.

Primero gracias por contestar tan pronto a mi pregunta y luego decirte que he probado donde me has dicho y seguia igual, al final lo he puesto encima de b:section class='sidebar' id='sidebar' preferred='yes' pero ahora se monta una de las sidebar con la widebar.

mi blog

Gracias.

Anónimo

Hola Rosa, quería poner en mi blog algo así.. pero, el problema es que ya tiene ese elemento. Me explico, lo primero que hay en la columna es una sidebar como la que se coloca en esta entrada. Después de eso hay tabber... y después se dividen en dos columnas. Yo quería colocarle por encima de las dos columnas, una que ocupe el espacio de ambas (como en esta entrada) pero al ya tener más elementos así... me pierdo, jeje

No se si me he explicado bien, creo que no :(
Si puedes hecharle un vistazo...

Anónimo

Uve, ¿para qué exactamente quieres hacer esto? Supongo que en la que hay puedes añadir gadgets sin problemas...te lo digo porque sería lo mismo que ya tienes y me parece una tontería añadir más, a no ser que tengas una idea determinada para esa nueva widebar...

Anónimo

Solamente es para que la widebar que tiene diferentes pestañas no se vaya bajando al colocar más gadgets en la widebar que está justo encima....

Anónimo

Fer, has incluido el código dentro de la sección y ha de ir fuera.

Colocalo un poco más arriba (es que no puedo verlo tal cual desde el código fuente) pero tendría que ser sobre la línea anterior de la que has usado para colocarlo...
Si no, tendrás que enviarme la plantilla para poder verlo insitu.

Anónimo

Uve, por eso te comenté lo anterior...Esto sería una nueva sección para colocar gadgets, con lo que el resultado será el mismo, o sea, cuando pongas ahí algo, la otra sidebar también se bajará...

Anónimo

Gracias por las molestias Rosa.
Quería ponerlo debajo del widebar con pestañas, pero si va a quedar encima, como que no jejjejee...

Anónimo

Uve, ah, ahora si :D eso ya es otra cosa.

Puedes seguir las instrucciones de esta entrada, pero en el último paso para colocar el código, lo que localizarías como referencia (sin expandir artilugios) sería:
<div class='tabbertab'>

Y lo colocarías localizando desde esa línea hacia abajo esto:
<div class='clear'></div>

Justo antes de eso tendrías que pegar el código.

IURISCIVILIS

Hola. Tengo instalada la plantilla revolution para blogger. En el blog de pruebas he instalado la widebar, siguiendo tus consejos, y funciona todo correctamente, salvo que la misma se posiciona encima de las dos sidebars sin llegar a alinearse con la sidebar izquierda.

Creo que se debe a un problema con el padding y el margin, pero no he conseguido centrarla. te dejo la dirección del blog por si fueras tan ambable de ofrecerme una solución. un cordial saludo.

http://pruebaiuris.blogspot.com/

Anónimo

Hola, Rosa.

Ups, algo pasó con el comentario que te acabo de enviar... bueno, te explico de nuevo.

Verás, estoy intentando aplicar este truco en una Mínima con dos columnas a la izquierda, pero me sale todo "descabalao", he intentado cambiar las alineaciones en el CSS, poner el código HTML arriba y abajo, pero no hay forma.

¿Te importaría echarle un vistazo a ver qué puede ser? Si entras en mi perfil, es el blog de cuentos, que lo estoy empleando para hacer pruebas.

Pero sin prisas, ¿eh?, que nos conocemos. ;)

Muchas gracias y un abrazo.

Anónimo

Max Birrax El problema creo que es porque doy por hecho que el main estará colocado antes de las sidebars en el html, ya que yo lo hago así para que al cargarse el blog la zona de entradas se cargue antes...
En tu caso has colocado antes las sidebar, así que tendrás que colocar el código para la widebar sobre esta línea:
<div id='left-sidebar-wrapper'>

Creo que es eso, desde aquí viendo el código online es la impresión que me da...

Anónimo

Hola, Rosa.

Bueno, pues... ¡funcionó! :D Te explico lo que he hecho por si fuera de ayuda para algún otro lector tuyo.

En el código CSS:

· Cambiar el parámetro float de #sidebar-wrapper y de #left-sidebar-wrapper a float: $startSide;

· Cambiar el parámetro float de #main-wrapper a float: $endSide;

En el HTML, mover todo el código correspondiente a div id='sidebar-wrapper' y div id='left-sidebar-wrapper' después del correspondiente a div id='main-wrapper'.

Con esto he conseguido seguir el orden que tú indicabas.

Y ya está todo hecho, ahora sólo queda aplicar el código que muestras tal cual lo indicas, y voilá, ya está funcionando. :D

Querida amiga, muchas gracias una vez más por tu ayuda y por tu paciencia. Recibe un cordial saludo,

Max.

P.D.: Si a alquien se le ocurre aplicar lo que acabo de explicar, digo lo mismo que Rosa, primero a copiar la plantilla y después a trastear, y si puede ser en un blog de pruebas mejor.

P.D2.: Rosa, ¿te he dicho que eres la primera en saber el próximo diseño de mi peich? ;)

Anónimo

Max Birrax Has reestructurado todo...pero así está mejor. Una vez el blog esté funcionando irá mejor así a la hora de cargarse.

Me imaginaba que era sino la primera, una de los pocos je,je.
Está quedando muy muy chulo ;)

Bocha

Rosa coloque todo y segui todos los pasos. Pero me aparece en otro lado, que estoy haciendo mal??

Saludos.

Fijate en el blog: www.abran-cancha-borrador.blogspot.com

Anónimo

Bocha Mira en comentarios anteriores, sobre todo en mi conversación con Max Birrax, creo que tu problema es el mismo...

Bocha

Trate y no me deja, tenes idea de que esta mal??

Anónimo

Bocha Donde lo has colocado está mal, tendrás que quitarlo de ahí.
De todos modos, no podrás colocarlo si antes no reestructuras todo el diseño del blog, tal como hizo Max Birrax...cosa bastante complicada si no controlas bien la estructura del blog.
Mis explicaciones están hechas para una estructura correcta de las sidebar, y las tuyas no están colocadas para poder usar la widebar, sin antes hacer bastantes cambios en el código de la plantilla...

De todos modos en la entrada digo que hay que colocar el código ENCIMA de <div id="main wrapper"> y tu lo has hecho debajo.

TROY

ROSITA:

Saludos desde Puebla México. Tengo la plantilla mínima modificada a 4 columnas. Quiero colocar la Widebar en las columnas centrales, pero me queda desalineada y no he encontrado la manera de que quede bien.

¿Me ayudas por favor?

El blog es este:
http://texmelucanblog.blogspot.com/

y el de pruebas es este (ahi se ve como queda)

http://pruebastex.blogspot.com/

Ojalá que pueda contar contigo, de verdad que me urge solucionarlo. MUCHAS GRACIAS!

Troy

Anónimo

TROY Intenta colocando el código del paso [3] sobre:

<div id='left-coloum'>

Smocker

Rosa no tengo forma de colocar la widebar igual que la imagen. Se descuadra todo el blog. Ya he probado a poner el codigo en todos sitios, encima de main, sidebar, content,newsidebar,... pero creo que el problema esta en algo que hay en la plantilla que no encaja bien. ¿Habría alguna forma de que pudieras ver el código de mi blog, para echarle un vistazo? Te estaría muy agradecido. Esta es la dirección del blog http://pafliparlo.blogspot.com/Gracias de antemano.

Anónimo

Smocker Pues debería de resultar si lo colocas sobre esto, o eso creo...
<div id='newsidebar-wrapper'>

TexmelucanBlog

ROSITA:

Pues no... en mi blog de pruebas ocurre que se vuelca todo encima del area donde está la primera columna. Se descuadra todo...

He estado intentando colocar ese código en diversos lugares dentro de la plantilla y siempre ocurre un desastre...

Estoy considerando si regreso mejor a la plantilla mínima con 3 columnas, donde la MAIN esté a la izquierda y las otras dos a la derecha para que así no haya problema de colocar la widebar... Ocurre que esa widebar tiene una importancia vital para mi proyecto pues ahí precisamente le voy a colocar video o streamingtv en vivo...

Estoy tratando de dar servicio a toda una ciudad...

Por cierto, Rosita, soy el mismo Troy que te escribía antes desde Chile. Hace tiempo me vine a México y estoy en esto. Gracias como siempre por tu valiosísima ayuda.

Anónimo

TRoy Tal vez haya que hacer algún cambio más que no veo...
Envíame la plantilla por mail, por favor.

Smocker

Hola que tal Rosa, ¿Viste algo en la plantilla de Troy?

Anónimo

Smoker Troy tarda bastante entre un comentario y otro...no me ha enviado aún la plantilla.

Enviame la tuya si te parece y te la miro ¿vale?

LRPB

Hola tengo un blog con tres columnas a la derecha.
http://baetulo.blogspot.com
la primera columna es ancha
las dos de abajo son la mitad logicamente
lo que deseo hacer es poner debajo de estas dos columna una columna igual de ancha que la primera. Es decir una cuarta debadjo de las dos columnas medias.
Lo he intentado varias veces y no he dado con el truco.
Puedes asesorarme.
Un monton de gracias por tu blog. me ha servido de mucha ayuda al solucionar los multiples problemillas que se van planteando si quieres arreglarla un poquito a tu gusto.
Saluldos

LRPB

A la tercera va la vencida:

Enlace a mi blog

Saludos

Anónimo

LRPB Es bastante complicado explicarlo en un comentario, pero vamos a intentarlo...al menos te servirá de orientación, espero.

Sitúate en el código de tu plantilla sin expandir artilugios.

Tendrás que colocar en el CSS (antes de ]]></b:skin>) si es en la zona del CSS de las otras sidebar mejor, esto:

#newmidsidebar-wrapper {
width: 320px;
float: right;
overflow: hidden;
}

Luego en el html localizas esto (o muy parecido):

<div class='rsidebar section' id='rsidebar'>
<div class='rsidebar section' id='rsidebar' preferred='yes'>
</b:section>
</div>

Y debajo pegas este código:
<div id='newmidsidebar-wrapper'>
<div class='newsidebar section' id='newsidebar' preferred='yes'>
</b:section>
</div>

Guardas los cambios y miras en Diseño.
Si no ves el nuevo espacio es que algo no ha ido bien (lo hago un poco a ojo ya que no puedo ver todo el código de tu plantilla), si es así,retira los códigos que has añadido.

Si ha ido bien, tendrás que localizar esto en el CSS:
.sidebar h2, .rsidebar h2, .lsidebar h2 {

Y añadir algo para la nueva sidebar, así:
.sidebar h2, .rsidebar h2, .lsidebar h2, .newmidsidebar {

Haces lo mismo en esta línea:
.sidebar ul, .rsidebar ul, .lsidebar ul {

Y en esta otra:
.sidebar ul li, .rsidebar ul li, .lsidebar ul li {

Manuel Alberto

Hola Rosa, espero que hayas tenido unas bonitas minivaciones...:P.
Voy a mi problema. Intenté colocar la widebar siguiendo todos los pasos. Como en mi caso tengo en la plantilla el div id=newsidebar antes del main, coloqué antes de esta el código de la widebar. Lei el comentario de birrax y controlé lo que correspondía. Pero la wide no se alinea con las dos columnas de sidebar. En esta imagen se ve el resultado. Puedes darme una mano?

Manuel Alberto

minivaciones = neologismo sobre minivacaciones...:$...jajjaj

Manuel Alberto

Lo solucioné Rosa. Leyendo con detenimiento el comentario de Birrax 103, cambié el orden de las columnas en el html.
Inicialmente el orden era:
newsidebar-main wrapper-sidebar.
Moví el código de la main wrapper de tal forma que quedó ordenado así:
main wrapper-newsidebar-sidebar.
Lo explico para quien tenga un problema similar, intente resolverlo así.
Besos y abrazos de oso, Rosa :)

Anónimo

Manfenix Bien por ti! Bien por leer los comentarios anteriores y bien por explicarlo para ayudar a otros!

Gracias! :D

Manuel Alberto

Hola Rosa. Puedes darte una vuelta por mi blog, Avibert?
No logro acercar el menú a la cabecera ni la widebar a las sidebar inferiores.
Saludos. :)

Anónimo

Manfenix Para subir las sidebar, añade en #sidebar-wrapper { y en #newsidebar-wrapper {
una línea como esta:

padding-top: 10px;

Para acercar el menú al header, coloca en el CSS este código:

#crosscol-wrapper {
margin: 0 auto;
padding: 0px;
}

Ya me contarás si resulta bien...

Manuel Alberto

Coloqué los códigos tal cual me lo indicas. Pero no sucedió nada. En IE, el menú se vé pegado al header, pero esto ya estaba así antes de aplicar estos códigos. Qué será??? :S

Manuel Alberto

También limpié la caché, reincié la pc, por las dudas, pero no se movieron ni un ápice.

Anónimo

Manfenix ¿Estás seguro que has colocado el código en el lugar correcto o de forma correcta? Tendría que haberse notado el cambio :S

zux

hola

esto probando esta barra horizontal, en mi blog de prueba, y tengo un solo problema para llevarlo a mi blog oficial, y es...

COMO hago para lo que agrego me quede centrado, por si vez en mi blog de prueba, las cosas quedan cargadas a la izquerda, y a mi me gustaria que quedara centrado, que hago para centrar

aca el blog de prueba http://paoblogp.blogspot.com

y una pregunta relacionada tu sabes como crear este tipo de presentaciones (imagenes rotativas con un titulo en la base de cada imagen), mira como esta en esta pagina

http://www.zomicz.com


esta esperando una respuesta

chao

Manuel Alberto

Así he colocado los códigos:

Para acercar las sidebar a la widebar:

Imagen1

Para acercar el menú al header:

Imagen2.

Donde podrá estar el error? :S

Anónimo

Zux Para centrar lo que coloques en su interior, añade en #widebar { una línea nueva como esta: text-align: center;

En cuanto a la presentación, saber hacerlas se, pero no he publicado nada sobre presentaciones de ese estilo y en un comentario es imposible de explicar... en Vagabundia (enlace en mi sidebar) encontrarás varios ejemplos de ese estilo.

zux

VALE MUCHAS GRACIAS!!! ;)
me funciono!!!!!!!

y lo relacionado a las presentaciones de las imágenes, tienen un nombre especial??? para buscarlo

Anónimo

Zux Pues no se ahora mismo... pero no creo que te cueste demasiado encontrarlas, y si no deja allí un comentario.

Anónimo

Manfenix Todo está correcto... y tendría que funcionar, o al menos notarse un cierto "movimiento", ni idea de porque no es así :S

Manuel Alberto

Rosa, pude solucionar ambos problemas gracias a la ayuda de JMiur. El menú tenía un margen por defecto que lo quité. Y las dos sidebar tenían un padding-top, que también los eliminé. Ahora se vé bien el menú y la separación de la widebar respecto de las sidebars. Entre tú y JMiur, tengo dos asesores de lujo...;).
Besos y hasta pronto...

Anónimo

Manfenix Lo siento, no se me ocurrió revisar si ya había algún padding aplicado ahí :$
Mil perdones y me alegro que ya esté todo OK.
Jmiur es el mejor :D

Manuel Alberto

No hay nada que perdonar Rosa. Saludos :)

Celeste

Genial! Sos una genia. Segui tus pasos para agregar una sidebar y luego estos para agregar la widebar. El único problema que tuve es que copiaba el código antes de "main-wrapper" hasta que me di cuenta de que tenía que copiarlo después. Justo antes de las dos sidebar. Y listo!

Gracias Rosa!!

Un Perro

De Nuevo yo Rosa :S
Bueno, que en esto de "toquetear" la plantilla se me ha ocurrido viendo otros blogs, el darle a los títulos de la widebar un background, tal cual como has redactado en el "truco" para imagen de fondo en los titulos de las entradas.
El tema es que como siempre, me esta faltando una llamada, un código que enmarque como es debido dicha imagen de fondo en los títulos de la widebar...logro insertar la imagen y verla utilizando la misma llamada {background url (url.imagen)repeat x etc.
pero el titulo sale por encima de esta imagen, la misma, "pisa" el cuerpo de la widebar.
Ando medio enredado para explicarlo, espero me puedas entender
Te dejo el BLOG por si quieres ver o entender mejor a que me refiero.

Gracias de antemano Rosa :)

Anónimo

Un perro La imagen para el título no ha de ir donde la has colocado... recuerda que los títulos de la sidebar en tu plantilla están marcados en h2 y la widebar conserva las mismas propiedades que las sidebar, así que tendrás que añadir la imagen más o menos así:

#widebar h2{
background: (url delaimagen);
}

Un Perro

Ah vamos de nuevo Rosa :S.
Aun no lo consigo :S
otra cosa que se perfila como "peleadora" para el Perro

Un Perro

Dalo por concluido Rosa !!
no se como hice, me arme de paciencia y empeño y trastocando códigos llegue a lo que quería...
(elimine las widebar pues les daba el mismo uso que una sidebar ancha y fue todo mas fácil)

Un beso grande y que estes bien :)

Anónimo

Un perro Ah la paciencia, la madre de todas las ciencias ja,ja. :D

Unknown

ay ladrona! yo estaba buscando como loca mas de 1 hora en tu blog una cosa, y tu la tienes en el sidebar. :(

Yo quiero expandir widget del sidebar haciendo click en el titulo. Como tienes tu las etiquetas o el archivo del blog, para yo colocar diferentes cosas que no quiero que ocupen tanto espacio: Directorios, listados de links, etc...

Cuando puedas me dices, que ando como loca con eso. :P

Mas besazos!

Anónimo

MALINA Para eso yo uso Scriptaculous... mira aquí:
http://elescaparatederosa.blogspot.com/2009/05/expandir-y-contraer-gadget-con.html

Unknown

perfecto Rosa, lo implanté a la primer

Volcanchess

Hola Rosa, Muchas gracias por tu valioso aporte.

MI problema es el siguiente.
www.volcanchess.com (es de Ajedrez)
Hay mucho espacio entre el Widebar (qué incluí gracias a ti) y las sidebar que tengo (ya probé con ponerle bajo padding y margin)MUCHAS gracias por tu respuesta. ¿Qué me sugieres?

Anónimo

Volcanchess En esta parte del CSS:

margin-bottom:10px;

Cambia 10 por 0 y si es necesario, en esta otra línea haces lo mismo:
padding-bottom:10px;

Jair Octavio

Hola Rosita, nuevamente yo, bueno lo que pasa es que necesitaba una widebar en mi blog del MENU y pues que fuera abajo de las dos sidebars y tomando en cuenta esta entrada lo pude lograr al leer tu comentario 32 de aqui, asi que ahi pondre el gadget de ultimos comentarios para que se mire a lo largo y se vean mejor.

Tambien para pasarte el link de tu imagen que se le da agregar al blog y pues me tome la libertad de editarla para que se mire mas presentable:
http://img441.imageshack.us/img441/1998/escaparatederosa.png.

Asi al estilo de mis diseños, solo es para agradecerte mil por todo eso, salu2...

Rosa

© ۞Jair Octavio۞ Muchas gracias!!! Está muy linda, el problema es que mide como 150px y todos piden de 125px :S

Walter

Rosita como hago para darle más espacio a mi widebar de las 2 columnas del sidebar pleaseeee

Walter

gracias rosita, leyendo uno de los comentarios ya solucione el problema

Vicky

Hola Rosa: Quiero poner una widebar pero en lugar de crearla encima de las 2 columnas quiero que vaya debajo de éstas. ¿Habría forma de hacerlo?

Gracias de antemano

Vicky

Añado que lo he intentado de múltiples formas y no he podido. He leído todos los comentarios de este post referentes a la misma cuestión pero soy incapaz. PD: De hecho tampoco he sido capaz de colocar la widebar encima de las 2 sidebars ya existentes. Coloco los códigos donde pones pero una vez que guardo la plantilla la widebar no aparede por ningún sitio, es como si no hubiera hecho nada. Hasta ahora con paciencia he ido modificando muchas cosas del blog gracias a tus consejos y todo tarde o temprano me ha ido saliendo, pero en esto me veo incapaz, creo que lo voy a dejar por imposible :(

Anónimo

Victoria A punto P punto Para colocarla debajo habría que cambiar la posición del código al colocarlo, pero debajo no es buena idea, ya que cada sidebar tomará una altura dependiendo de su contenido y la estética del blog no sería demasiado "amaigable"... en cuanto a lo de no poder hacerlo... se te complicará entonces lo mismo arriba que abajo...

Vicky

Entonces, lo dejo por imposible no? Desisto de colocar la sidebar...

Anónimo

Victoria A punto P punto Eso tienes que decidirlo tu... yo lo más que puedo hacer sería echarle un vistazo al tema una vez colocado para poder saber que anda mal...

Vicky

Bueno, mirando por ahí otro blog de ayuda ya he conseguido dar con ello, más o menos lo que quería. He conseguido colocar la widebar debajo de las columnas, lo único que no he conseguido hacer coincidir los bordes al 100% con los de las sidebar, pero creo que está pasable. Lo que sí me falla es el formato del texto. He comprobado que no es el mismo que el de las sidebar, ni en el título ni en el contenido. E

Anónimo

Victoria A punto P punto Eso se logra con CSS, claro que depende del código (los ids) de la widewar que añadiste... supongo allí de donde lo sacaste te lo den... en mi caso sería por ejemplo añadir en esta parte: #widebar { los mismos parámetros de texto y demás que tenemos en la sidebar, y para el título algo como #widebar h2{ y ahí incluir lo mismo que en el CSS de la sidebar... claro que lo mejor será que preguntes donde obtuviste el código...

Vicky

Bueno, de momento creo que lo dejaré como está. Gracias por los consejos!!!

Vicky

Hola, que tal? Acudo de nuevo a ti en busca de ayuda.

Te pido ayuda con este problema que tengo con el blog:

He colocado 2 widebar (como te dije no he podido poner las de este ejemplo, ya que como te dije lo intenté y la widebar no salía por ninguna parte), una superior y otra inferior. El problemas es que en determinados momentos las 2 sidebar se me descolocan poniendose a la izquierda de la plantilla. He comprobado que solo pasa cuando coloco la widebar superior, con la inferior no hay problema. También he comprobado que no pasa siempre, solo cuando voy navegando por medio de los iconos de navegación de la parte inferior y llego a un punto donde no hay más entradas disponibles.

No se si me explico. Es en el blog "Aquella Maravillosa Infancia", te pongo la dirección web (espero que no haya problemas por ello y si los hay te pido disculpas por adelantado):

http://www.aquellamaravillosainfancia.com/search/label/M%C3%BAsica%20del%20ayer?updated-max=2009-04-17T12%3A28%3A00%2B02%3A00&max-results=20

En el ejemplo, accedo a través de "categorías" "música del ayer", también he comprobado que pasa al llegar al final de la categoría "muñecas" (supongo que pasará con todas igual al llegar al final)...

He tocado varios parámetros para comprobar los resultados pero no he sido capaz de encontrar la solución.

¿Qué está fallando en las sidebar? ¿Podrías ayudarme a arreglarlo?

Gracias de antemano.

PD: He buscado ayuda en el mismo blog de donde saqué los códigos de la widebar pero hasta el momento no he tenido respuesta.

Anónimo

VictoriaMete el código HTML de cada una de las widebars, es decir, desde:
<div id='middleads-wrapper'> hasta su </div> de cierre dentro de otro div, algo así:

<div id='Wide-middle'>
Aqui el código de la widebar
</div>

Y luego en el CSS (antes de ]]></b:skin>) coloca algo así:

#Wide-middle{
float: right;
width:100%;
}

Vicky

Hola, gracias por la respuesta. He intentado colocar los códigos que dices, pero no se si lo estoy haciendo mal porque sigue pasando exactamente lo mismo, las sidebar se van a la parte izquierda a continuación del espacio reservado para las entradas :(

Rosa

VictoriaPues nada más se puede hacer que eso que te indico que yo sepa, incluir el código en un nuevo div y añadir el CSS para controlarlo...

zux

hola :)

tengo un problema:(

el cuadro de la widerbar no se muestra en el panel de control :( :(

me puedes ayudar?

gracias

el blog es www.zonazux.com

Anónimo

Zux Toda la ayuda que puedo darte es la que está en la entrada... antes de publicarla siempre compruebo funciona...

zux

:(( :(

que mal, es lamentable por q en el blog aparece el recuadro, sin embargo, no aparece el bloque para editarlo en el escritorio de blogger

no sabes en que me puedo estar equivocando??

Anónimo

Zux Pues no... ¿no estás usando una plantilla del nuevo diseñador...? si es así, eso puede hacerse desde el diseñador...

zux

hola

descubir que creando un bloque y colocandolo en otro lugar aparece en la posición de la widerbar :)

pd: estoy utilizando la versión antigua

Publicar un comentario

Si vas a dejar una consulta, procura tener habilitado tu perfil en Blogger o deja la url del blog a revisar (no enlace).

Los comentarios están siendo moderados.

:) :(( :( :P :D :$ ;) :I :X :O |O :S