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 widebar

viernes, 16 de mayo de 2008

Hace dias vi un truco muy bueno en el blog de Rosa.

Me guardé la dirección de la entrada en el blog de notas, a la espera del momento adecuado para probarlo.
Acabo de hacerlo y funciona perfectamente.

Es un truco ideal para poner en la columna lateral esas cosas que no nos caben en una sidebar normal.

Se trata de la widebar, lo que traducido a nuestro idioma sería la sidebar ancha.

Para ponerlo has de tener un blog con dos columnas laterales y tenerlas las dos en el mismo lado, pues se trata de añadir encima de las sidebars, una nueva sidebar, la widebar, con el ancho de las otras dos más la distancia que haya entre ellas.

Para colocarla, ante todo has de poner las dos columnas laterales juntas.
Eso se consigue cambiándole a una de ellas la posición en el CSS, así, si quieres que estén a la derecha, les has de poner a las dos float: $endSide; y ponerle a main el float en $start side, si no lo estuviera.
Si las quieres a la izquierda, las sidebars han de estar en $startSide y el main en $endSide.

Luego, has de bajar al sector del HTML y cambiar el código de una de las dos sidebars de sitio.
Si las quieres a la derecha, has de pegar el código de la que tengas encima del main, debajo.
Si las quieres a la izquierda, el de la que está debajo lo has de poner encima.

Hecho esto, haz vista previa, y si todo está en su sitio guardas.
Quizás tengas que modificar algo los margin de las columnas, para centrarlas, depende de como los tuvieras, pero una vez que todo esté en su lugar guarda de nuevo.

Y ya con todo en su sitio vamos a colocar la widebar.

Copia y pega este código en el CSS. (Yo lo he pegado, justo encima del código de las sidebars, ya que esta será su ubicación).

#widebar-wrapper {
width:468px;
float:$endSide;
border: 1px solid #000000;
padding-bottom:10px;
margin-top:10px;
margin-bottom:10px;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
}
#widebar {
width:468px;
padding:10px 0 5px 10px;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
}


El width lo has de poner basándote en las medidas de tu blog. (En este caso, las dos sidebars que tengo miden cada una 230px y hay 8px de margin entre ambas, de ahí el 468)

El margin top lo he colocado pues es el mismo margen que tengo en main, así quedan alineados.
Mira en cuanto está el tuyo y ponle lo mismo.

El borde, #000000, lo he puesto para que se vea algo antes de que le añadas algún elemento. Lo verás negro. Si quieres cambiarlo, mira como está escrita la variable en tu plantilla, y en lugar de eso pones $borderColor o $bordercolor.
Si prefieres que no tenga borde, en cuanto hayas añadido algo, borras la línea, pero espera que aún no hemos terminado.

Ahora has de añadir el código HTML de la widebar, de lo contrario no funcionaría.
Allí añades esto,

<div id='widebar-wrapper'>
<b:section class='sidebar' id='widebar' preferred='yes'>
</b:section></div>


encima de <div id='main-wrapper'>

Vista previa.
Si todo ha ido bien, verás un recuadro bordeado de negro encima de las columnas laterales.
Guarda plantilla y ya puedes colocarle lo que quieras.

Aquí puedes ver como queda.

Imprime esta entrada

7 comentarios. ¿Quieres añadir el tuyo?

  1. Marian ha dicho
  2. Hola Eulalia: ya he estrenado mi widebar, muy buen invento y como siempre gracias a ti a nuestra disposición. Muchisimas gracias. Besos. Marian.

  3. Howard ha dicho
  4. Hola Eulalia, soy de Perú, encantado de encontrarte; me gustan mucho tus articulos pero más me gusta tu disposición a compartir tus conocimientos autodidácticos.(También me gusta tu foto). Te escribo por aquí porque no podía acceder a la opción del e-mail, estoy por tunear un blogcito que tengo y quería pedirte que me des una manito. Gracias

  5. Eulalia ha dicho
  6. howard: Si tu blog es Tiens Jaen, estoy tuneando esa plantilla. En breve podrás verla.
    Saludos.

  7. Howard ha dicho
  8. De veras? eres un verdadero angel, te mereces un besito, mejor varios besitos. Es que estoy un poco emocionado que alguien como tú pueda modificar mi blog que lo he tenido tan abandonado. Sí, es tiensjaen.

  9. Eulalia ha dicho
  10. Howard: Estoy modificando una plantilla como la que usas, no la de tu blog.
    De todas formas, dejaré las instrucciones en el blog que crearé para mostrar como se puede modificar, claras y concisas, como siempre, para que tu mismo puedas aplicarle los cambios necesarios.
    Es bastante fácil y ya le he hecho algunos cambios bastante chulos.
    Pero he estado un poco liada con todo el tema del pc y la dejé un poco abandonada.
    Pero no te procupes que pronto podrás ver un a plantilla herbert tuneada.
    Saludos.

  11. Howard ha dicho
  12. aaah, ya me habia emocionado, bueno no importa. Muchas gracias por el tiempo que te tomará modificar. Te escribí a tu correo. Saludos.

  13. Victoria A punto P punto ha dicho
  14. Hola, que tal?

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

    He colocado 2 widebar siguiendo tu ejemplo, 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.

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