38

Dividir la cabecera del blog en las plantillas de Diseño

Habíamos visto hace algún tiempo como dividir el header (cabecera) del blog para las plantillas anteriores a las del Nuevo Diseñador de Blogger.

En esta entrada veremos como hacer lo mismo para las plantillas del Nuevo Diseñador, lo que nos permitirá conservar el header del blog y al mismo tiempo, disponer de un espacio para añadir un gadget a su izquierda, que servirá para incluir un buscador, un banner de publicidad, enlaces a redes sociales, etc.

[1] Colocamos unas líneas en el CSS de la plantilla, siempre antes de ]]></b:skin>, y en este caso estaría bien localizar esto:

/* Header
----------------------------------------------- */

Y justo debajo colocar el CSS necesario:
.header {width:50%;
float: left;
margin:0 auto 2% ;
}
.header2 {width:50%;
float: right;
margin:0 auto 2%;
}

[2] Vamos entonces bastante más abajo en el código de la plantilla y localizamos esta parte del código:

<div class='region-inner header-inner'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Título del blog (cabecera)' type='Header'/>
</b:section>
</div>

Añadimos ahí lo que muestro destacado en negrita:

<div class='region-inner header-inner'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Título del blog (cabecera)' type='Header'/>
</b:section>
<b:section class='header2' id='header2' showaddelement='yes'/>
<div style='clear: both;'/>

</div>

[3] Guardamos cambios y comprobamos la vista en Diseño, donde ya deberíamos ver la cabecera dividida en dos partes:

Doble header vista Diseño

[4] Una vez añadimos un nuevo gadget al lado del header, veremos algo como esto en la vista del blog:

Doble header en vista del blog

[5] Como vemos en esta imagen de ejemplo, el título del blog al tener un tamaño de texto muy grande, se ve en dos líneas. Corregimos esto desde el Diseñador de Blogger, donde pinchando en "Avanzado" - "Titulo del blog" podemos ajustar el tamaño del título:

Tamaño del título en el doble header

El resultado sería entonces algo así:

Título adaptado en doble header

Esto sucede porque lo que pretendemos es que los dos gadget, cabecera y el nuevo añadido, sean iguales en sus proporciones.
También podríamos necesitar que uno de los dos tuviese mayor tamaño que el otro, según lo que vamos a colocar ahí, si por ejemplo el gadget header va a ser mayor que el gadget header2, quizá no necesitemos reducir el tamaño del texto desde el Diseñador.

En caso de querer modificar las medidas de cualquiera de los dos gadget, lo haríamos en el CSS añadido en el paso [1] cambiando el valor de width:50%; y teniendo en cuenta las proporciones, es decir, si al header le damos un width mayor, reducimos en header2 el mismo porcentaje que hemos añadido en header o viceversa.

Entradas Relacionadas:

38 comentarios:


navegante bipolar

Hola Rosa, es juntamente lo que necesitaba.
Gracias Rosa por tu blog, me es muy útil para la confección del mio.

Un saludo ;)

Mariangeles

Hola Rosa: Que bueno! gracias ya lo agreguè en favoritos para hacerlo este fin de semana.
Un beso

Magoplup

Rosa que bueno saber que estas de regreso :D pense que seria mas tiempo menos mal que no fue asi por que te extrañaba :(

Gildo Kaldorana

Muchas gracias Rosa.
Siempre cosas interesantes en tu blog.
Saludos

Antonio

Hola, rosa ¿todavia sigue con este blog?

Amanda R.

Muy útil, Rosa! Muchísimas gracias :D
Creo que próximamente haré un blog de pruebas y lo probaré, porque la verdad, tiene muy buena pinta!
Un saludo :)

AdminPrime

como simpre mal ubicado no se donde poner mi comentario : ( bueno la cosa esta asi, quiero poner al ladito de mis Tags o etiquetas iconos diferentes para cada etiqueta como lo puedo hacer ??
mi web: http://oficial-web.blogspot.com/

AdminPrime

hola rosa me podrias ayudar a poner imagenes al lado de mis etiquetas en mi pagina pero que en cada etiqueta tenga una imagen diferente

Rosa

Magoplup ¡Gracias! :D

Rosa

AdminPrime Mira en Vagabundia, sino recuerdo mal hay una entrada allí sobre eso.

Anairo Draculesti

Hola Rosa, me gusta mucho tu blog.
Tengo un problema con un plantilla:

"Sólo puede existir una única máscara en la plantilla, y hemos encontrado: 0"

No ´se cómo arreglarlo, aquí está el código:

"< aquí va script>document.write(unescape("%3Cstyle%20type%3D%22text/css%22%3E%0Abody%20%7B%20background-image%20%3A%20url%28%22http%3A//i711.photobucket.com/albums/ww111/ShabbyBlogs/FunkyFlora.jpg%20%22%29%3B%20background-position%3A%20center%3B%20background-repeat%3A%20no-repeat%3B%20%20background-attachment%20%3A%20fixed%3B%20%7D%0A%3C/style%3E%0A%3Cscript%20type%3D%22text/javascript%22%3E%0Avar%20shabby_div%20%3D%20document.createElement%28%27div%27%29%3B%0Ashabby_div.setAttribute%28%27style%27%2C%22position%3A%20absolute%3B%20left%3A%200px%3B%20top%3A%2030px%3B%20z-index%3A%2050%3B%20width%3A%20150px%3B%20height%3A%2045px%3B%22%29%3B%0Ashabby_div.innerHTML%20%3D%20%27%3Ca%20target%3D%22_blank%22%20href%3D%22%20http%3A//www.shabbyblogs.com%22%3E%3Cimg%20border%3D%220%22%20src%3D%22http%3A//i711.photobucket.com/albums/ww111/ShabbyBlogs/ShabbyBlogs.jpg%22%3E%3C/a%3E%27%3B%0Adocument.getElementsByTagName%28%27body%27%29.item%280%29.appendChild%28shabby_div%29%3B%0A%3C/script%3E"));"

Gracias, y muchos besos.

http://leanansidhe-blackroses.blogspot.com/

Rosa

Anairo Draculesti Y ese código de donde sale?... no hay ninguna plantilla que yo sepa con un código así :O

JMiur

Hola Rosa. Bienvenida :-)

No sé cómo te atreves con estas plantillas nuevas; yo me sigo rehusando pero, voy guardando los artículos; me parece estar volviendo cuatro años atrás cuando todo era muy misterioso y yo guardaba estas entradas para estudiarlas (y aún las conservo).

No estoy seguro pero creo que el error al que se refiere Anairo Draculesti ocurre cuando se quiere agregar una segunda etiqueta <b:skin>

Rosa

JMiur ¡Gracias! :D
Y no, no me atrevo... cada vez que intento me dan más pavor, pero bueno, alguna cosilla fácil como esta aún se puede lograr.

Si, creo que ese es el error, y creo que está tratando de colocar uno de esos códigos construidos para pegar y cambiar el background de forma automática... algo así :S

..NaNy..

Hola Rosa me gustaría que me dijeras si puedes por que no se ve el lapicero tengo una pagina nueva de las de google. Gracias

Nicolás

Hola Rosa,

Perdona por dejarte la consulta en este post pero es que no tiene nada que ver con ningún post. Se me acaba de plantear un problema que no sé como resolver. Por lo visto algún fichero ha debido penetrar en el html del blog que me crea enlaces a otras páginas utilizando palabras de mis post. Al mismo tiempo me abre ventanas con publicidad que me llevan a otras partes. En la parte superior aparece la alerta de explorer que bloquea intentos de entrada. Ha eliminado cookies y archivos temporales pero no lo consigo solucionar. ¿Qué puedo hacer?

pepa

hola Rosa
tengo un problema con mi blog, desde hace unos dias la barra lateral se me ha desplazado abajo y me gustaria poder restaurarla, cuando accedo a diseño se ve todo normal y al meter una nueva entrada en vista previa también, no sé como hacerlo, por favor si sabes algo me lo dices
http://lasmatesdemicole.blogspot.com/

Claudio Martín Casco

Hola Rosa, fuera de tópico en consulta de estetica: en mi blog (www.masalladeldesierto.blogspot.com) modifique la plantilla con «leer más» de acuerdo a tus instrucciones. También la barra de menús con submenues. La pregunta es ¿puede verse -siempre con leer más- diferente el último post publicado? Digamos entero?
Muchas gracias,
Bendiciones

Rosa

..NaNy.. No tengo ni idea, solo decirte que a veces pasa si... mira si esto te sirve:
http://elescaparatederosa.blogspot.com/2008/05/recuperar-el-lapiz-de-edicion-y-el.html

Rosa

Nicolás Eso sale de alguno de los contadores en la sidebar... suelen hacer eso, a comienzo todo bien, una vez que alcanzas cierto número de visitas, la publi encubierta se dispara... prueba a retirarlos, pero casi al 99% que ese es el problema...

Rosa

pepa Si no has hecho nada, entonces es algo que has colocado en una entrada o en la sidebar que ocupa más del ancho disponible... revisa eso.

Rosa

Claudio Martín Casco Se puede, pero no es algo que pueda explicar en un comentario... mira en Ciudad Blogger (enlace en mi sidebar).

Rapator

Hola elescaparatederosa. Solo agradecerte tu ayuda desinteresada y el tiempo que nos dedicas. Muchas cosas he aprendido de tu blog y he aplicado. Si puedes, te das una vuelta y le echas un ojo.
http://losbiciraptors.blogspot.com/
gracias!

the piinwy!!

hola rosa, intento hacer un blog para unos amigos, la cabesera me funciono bien pero al final decidi kitarla y solo dejar una, ahora intento hacer que el formulario de comentarios se encuentre simpre a la vista, es de decir que todo el tiempo sea visible como el tuyo,

muchas gracias por inumerables ayudas, espero me puedas dirigir a la entrada que me ayude

http://thepiinwy.blogspot.com/
http://pnw13.blogspot.com/

grcias

Abre Paréntesis

buenas rosa. oye una cosita a ver si saber resolvermela. Lo que tienes abajo a la derecha la flechita para subir arriba y bajar, como hago para ponerla en mi pagina? pero no con esa funcion sino simplemente lo que quiero hacer es que la cabecera de la pagina se quede inmovil como una capa fija. Solo me interesa el efecto de dejarla fija en una parte de la página, es decir, poner una foto o una capa que me haga de cabecero y que se quede siempre fija aunque muevas las barras de desplazamiento al igual que tienes tu puestas esas dos flechas. Probe el css con fixed pero no lo consigo. tus flecha se quedan inmoviles aunque subas o bajes el scroll vertical, es decir, que siempre está visible en todo momento en tu blog. Pues querría hacer lo mismo pero sin la funcion javascript, simplemente el atributo para que quede estancada en una parte determinada de la página. muchas gracias de antemano espero tu respuesta.

Sergio

pero en este caso saldrian de diferentes colores el haeder, por ejemplo en mi blog lo tengo con un degradado verde manzana me seria muy dificil igualarlo al menos que guarde la imagen y la corte a la mitad jejeje ummmmm lo voy a probar y te aviso
un beso de paraguay

Rosa

the piinwy!! Mi formulario no está siempre a la vista, se ve cuando accedes a una de las entradas, como el de todo el mundo que usa Blogger, de hecho no puede ser de otra forma...

Rosa

Abre Paréntesis No se si se podrá obtener un resultado optimo o no, nunca he probado algo así... desde luego sería desde el CSS, pero no creo usando el header del blog... así de repente se me ocurre que habría que prescindir del header en el código y usar un gadget en su lugar... no se, ya te digo nunca me he planteado algo así...

chicashot1

hola rosa..dime como hago esto mismo pero en lugar de dividir la cabecera agregar mas espacio para gadget debajo de las entradas o al costado..desde ya gracias!

Rosa

chicashot1 En las plantillas del Diseñador, eso lo haces desde el mismo Diseñador... lo que te deja allí claro está.

PIBA64

hola Rosa, no tiene nada que ver con esto , pero quería preguntarte, por qué tú no has cambiado a un dominio propio?
He puesto un chat en mi blog y se me ha colado un indeseable, que hace lo que quiere con él.
Me habían dicho que para evitar hackeos y demás era muy conveniente tener dominio propio.
Me lo puedes confirmar?
Te lo agradecería inmensamente, porque estoy muy preocupada, este "tipo" ha hackeado ya varias cuentas a mis lectores, y no piensa detenerse ahí.

Rosa

PIBA64 Nada que ver con tener o no dominio propio... lo que hay que hacer siempre es tener precaución y no revelar datos personales a nadie... si alguien te pregunta tu msn por ejemplo y usas ese mismo msn para tu cuenta en Blogger, es un dato que ya tiene... si además revelas algo como tu apellido o edad y de casualidad usas esos datos para la contraseña, no es difícil se hagan con tu cuenta...
Pero nada que ver el dominio.

Somos Brujas

rosa, ya pude hacer funcionar en mi plantilla los codigos del post "
Mensaje de bienvenida sobre las entradas", no se que hacia mal antes, pero probe de nuevo y funcionó ok, una vez mas quiero agradecerte todo la información que pones a nuestro alcance para que podamos mejorar nuestros blogs, saludos desde argentina.
gustavo

- Bella -

¡Hola Rosa! :)

Te asalto con una nueva dudita que se me ha ocurrido a causa de esta nueva entrada. Verás, quisiera saber si es posible en la plantilla MÍNIMA dividir la cabecera de lo que es el cuerpo del blog. Quiero separarla del cuerpo y las sidebars del blog, pero que estos se queden tal cual.
Si lo consigo podré aplicar el cambio que quiero hacerle. ¿Sabes si es posible? Si es así, ¿Cómo podría hacerlo?

Muchas gracias.

Rosa

- Bella - "Dividir la cabecera de lo que es el resto del blog" :O... explícame eso de forma más concreta...

- Bella -

Sé que me explico fatal, menudo fallo este...

Verás. La plantilla mínima (al menos como la tengo) es un solo ''cuerpo'' es decir, tengo como si estuvieran pegados, la sidebar, el cuerpo del blog y la cabecera. Sé que las sidebars se pueden separar (y enmarcar incluso) del cuerpo del blog y que queden en sí, una columna-cuerpo-otra columna. Lo que yo quiero es hacer eso pero con la cabecera. Separarla del cuerpo del blog, que no estén pegados ''en una misma cosa''.

En verdad y para dejarme de vueltas, la quiero como la tienes tú en esta misma plantilla: Separada del menú, del cuerpo del blog y de la sidebar.

Siento las molestias. ¡No sé explicarme!

LRH Arquitectura

Buenos días rosa! En primer lugar decirte que tienes un blog estupendo, estoy creando el mío y me está siendo de gran ayuda.

Ahora lo que tengo es un problema. Estoy intentando dividir la cabecera pero me está siendo imposible con los datos que nos has facilitado. Mi plantilla es la del diseñador la tercera de Picture window. Si pudieras echarme una mano te un agradecería. Un saludo

LRH Arquitectura

Hola Rosa. Perdona que te moleste otra vez pero ya está! Lo conseguí! Me falta alinearlos por arriba pero, menos es nada. Gracias

Publicar un comentario en la entrada

Si vas a dejar una consulta, procura tener habilitado tu perfil en Blogger o deja la url del blog a revisar (no enlace).

Los comentarios están siendo moderados.

:) :(( :( :P :D :$ ;) :I :X :O |O :S