AVISO IMPORTANTE

Si quieres un menú como este de los botones, pincha en el que tiene un interrogante. Te llevará a la página de donde saqué el código y si tienes algún problema o duda, su creador te ayudará a resolverlo.

Normas de obligado cumplimiento si me envias un mail pidiendo ayuda/consejo

1ª .- Adjunta SIEMPRE la dirección del blog en el que tengas el problema y procura escribir bien la dirección.

2ª .- Intenta explicar LO MAS CLARAMENTE POSIBLE tu problema.
No pagarás más por escribir más palabras.

3ª . - Si has de contestarme usa la opción RESPONDER.
No abras un nuevo hilo de mensajes.

4ª .- No me envies NUNCA la plantilla si no te la pido.

5ª .- No me envies NUNCA la contraseña.
NO PIENSO ENTRAR A MODIFICARTE NADA.

SI ME DEJAS LA PREGUNTA EN UN COMENTARIO
1º .- Si tienes más de un blog dime en cual está el problema.
2º .- Habilita el perfil para que pueda entrar a ver el blog.
3º .- Si el blog es privado tampoco podré verlo. Invítame.

Y por último: Si quieres que te conteste por mail, envíame la pregunta por mail, mi dirección está en la sidebar, en el botón de arriba que tiene un sobre y en casi todos mis blogs.

La plantilla Harbor con dos columnas laterales

miércoles, 17 de octubre de 2007

Aunque no lo parezca, esta plantilla es la Harbor.
La elegí por ser la misma que utilizo en el otro blog que tenía cuando empecé con éste, ya que, en principio, este blog iba a servirme como conejillo de indias para probar todos los trucos válidos que encontrara por ahí.
Algunas de las modificaciones que he hecho aquí no las he aplicado en el otro, como lo de ponerle dos sidebars, pues, al intentarlo en el otro blog, se me descontrolaron mucho las cosas que tengo agregadas en la barra lateral, por lo que lo dejé como estaba.
Pero si tu también tienes este modelo de plantilla y quieres tener dos columnas laterales en tu blog, has de modificar el código HTML tal y como voy a explicarte.
(El truco lo encontré en El escaparate de Rosa).
---
Las plantillas de blogger tienen tres secciones independientes (en cierto modo), que encontrarás, en este orden, al pinchar en Edición de HTML de la pestaña Plantilla.
La primera sección, que está justo debajo de los créditos de la plantilla, corresponde a los Variable name, de los que hablo en otra entrada; la segunda es la sección del CSS y por último la del código HTML, que expandimos al pinchar en Expandir elementos.
Para empezar a modificar esta plantilla primero has de localizar en el sector CSS la medida del "cuerpo" aprovechable del blog.
Es ésta línea: min-width:890px; que encontrarás bajo el encabezado Page Structure.
En principio esta medida está en píxels.
Borras lo que aquí está en rojo, menos el punto y coma, y escribes 100% para que el blog se expanda por toda la zona útil.
Un poco más abajo verás main-wrapper, que corresponde a la zona de las entradas, allí cambias el 64% que hay por un 50%, a fin de que dicha zona ocupe solo la mitad del espacio.
Ahora has de reestructurar la barra lateral (sidebar) y en sidebar-wrapper, dejas el ancho (width) en un 24%
En el bloque siguiente añades esto: padding: 10px; para separar la barra lateral de las entradas.
Una vez hechos estos cambios ya puedes copiar el código íntegro de la sidebar y pegarlo debajo del existente, cambiando el nombre sidebar por newsidebar y el float leftt por float right.
El código resultante deberá ser más o menos así:
#newsidebar-wrapper
{
width:24%;
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
*/
}
#newsidebar {
margin:0;
padding:10px;
padding-top: 0px;
}
Ahora has de modificar el código HTML. Localiza esta línea:
<div id='main-wrapper'>

y justo encima pegas esto:
<div id='newsidebar-wrapper'>
<b:section class='sidebar' id='newsidebar'
preferred='yes'>
<b:widget id='Profile2' locked='false'
title='About Me' type='Profile'/>
</b:section>
</div>

Una vez hecho esto ya puedes hacer vista previa.
Si todo ha salido como es debido, no has olvidado hacer ningún cambio, ni ningún símbolo o llave de apertura o cierre de órdenes, verás la segunda sidebar a la derecha del blog.
En ella verás el perfil, ya lo quitarás cuando acabes, salvo que prefieras dejarlo ahí. Lo hemos usado para que la nueva sidebar tenga alguna cosa para poder verla.
De todos modos aún faltan algunos detalles para poder guardar la plantilla.
Ves nuevamente a la sección del CSS y localiza está línea:
body#layout #sidebar-wrapper {
(la encontrarás justo encima del sector Header) y cambias el ancho (width) a 250px.
Debajo, donde pone:
body#layout #wrap4, body#layout #outer-wrapper {
cambias el ancho a 1000px.
Y ya está ya tendrás dos columnas en tu blog.
---
Observaciones, y consejos:
Cuando añades otra columna a tu blog no desaparecen los módulos que tuvieras colocados en la columna inicial, pero no vas a poder cambiarlos de columna moviéndolos. Si lo intentas verás que el resto de módulos que hayas dejado desaparecen.
Para cambiarlos de columna has de añadir nuevos elementos a la columna nueva (verás que encima de ella también tienes un Añadir un elemento de página) y copiar en ellos los códigos que hubiera en los antiguos. Guardas el nuevo elemento y eliminas el elemento antiguo. (Puedes abrirlos los dos a la vez para hacer el trasvase).
Otra cosa más a tener en cuenta es la manera en que se ve la página de los elementos.
En la plantilla original las columnas se ven "a la vez", pero al añadir una nueva sidebar, la página de elementos se ensancha, con lo que tendrás que moverte lateralmente para ir de una columna a otra. No es importante y no afecta al buen funcionamiento del blog.
Y finalmente recomendarte que guardes tu plantilla original antes de hacer cambios importantes en tu blog y hagas una copia de todos los códigos que tengas en los elementos, por si las moscas, pues, aunque no desaparecen, si al final no te convence como queda, o has tenido algún problema y quieres recuperar la plantilla anterior descargándotela desde tu pc, entonces si que van a desaparecer los widgets.
---
Actualización 27 noviembre 2007
He rebajado el % del ancho de las sidebars y he puesto 24 en vez de 25, que es lo que había antes y es lo que vi en el Escaparate de Rosa.
El motivo ha sido que con un 25% de anchura en las sidebars, con Firefox la de la izquierda desaparece y se coloca debajo de las entradas, con lo que solo sería visible para aquel que baje hasta el final del blog.
Al quitarle este 1% vuelve a su lugar.
---

Imprime esta entrada

10 comentarios. ¿Quieres añadir el tuyo?

  1. Salem ha dicho
  2. Sólo decirte que muchas gracias por tus consejos. Me has sido de gran ayuda ya que tu forma de explicar todo el jaleo de códigos es muy clara y estructurada.

    Me gustaría poner un enlace a tu blog desdel mío. Espero que no te importe. Voy a hacer una sección de webs recomendadas y me gustaría incluir la tuya. Así, personas como yo que no entienden ni papa de códigos podrían beneficiarse.

    De nuevo muchas gracias por tu gran aportación.


    PD: Quedas invitada a "mi pequeño mundo infantil" (blog en catalán).

  3. Eureka ha dicho
  4. Eulalia, mil gracias, te lo has currado mucho y me ha servido.
    Eres una crack y muy generosa, suerte con tu blog y en tu vida...

  5. Eulalia ha dicho
  6. Gracias, eureka, por tus palabras, aunque en este caso mi mérito no sea más que haberlo encontrado, aplicado y explicado.

  7. Mallo ha dicho
  8. Me da un error cuando copio
    div id='newsidebar-wrapper'>
    etc....

    y al hacer vista previa me da el siguiente error:
    No hemos podido obtener una vista preliminar de su plantilla.
    Por favor, corrige el siguiente error y envía la plantilla de nuevo.
    El código ID del nuevo widget "NewProfile" no es válido para este tipo: Profile

    Que puede ser?? he puesto todo como has indicado y lo he repetido unas cuantas veces en dias alternos y no logro saber porque. Muchas gracias y el blog esta genial

  9. Eulalia ha dicho
  10. Cierto, Mallo, es un error de transcripción. Has de poner Profile2 y te lo aceptará. Ahora lo corrijo. Gracias y disculpa.

  11. Mallo ha dicho
  12. ahora me da este error :-(

    Por favor, corrige el siguiente error y envía la plantilla de nuevo.
    Se ha encontrado más de un artilugio con el ID: Profile2. Los ID de artilugio deben ser exclusivos.

    No tengo ni idea porque de programacion de html no tengo ni idea. Siento el incordio pero me encantaria poder poner la columna al blog para añadir cosas. Gracias por tu ayuda y tu tiempo

  13. Eulalia ha dicho
  14. Mira a ver cuantos gadgets de perfil tienes. Si ves mas de uno eliminalo o incluso te diré eliminalos todos, haya solo uno o mas, al fin y al cabo vas a colocarlo en la nueva columna a ver si ahora sale bien.

  15. Mallo ha dicho
  16. Eulalia, he estado mirando y ha funcionado. Eso si, ahora al darle vista previa con todos los cambios realizados me hace las dos columnas sin problemas pero la columna que he añadido empieza a poner el perfil mucho mas arriba que la otra que tengo. Como puedo corregir eso?? y muchas gracias por tu ayuda
    Un saludo

  17. Eulalia ha dicho
  18. Hola:
    Esto se arregla cambiándole el padding-top a una de ellas.
    Si quieres bajar la nueva has de aumentar la cifra de la nueva, si quieres subir la otra redúcele esa cifra.

  19. pulguinha ha dicho
  20. Gracias, gracias gracias

google-site-verification: google6804ea8a89fbde9f.html
Plantilla creada por laeulalia basada en la harbor de blogger.