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:
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
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.
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
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.
Gracias, muchas gracias.
En cualquier momento cambio el header y esto me podria venir bien.
Saludos.
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.
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
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.
Vale, gracias. Voy a ver cómo me queda...
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
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
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.
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?
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 ;)
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?
Prueba antes de < div class='widget HTML'
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?
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?
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?
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.
Otra cosa. Justo despues del < /div > de header-wrapper tengo
< div id='menubloque' >
< ul id='menudesplegable' >
del menu desplegable. ¿Influirá esto?
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 :)
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.
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/
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
#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;
}
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.
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
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.
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.
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)?
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
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.
Eres el mejor gracias!
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.
@wweash27. Gracias, me alegro que te sirva.
@BretS@nti. Gracias por tu aporte amigo.
Me sale error que mi plantilla no esta bien formada o algo asi
Podes ver mi codigo fuente en
www.saborcotidiano.com
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 "
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.
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!!!
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
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 "
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
En mi plantilla no encuentro #header-wrapper
qué puedo hacer????????
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!!
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 .
NORMAS PARA COMENTAR:
1) Si no encuentras lo que buscas emplea el buscador.
2) Si quieres preguntar algo, primero asegúrate que tu comentario guarda relación con la temática de la entrada.
3) Si tu pregunta no encaja en ninguna entrada mándame un e-mail en contacto situado a pie de página para preguntarme lo que necesites.
4) Trata de expresarte bien. Explica correctamente tu problema, y por favor, no escribas en mayúsculas ni emplees lenguaje SMS. Escribir correctamente es gratis.
5) No hagas SPAM. Comentarios breves con la unica intención de dejar la dirección de tu blog será considerado SPAM.
6) No se permiten descalificaciones ni faltas de respeto hacia ningún usuario.
Si no se cumplen estas seis normas el comentario será ignorado y/o borrado.
Respetando estas normas ganamos todos, conseguimos un mayor orden y ayuda para los nuevos visitantes. Gracias por tu comprensión.
Publicar un comentario en la entrada