Cómo poner una cabecera doble (header) en tu blog


Muchos me habéis preguntado ya por cómo poner una cabecera (header-wrapper) doble en el blog. De esta forma la cabecera queda dividida en dos partes, y tal y como lo tengo yo: a la izquierda el logo y a la derecha el buscador. Pues bien, os voy a tratar de explicar cómo lo hice yo.



Para ello vamos a:

1) Diseño
2) Edición de HTML -Recuerda antes siempre guardar una copia de tu plantilla-
3) Busca #header-wrapper (teclea Ctrl+ F para buscar más rápido). Te encontrarás con algo así:


#header-wrapper { background:$headerbgcolor; height:90px; width:980px; padding-top:16px }


Si te fijas el width (ancho de la cabecera) es de 980px y el height (altura) es de 90px. Obviamente en cada plantilla habrá unos valores diferentes. Si deseas puedes aumentar o reducir el tamaño de tu blog, pero siempre recomiendo no sobrepasar los 980px para que todo el mundo pueda leerte sin problemas. Pero como queremos un header doble (cabecera doble) deberemos dividir por dos ese valor. Es decir, si nuestra cabecera mide 980px deberemos darle un valor ahora de 490px, pero recomiendo siempre darle algo menos de valor, por ejemplo 400px.

4) Una vez modificados los valores ahora debemos cambiar el nombre de #header-wrapper por #header-wrapper-left y le añadiremos float:left; Es decir, nos debe quedar algo así:


#header-wrapper-left { background:$headerbgcolor; float: left; height:90px; width:400px; padding-top:16px }


5) Justo debajo pegaremos lo siguiente:


#header-wrapper-right {float:right; width:400px; height:60px; text-align:right }


6) Ahora buscamos <div id='header-wrapper'> y lo cambiamos por <div id='header-wrapper-left'> Si te has fijado todos elementos que abrimos con <...> luego los cerramos con </...> por eso deberemos buscar a ver dónde acaba <div id='header-wrapper-left'>

Cuando hayamos visto el cierre de <div id='header-wrapper-left'> es decir, </div> pegaremos a continuación lo siguiente:


<div id='header-wrapper-right'>
      <b:section class='header-right' id='header-right' maxwidgets='1' showaddelement='no'/>
</b:section>
    </div>


7) Ahora clicamos en vista previa y si todo está bien guarda tu plantilla. Ahora dirígete a Diseño->Elementos de página y comprobarás que ahora tienes un header doble disponible para poner los gadgets que quieras en tu blog.

46 comentarios:

  1. lo he dicho y solo seguire diciendo sos grande...

    PD:
    podrias explicar como en vez de que aparesca Entradas antiguas, aparezca Numeros osea 1. 2. 3
    Que redireccione a la otra pagina

    saludos

    ResponderEliminar
  2. Gracias RD Juegos, me alegro que te guste. Aquí tienes la respuesta a lo que demandas: http://www.quierocrearunblog.com/2009/08/como-numeraranadir-numeracion-de.html

    La próxima por favor emplea el buscador jeje. Saludos y gracias por comentar amigo.

    ResponderEliminar
  3. hola amigo yo era de los que pedia este post y ahora que lo pones no creo que me funcione necesito tu ayuda en mi header-wrapper no biene el ancho (width) solo la altura (higth) lo que note es que es de position relative tendra esto algo que ver? si necesitas mi codigo de header solo dilo

    ResponderEliminar
  4. Hola tebant21, no tienes habilitado tu perfil, por déjame el nombre de tu blog para que pueda ver tu código fuente. Gracias, un saludo.

    ResponderEliminar
  5. Gracias, muchas gracias.
    En cualquier momento cambio el header y esto me podria venir bien.
    Saludos.

    ResponderEliminar
  6. Gracias a ti Gildo. La verdad es que es muy útil para un blog dividir la cabecera en dos partes. Cuando lo pruebes ya me contarás qué tal te ha ido.

    Saludos.

    ResponderEliminar
  7. Hola!!! Lo he buscado, pero en mi plantilla no sale el ancho ni la altura. ¿Significa eso que no lo puedo hacer? Porque me gustaría mucho poner algo en el espacio vacío que tengo en la cabecera (me volví loca, pero no conseguí poner la imagen centrada). Gracias

    ResponderEliminar
  8. Hola Lipooh. Le puedes poner tú misma el ancho y alto que quieras. El problema de tu logo es que es poco ancho, por eso te queda a la izquierda.

    ResponderEliminar
  9. Vale, gracias. Voy a ver cómo me queda...

    ResponderEliminar
  10. hola yo otra ves ya habilite mi perfil pero mi pagina no es la del problema sino que cree otro blog para experimentar y cuando este listo solo ponerlo en mi pagina el problema es que como es una plantilla de blogger especializada en videos tiene cosas y codigos muy confusos la plantilla es la de bloggertube talvez ya lo conoces espero puedas ayudarme

    ResponderEliminar
  11. por cierto en mi perfil el blog que dice mundo online es en el que necesito ayuda y gracias por todo tu pagina es lo de lo mejor

    ResponderEliminar
  12. Hola tebant. No conocía esa plantilla. Pero tú mismo puedes otorgarle los valores que quieras a la cabecera. He revistado tu plantilla y en el #header-wrapper pone lo siguiente:

    #header-wrapper {
    height:200px;

    Añádele el width y ves probando.

    Saludos.

    ResponderEliminar
  13. Hola:
    Adoro tu Blog!!! No tienes ni idea de lo que estoy aprendiendo, es mejor que ir a la U.
    Estoy utilizando tu plantilla Facebook 2.0 y quiero dividir la cabecera pero no encuentro #header-wrapper.
    Me ayudas?

    ResponderEliminar
  14. Hola Tatiana, bienvenida al blog y gracias por adorar mi blog jejeje. Si no recuerdo mal, el header-wrapper de esa plantilla es

    #wrapper {
    width: 964px;
    margin: 0 auto;
    }

    De todas formas, te agradecería que si tienes dudas con esa plantilla lo hablásemos en la propia entrada de la plantilla Facebook 2.0

    Muchísimas gracias por tu visita y por tu comentario ;)

    ResponderEliminar
  15. Hago como tu dices y me dice que me falta una cerrar un div. Si expando los artilugios me sale mucho mas hasta que cierra el div de header-wrapper. Probé a ponerlo justo despues de todo eso y me da el mismo error. ¿Alguna idea?

    ResponderEliminar
  16. Nada. He probado poniendolo debajo de cada /div hasta div id='content-wrapper', y me dice siempre que me falta cerrar un div.
    ¿Alguna idea mas?

    ResponderEliminar
  17. Si has probado después de cada /div no se me ocurre qué es lo que pasa. Imagino que has copiado todos los pasos al pie de la letra, ¿no?

    ResponderEliminar
  18. Bueno, no al pie de la letra completamente, porque mi cabecera tiene tres elementos y lo showaddelement lo tengo con yes, pero el resto si. ¿Puede influir eso?

    ResponderEliminar
  19. En teoría no debe influir. No sé qué debe ocurrir.

    Aprovecho y pregunto a todos, ¿alguno de vosotros ha seguido el tutorial y le ha funcionado sin problemas? Imagino que sí porque varios lo han agradecido. Yo lo he probado en dos plantillas (una de ellas era una plantilla mínima de blogger) y no tuve problemas al respecto.

    ResponderEliminar
  20. Otra cosa. Justo despues del < /div > de header-wrapper tengo

    < div id='menubloque' >
    < ul id='menudesplegable' >

    del menu desplegable. ¿Influirá esto?

    ResponderEliminar
  21. Ese div imagino que será para un menú como su propio nombre indica. Lo único que te puedo aconsejar es que lo pruebes a ver qué ocurre. Coméntame a ver :)

    ResponderEliminar
  22. Nada. Probé eliminando el menú y me sigue pasando lo mismo, incluso restableciendo los valores de maxwidgets, showaddelement y locked de header-wrapper por los originales.
    La plantilla que utilizo es la mínima black, modificada claro.
    Voy a probar con lo de añadir tres columnas debajo del header(crosscol) y eliminando el header.

    ResponderEliminar
  23. Hola T360R. No sé qué decirte si ya has probado todo. Mira la plantilla mínima que yo hice la prueba: http://headerdobleprueba.blogspot.com/

    ResponderEliminar
  24. hola de nuevo yo aqui apenas pude probar tu consejo y no me dio resultado ya intente mucho pero sigue saliendo error en un tipo div no se que mas podria hacer he intentado muchas cosas te dejo el codigo aver si puedes ayudarme gracias

    ResponderEliminar
  25. #crosscol-wrapper {
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    background:#7B7B7B url(http://4.bp.blogspot.com/_WoCJXgXotb8/Srrsaa9615I/AAAAAAAAAAs/2JICIGxevs0/s1600/featuredbg.png) repeat-x scroll left bottom;
    height:360px;
    margin-bottom:16px;
    margin-right:16px;
    }
    #header-wrapper {
    height:200px;
    position:relative;
    line-height:200px;
    }
    #header-inner {
    height:200px;
    }
    #header {
    height:200px;
    }
    #header h1 {
    color:#fff;
    font-family:helvetica;
    font-size:45px;
    font-weight:bold;
    letter-spacing:-4px;
    }
    #header a {
    color:#fff;
    }
    #header a:hover {
    color:#fff;
    }
    #header .description {
    color:#fff;
    font-size:10px;
    left:0;
    height:20px;
    letter-spacing:0;
    position:absolute;
    text-transform:uppercase;
    top:35px;
    }

    ResponderEliminar
  26. Revisa a fondo el paso 4) y el paso 6). De todas formas no importaba que pegases aquí el código, puedo verlo entrando a tu blog. Coméntame los resultado a ver si te funciona.

    ResponderEliminar
  27. No hemos podido obtener una vista preliminar de su plantilla.
    Por favor, corrige el siguiente error y envía la plantilla de nuevo.
    No se ha podido analizar su plantilla, porque no está bien formada. Asegúrese de que todos los elementos XML se han cerrado correctamente.
    Mensaje de error de XML: The element type "div" must be terminated by the matching end-tag "



    me sale ese error y no me deja tampoco

    ResponderEliminar
  28. Hola David. En cuanto pueda reviso a ver qué os sucede a muchos de vosotros.

    Lo que sí os puedo asegurar es que con una plantilla mínima funciona perfectamente.

    ResponderEliminar
  29. hola amigo otra ves yo dijiste que te informara de mis avances y pues aki estoy ya pude poner doble header pero ahora un pekeñito problemita el fondo es negro y el otro header sale como las entradas y gadgets de abajo grisesito y se ve un poco mal queria ver si se puede hacer algo para que tenga fondo completamente negro.

    POSTDATA: se que no tiene que ver con el tema pero aprovecho el comentario, en mi blog sale una imagen de mi ultimo comentario y en la eskinita de la imagen el contenido de dicha entrada, kisiera ponerle solo el titulo y no el contenido en esa eskinita talves puedas ayudarme gracias por todo nos vemos al rato aa y mi blog es el de mundo online.

    ResponderEliminar
  30. Hola. A #header-derecha { añádele esto:

    background:transparent url(http://3.bp.blogspot.com/_WoCJXgXotb8/SrrsY0G_3FI/AAAAAAAAAAU/FGOXZBwWs0k/s1600/bodybg-5.gif) repeat scroll 0 0;

    A ver si te funciona. Por cierto, ¿al final cómo lo conseguiste (me refiero al header doble)?

    ResponderEliminar
  31. hola amigo oye ya hice lo ke me dijiste y aun se ve gris y no negro como mi cabezera a y de donde lo sake es de aquí: http://vlogra.blogspot.com/2009/05/dividir-la-cabecera-del-blog.html espro te sirva aunke tu explicas mas chido al otro vatalle para entenderle :D nos vemos aaa y ayudame otra ves con lo del comentario pasado porfa bye

    ResponderEliminar
  32. Te aparece como si fuese otro gadget. Yo creo que es por eso, y la verdad si has probado lo que te dije, ya no sé cómo poder hacerlo... lo lamento.

    ResponderEliminar
  33. Pues creo que depende de la plantilla que tengas,yo tengo una de tres columnas y no encontraba por ningun lado #header-wrapper así que si te pasó lo que amí mejor ve a #main-top y añade background-image: url(aqui la direccion de tu imagen); y listo.

    ResponderEliminar
  34. @wweash27. Gracias, me alegro que te sirva.

    @BretS@nti. Gracias por tu aporte amigo.

    ResponderEliminar
  35. Me sale error que mi plantilla no esta bien formada o algo asi
    Podes ver mi codigo fuente en
    www.saborcotidiano.com

    ResponderEliminar
  36. disculpa no me funciono, me sale este error

    No se ha podido analizar su plantilla, porque no está bien formada. Asegúrese de que todos los elementos XML se han cerrado correctamente.
    Mensaje de error de XML: The element type "div" must be terminated by the matching end-tag "

    ResponderEliminar
  37. Hola me ojala me puedas ayudar, mira yo estoy utilizando el nuevo diseñador de plantillas de blogger y no he podido realizar este truco para mi cabecera,,, www.viponlinecolombia.com esta es la direccion de mi blog,,,, muchas gracias de antemano.

    ResponderEliminar
  38. me interesa mucho aplicar este truco a mi blog... pero busco el #header-wrapper y las demas cosas en mi plantilla y no lo encuentro, vale aclarar que uso el nuevo diseñador de plantillas.. help me!!!

    ResponderEliminar
  39. Esta bueno esto.. pero yo quiero saber si se puede poner doble fila de entradas? Por ejemplo si tuviera un blog de fotografias, que a la izquierda me queden entradas del 1 al 5 y a la derecha entradas del 6 al 10, Me explico?
    Sera que se puede?
    Muy bueno tu blog. Saludos

    ResponderEliminar
  40. siempre me sale este error No se ha podido analizar su plantilla, porque no está bien formada. Asegúrese de que todos los elementos XML se han cerrado correctamente.
    Mensaje de error de XML: The element type "div" must be terminated by the matching end-tag "

    ResponderEliminar
  41. Hola! En primer lugar muchísimas gracias por tu blog, es el mejor, sin duda.
    Mira, el problema es q no puedo variar el ancho de la cabecera de mi blog y me queda demasiado estrecho. He modificado el tamaño de la imagen con el Photoshop, pero nada; y además no me aparece el código #header-wrapper. Espero puedas ayudarme. Muchísimas gracias

    ResponderEliminar
  42. En mi plantilla no encuentro #header-wrapper
    qué puedo hacer????????

    ResponderEliminar
  43. Tengo un problema!! me gustaria cambiar el avatar de la plantilla facebook 2.0 por otra imagen que no sea la de "B" Bloger, me podrias decir comoO, Urgee!!

    ResponderEliminar
  44. hola te podrias hacer un post con este truco para las plantillas nuevas donde no se encuentra el #header-wrapper y los demas codigos ,esta muy bueno el truco para las plantillas antiguas,de seguro muchos que tienen la plantillas nuevas te lo agradeceremos ojala te animes hacer un post, o puedas decirnos como implentar este truco en las plantillas nuevas .

    ResponderEliminar