JMiur [E]

Siempre he creido que el elemento Header o Cabecera de página es uno de los códigos más absurdos que posee Blogger, difícil de entender [1 | 2 | 3] y aún más difcil de modificar. Por momentos, críptico, se supone que está allí para facilitarnos la tarea y suele tener el efecto contrario; a la hora de personalizarlo, son muchas las preguntas que surgen. Muchas de esas preguntas tienen una raiz común, suponer que el Header es algo diferente al resto, una zona prohibida.

Pero no es así, sólo es una sección como cualquier otra, un rectángulo contenedor donde es posible agregar cualquier otro elemento aunque, por defecto, eso está bloqueado en la mayoría de las plantillas. Para habilitarlo, basta buscar esto:
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
y cambiarlo así:
<b:section class='header' id='header'>
de ese modo, aparecerá en Diseño como cualquier otro elemento y podremos agregarle widgets de cualquier tipo.

Otro inconveniente con el que solemos toparnos es cuando queremos colocar una imagen en lugar del título; las opciones que nos muestran son pocas e inflexibles. Obviamente, lo mejor sería eliminar el elemento por completo y usar un código normal o un elemento HTML pero, vamos a partir de no tocar nada, de dejarlo como está y de olvidarnos de las "facilidades" que nos ofrecen.

Para agregar un fondo en el Header no necesitamos otra cosa que subir la imagen en cualquier entrada, copiar la URL y agregarla en las definiciones del CSS:
#header-wrapper {
... la pondremos acá ...
}
Sólo hay que tener en cuenta un par de detalles. Si la imagen es un banner que ocupará todo el ancho, lo mejor es establecer la altura del DIV usando la propiedad height. Deberíamos utilizar algo así:
background: transparent url(URL_IMAGEN) no-repeat left 50%;
Si se trata de un logo que ocupa sólo un sector:
background: transparent url(URL_IMAGEN) no-repeat valorpx valorpx;
donde podemos ubicarlo con precisión, estableciendo los datos de valorpx. Por ejemplo, esto la colocará a 10 pixeles del borde izquierdo y a 50 pixeles del borde superior:
background: transparent url(URL_IMAGEN) no-repeat 10px 50px;
Si se trata de una pattern o imagen que se repite, usaremos:
background: transparent url(URL_IMAGEN) repeat left top;
En todos los casos, no es conveniente eliminar la etiqueta H1 que contiene el título del blog, si no queremos verlo, lo mejor es ocultarlo para que los buscadores lo lean aunque no se vea. Eso nos lleva a un segundo punto importante, el header suele funcionar como enlace a la página principal y eso podemos eliminarlo de este modo:
#header h1 {
.......
display: none;
}
A mi juicio, lo mejor es preservarlo así que, sin tocar el código del widget podríamos agregar un par de definiciones extras que harán que no lo veamos pero que permanezca allí:
#header h1 {
.......
filter: alpha(opacity=0);
opacity: 0;
}
#header h1 a { filter: alpha(opacity=0); opacity:0; }
#header h1 a:hover { filter: alpha(opacity=0); opacity:0; }

36 comentarios:

Gem@  

Lo complicado lo haces fácil y en pocas palabras, no sé si es telepatía pero esta noche me peleaba con el header de una plantilla.
Lo que dices de no quitar el título es el gran error que muchos cometen por desconocimiento, es un buen dato ;)

Responder
JMiur  

No es telepatía ... es que yo la espio :D

Responder
egoloco  

que loco, no Gema? JMiur espía y te da una mano con una entrada... jajaja buen detalle

Responder
@rielCastellanos  

precisament hoy he jugado un poco con la cabecera de mi blog (es decir la elimine) como puedo saber si mantengo el titulo de mi blog y en caso de haberlo quitado como puedo hacer que este aunque no sea visible, por lo de los buscadores que mencionas arriba.

Mi Blog: http://blogunah.blogspot.com/

Gracias.

Salu2

Responder
MamaNunes  

Ahh sí todo "descomplicado". Gracias maestro :D

Responder
Gem@  

egoloco cuando todos vamos de camino a solucionar algo J.Miur ya hizo el mismo camino de ida y vuelta, espiar puede ser sinónimo de ver las cosas con más claridad :)
(Debe tener muchas manos porque las va repartiendo) :D

Responder
Dña. Urraca  

Me está empezando a caer bien el header, por incomprendido y rebelde.

Responder
Gildo Kaldorana  

Como dicen que hay que probar de todo en esta vida, yo lo voy a intentar.
Gracias y un saludo.

Responder
Ana Laura  

Muchas gracias, tu post es muy claro y me sirvió para solucionar un problemita que tenía con el título de mi blog. No había encontrado antes dónde era que debía aplicar mis cambios. Saludos!

Responder
Graciela  

yo soy rebelde porque el mundo me hizo así...recuerdas Doña Urraca???

y un poquito actualizado ;) Ataque 77

si habremos cantado esa canción!!! perdón Jmiur me dejo llevar :)

Responder
JMiur  

@rielCastellanos: No veo que haya un título tal como se describe acá, es decir, alguna etiqueta H1 con un enlace en alguna parte del header.

Gem@: XD Lo que hay que oir :D

Dña. Urraca: Ojalá fuera rebelde, me parece demasiado conservador para mi gusto, yo quisiera un header anárquico :D

Gildo Kaldorana: Exacto. Hay que probar y decidir, esa es la idea.

Me alegro que sirviera, Ana Laura :)

Graciela: ¡Cómo no se va a acordar!!!!!!!!!!! No hay problema, es la web 5.0, posts con música ambiental :D

Responder
@rielCastellanos  

mmm.... ya veo, seguramente lo borre, vale poner una meta etiqueta llamada title y el titulo de mi blog? no la tenia y ayer inmediatamente la agregue, digo por lo del posicionamiento, gracias.

Salu2

Responder
JMiur  

La etique &lt,TITLE> es una cosa y el título del header es otra. En tu blog veo la primera pero no la segunda y es recomendable que haya una etiqueta H1 con el título y el enlace del blog en la página principal.

Responder
Max  

Amigo te pasas, muchas gracias, la verdad que me estaba peleando con el header revelde este :) pero por fin lo pude solucionar gracias a ti

gracias gracias sos un maestro un sensei jejeje ;) sigue asi amigo +10

Responder
Dña. Urraca  

No lo digas muy en alto a ver si te lo van a conceder los de blogger y tenemos una rebelión en masa. Gema y tu posiblemente lo dominariais, Graciela lo adoptaría como mascota, pero me temo que a mi me echaría de casa. :D

Responder
JMiur  

Me alegro que sirviera, Max.

Ok, Dña.Urraca, seguiremos manteniendo el status-quo :D

Responder
Bonzu Pipinpadaloxicopolis III  

Lo mismo de ocultar el #header h1 se lo apliqué a la descripción, porque sí.

Responder
Feroz  

como dice mamanunes, "descomplicado" y listo para sentencia.

Gracias, de nuevo.

Responder
Pirrimarzon  

Hola JMiur,

Mi problema es bien sencillo, pero complicado a la vez. Trato de colocar el header de mi blog justo encima del main-wrapper en una plantilla de 3 columnas. Hay alguna forma de moverlo? He tratado de buscar el header-wrapper, pero no aparece por ningún lado. La plantilla no tiene mucha historia, porque está sacada del blogger draft, así que...

Muchas gracias por tus aportes de antemano.

Saludos

Responder
Pirrimarzon  

Bueno, para dejarlo más claro te dejo el enlace de mi blog:

http://pirrimarzon.blogspot.com

Gracias otra vez

Responder
JMiur  

La plantilla si, tiene mucha historia justamente porque es una de esas nuevas plantillas de Blogger; engorrosa hasta el extremo y llena de elementos. No están pensadas para ser personalizadas con facilidad sino para usarse así como vienen.

Para modificarla, lo primero que debes hacer es desbloquear todos los elementos bloqueados. Sin expandir, busca esto;
locked='true'
y cámbialo por esto:
locked='false'
en todos los widgets que encuentres (debe ser, por lo menos, tres) de esa manera, podrás moverlos desde la primera ventana de Diseño.

Responder
Pirrimarzon  

He desbloqueado los locked, pero no aprecio el cambio, salvo que ahora me permite la opción "eliminar". Lo que busco en este caso es centrar el header, y que quede justo encima de la columna central. Para ello, tendría que colocar un align='center' en algún lado, y no sé cual.

Como mucho, incluso si no permite esa opción, supongo que sí permitirá darle un margen al header de cierto número de pixels, y también me serviría.

No sé si me explico...

Saludos y gracias otra vez

Responder
JMiur  

El header está centrado, el header es un rectángulo que va de izquierda a derecha, ocupando todo el ancho del blog, es decir, las tres columnas.

Si lo que quieres es centrar la imagen,podrías probar agregando esta deficnión en el CSS:

#Header1_headerimg {margin:0}

O bien, esta otra si es que quieres desplazar la imagen con cierta exactitud, colocando el valor que quieras:

#Header1_headerimg {margin-left:200px;}

Responder
Pirrimarzon  

Ya está todo solucionado, muchas gracias!!

Responder
Fredd Arthur  

recordemos que las cosas ocultas no agradan a google adsense

Responder
JMiur  

No. Eso no es cierto. Dependerá del contenido oculto, si ese texto oculto es accesible al usuario via clicks o si es parte de la misma página y no contiene palabras claves engañosas, de ninguna manera es penalizado:
http://www.mattcutts.com/blog/notifying-webmasters-of-penalties/

Responder
Liliana  

Hola, muy buena explicación, excelente diría yo, seguí los pasos y ahora el header no se ve pero el inconveniente es que el post actual y el primer gatget se ven muy arriba, cómo se podrá corregir esto?

Responder
JMiur  

Liliana:
No veo nada de eso en tu blog. Explícame un poco más qué has hecho o cuál es el resultado que quieres obtener.

Responder
Liliana  

Gracias por contestar a una pregunta que te hice hace días, acerca del header, no viste nada porque tengo el blog en cero, y constantemente hago los cambio como un borrador por ahora, ya tengo algunas ideas más claras. De nuevo gracias de todas formas, cuídate.

Responder
orochimarusama  

Hola que tal j miur saludos tengo una pequeña duda o dudota,pues en una nueva pagina que estoy haciendo quiero cabiar la cabecera ,poniendo una imagen en el rectangulo que se encuentra entre el menu grande(azul)y el menu chico(negro)pero solo que la imagen sea el tamaño de ese rectangulo,porque hice un rectangulo y no se que paso que tambien cubria el menu de arriba como que aumento su header y solo quiero que este en ese cuadro ,que puedo hacer ?Espero que me puedas ayudar gracias

Responder
JMiur  

Hay muchas maneras de conseguir eso pero, dependerá de la imagen que quieras poner. Supongo que habras querido agregar esa imagen en el rectángulo llamado #header y esa sería la forma más simple.

Puedes ponerla como fondo en ese gran rectángulo que incluye todo, desde el menú superior hasta el inferior pero, si le agregas la posición, podrás "moverla dentro de ese rectángulo para que quede donde quieras; por ejemplo, voy a usar una imagen cualquiera (la de mi header) y suponer que mide 600 pixeles de ancho; así, la pondría jsuto después del logo con la letra P:

#header {
..............
background: transparent url(http://1.bp.blogspot.com/_hljKDuw-cxQ/S8aFkHMAQUI/AAAAAAAAPfU/totak_z2_F4/s600/vagaPlantilla_header.jpg) no-repeat scroll 100px 50px;
}

Esos dos valores: 100px y 50px son los que la ubican en cierto lugar; en este caso, 100 pixeles del borde izquierdo y 50 pixeles del borde superior; esos son los dos valores que puedes ir modificando hasta posicionarla exactamente donde quieras.

Responder
Admin  

Hola Jmiur tengo un problema, en mi blog, el header lo puse en ancho total, el menu superior y el menu inferior tambien, ademas tengo un logo por delante del header, pero los elementos del menu superior e inferior y el logo al aumentar la resolucion se corren hacia la izquierda y entre mas aumentes se sigue moviendo y quiero que queden a la misma altura que las sidebar y el contenido.

Se ve bien en resolucion 1024x768 pero al momento de aumentar la resolucion es cuando pasa eso.

mi blog es: http://www.tibialaner.net/

Ayuda porfas !!

Responder
JMiur  

En tu caso, hay dos sectores que puedes centrar con cierta facilidad agregando o modificando las propiedades:

#top_area_content {
.......
margin: 0 auto;
width: 1000px;
}
#subnavbar {
.......
margin: 0 auto 5px;
width: 1000px;
}

El problema es el header en si mismo ya que el div header-wrapper tiene dos sectores, uno a la derecha (aparentemente vacio) y otro a la izquierda; uno es #header y otro es #header2. Si ese segundo (el de la derecha, no tiene uso, conviene elimianrlo y luego, entonces sí es posible cambair las propiedades del resto para centrarlo.

Si queda, debes agregar un div extra y allí poner las propiedades de width y largin como en los casos anteriores:

<div id='header-wrapper'>
<div id='NUEVO'>

<div id='header' ....... > ........ </div>
<div id='header2' ....... > ........ </div>

</div>
</div>

Responder
Admin  

Ealeee !! Jmiur eres un genio xd me funciono perfecto solo que en vez de

#subnavbar {
.......
margin: 0 auto 5px;
width: 1000px;
}

lo tuve que colocar en:

#subnav {
margin: 0 auto;
padding:0;
width: 1000px;
}

y funciono !! solo que al aumentar la resolucion se ve todo alineado y parejo pero al acercar la resolucion a la normal 1024x728 el buscador se mueve poquito a la izquierda.

pero de ahy en fuera todo perfecto muchas grasias jmiur eres de lo mejor con tu ayuda aprendo mas cosas.. thanks you

Responder
JMiur  

Eso del buscador puede ser porque hay alguna otra propiedad que lo influye; habría que revisar una por una e ir probando, puede ser un padding o un margin o unna dimesión.

Responder
Admin  

grasias jmiur, por tu ayuda :D

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR