JMiur [E]

La cabecera de un blog de Blogger parece ser un área restringida, uno de los códigos más extraños que se incluyen de manera automática en cualquier plantilla. En los inicios, el código era un poco más sencillo pero, desde que han decidido que deben ayudarnos a colocar una imagen de fondo en lugar de los textos con el nombre y la descripción, lo han transformado en un galimatías incomprensible.

Por eso es que no solemos meternos mucho con él. Una vez que logramos que la imagen funcione, lo olvidamos. Sin embargo, hay algunas posibilidades que podrían explorarse. Una de ellas es incorporarles la posibilidad de agregar elementos de cualquier tipo, como si fuera la sidebar.

Para esto, lo primero que debemos hacer es dividirlo en dos; por ejemplo, del lado izquierdo dejaremos el header normal y a la derecha agregaremos la nueva sección. Esto, lo haremos en dos pasos sencillos, modificando el CSS y luego agregando la nueva sección en la plantilla.

Blogger se basa en el concepto de secciones que no son otra cosa que áreas rectangulares donde podemos agregar elementos (widgets). El header no es otra cosa que una sección como cualquier otra. Estas secciones, podemos crearlas en cualquier parte, agregándoles los atributos ID y CLASS para poder establecer sus propiedades con CSS:
<b:section class='unaClase' id='unNombre' showaddelement='yes'>
</b:section>
Por defecto, el header tiene una serie de propiedades, y dos de ellas son fundamentales:
#header-wrapper {
margin: 0 auto;
width: valorpx;
...
}
#header {
...
}
#header-wrapper es el rectángulo total, el que dividiremos en dos partes, allí deberemos mirar el valor de la propiedad width que nos dice el ancho total disponible.

#header es un bloque interior, el que contiene la imagen o los textos y, por defecto, ocupa el mismo espacio que el bloque contenedor. Lo "achicaremos" a una medida arbitraria, menor que el total y lo haremos flotar a la izquierda; además, agregaremos un segundo bloque que tendrá las mismas propiedades que el anterior pero, con una medida diferente y flotará a la derecha:
#header {
float: left;
width: 600px;
[... otras propiedades ...]
}
#header-derecho {
float: right;
width: 200px;
[... otras propiedades ...]
}
Luego, SIN expandir los artilugios para no complicarnos la vida, buscamos el siguiente código:
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='nombre (cabecera)' type='Header'/>
</b:section>
</div>
Y lo modificamos, agregándole la nueva sección:
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='nombre (cabecera)' type='Header'/>
</b:section>
<b:section class='header' id='header-derecho' showaddelement='yes'>
</b:section>
</div>
Si guardamos la plantilla, veremos que esta nueva sección ya está habilitada en la solapa Elementos de la página y, por lo tanto, ahora podemos agregar cualquier cosa.


Hay un ejemplo que puede verse en mi blog de pruebas, donde simplemente he colocado un elemento imagen pero, las posibilidades son muchísimas.

27 comentarios:

Fernandooo1  

Ohhh! Había visto ese código, lo monée y ni se me ocurrió lo que presentas aquí. ¡Genial! Lo estaré probando a ver qué se le puede hacer.

Excelente.

Responder
Dagronk  

La verdad es que estaba un poco confundido con el tema de los banner (te escribi y has aclarado mis lagunas pantanosas) un saludo.

"Za dashu snaku Zígur"...

Responder
cyberbloggero  

Fantástico. Siempre me pregunté como se hacía para agregar más elementos, aparte de la imagen.

Saludos.

Responder
Leandro  

Volver a titulo optimizado en blogger:

hola jmiur, hoy mirando el blog de Spamloco me di cuenta que despues de modificar la plantilla seguia con titulo optimizado.

Mire el codigo y vi 2 titulos, el primero estaba optimizado, el segundo era comun.


Despues intente hacerlo, y funciona, inclusive para el buscador si no me equivoco. creo


Solo hay que poner arriba del < head sin expandir plantilla de artilugios, el anterior codigo que usabamos para optimizar, y ya nos aparecera optimizado.


Se lo puede sacar y volver a poner


Crees que el buscador lo tomara al primer titulo? el optimizado??

O sera al 2?

Habra que hacer pruebas.

Responder
Anónimo  

Comprobado: Funciona e indexa correctamente en blogger : D

http://www.google.com.ar/search?hl=es&q=As%C3%AD+como+bloquean%2C+desbloquean...&btnG=Buscar&meta=

El post de spamloco ya fue indexado asi.

Saludos

Responder
Anónimo  

Tambien se puede eliminar el titulo despues del head, y sigue sin problemas, google reconocera el primero.

Responder
El Entrompe  

hola, la verdad q esto resuelve un par de cosas q tengo en mente pero estoy medio perdido -jejeje-, te escribo y cuento con detalle, menos mal q no cobras sino ya estaria arruinado, gracias, abrazos...

Responder
Gem@  

Buena explicación ;)

Responder
GUIA POCKETBLOG  

jajaj ese header me vuelve loco! va, me volvia... pertenezco al mundo del periodismo grafico y cuando sacamos en el laburo el blog, intentamos de todo para sacarlo. Ahora, aprendimos a vivir con el jajaj.

Bueno te cuento que hace tiempo que visito el blog y queria contarte que trabajo para la primer revista sobre la web 2.0. La misma trata sobre toda expresion que se encuentre a un simple click del mouse, ya sea un escritor por blog o un fotografo por flickr, para darte unos ejemplos. Cada ejemplar tiene un concepto integrador en el cual los blogggers participan enviando material de sus blogs que se relacione. Bueno, queria invitarte a ver si querias participar, el proximo nro es METROPOLIS y sale a las calles de bs as en Mayo.

Te dejo la direccion del blog para que veas un poco el contenido del mismo. Cada nro tiene un Gadget!!

Bueno, te dejo, si conoces a alguien que le pueda llegar a interesar la revista para participar haceme el favor de comentarle, el boca en boca es importante.

Muchas gracias!! ya nos veremos devuelta por aqui.

Saludos!!

Pablo.

www.guiapocketblog.blogspot.com

Responder
JMiur  

La idea es sencilla y permite poner cualquier cosa así que todo depende de la imaginación de cada uno :)

Leandro: Sé que Aejandro, de SpamLoco estuvo modificando el tema de los títulos. Ayer a la noche quedaron ubicados arriba de &l;thead> y,a aparentemente, todo funciona bien pero, eso depende de cada blog, de cada plantilla. En mi caso, es imposible hacerlo sin que se descompagine todo. No tengo idea por qué :(

El Entrompe: acabo de recibir el mail y lo miraré.

GUIA POCKETBLOG: iré a er de que se trata, gracias por el ofrecimiento :)

Responder
→ Sharys'ce Web  

ohhh bastante nice!!

Responder
rosadepaz  

Hola, tengo una duda como hacer para agegar sobre el header una barra de adsense... x q no puedo.... farandularosa.blogspot.com, no encuentro donde ponerlo en el htm.. por favro gracias

Responder
JMiur  

Deberías buscar el final del header:

-------- AQUI DEBE IR
</b:includable>
</b:widget>
</b:section>

O usar este otro bloque que está justo debajo del header.

Responder
Luis  

JMiur :(, ayer ví un post en el que explicas cómo configurar el blog para que la imagen del header cambie aleatoriamente o por una imagen en específico según la hora del día, he buscado y buscado y no lo consígo, me volveré loco :(, ayúdame friend!

Si no lo estuviese buscando seguro lo encontraría, detalles de la vida...

Responder
JMiur  

Pués está en este post y tampoco me resultó fácil encontrarlo :D

Responder
Antonio Cardador  

Hola, necesitaría una ayuda para incorporar un segundo header en mi blog, a ver mi idea es incorporar un espacio intermedio entre el header y el blog y la sidebar, donde están los adicons, con el objetivo de introducir en ese espacio un widget de post destacados como en esta plantilla: (la zona azul es la que quiero meter) http://btemplates.com/2009/09/02/chucky/demo/

Mi página es la siguiente: http://poetizame.blogspot.com y querría meterlo entre el header qu eestá en verde y el espacio de los favicons y la sidebar.

Me podrías ayudar con los estilos??, ya te pasaría por mail si eso mi hoja xml para que la analizaras. Muchas gracias.

Responder
Juan Martin  

Jmiur,necesito que me ayudes a centrar una imagen que he colocado en el header left del header del blog y no me aclaro por mucho que toque,orientame por favor que estoy desesperado.

Responder
JMiur  

Antonio: Copia los estilos del header que ya tienes y agrégalos con otro nombre, de ese modo, seran iguales y es la forma de comenzar. Para ayudar, debería verlo puesto y que me dijeras qué quieres cambiar.

Juan: No sé exactamente lo que dice tu plantilla pero, si se trata de centrar esta imagen:
http://1.bp.blogspot.com/_-VPloPWlkuw/S6psOQ43qbI/AAAAAAAAAPQ/KkR38wdZS8I/s1600/cooltext449122166.png

Puedes hacerlo en la propeidad background:
#header-wrapper {
.......
background: transparent url(xxxxxxx) no-repeat scroll 50% center transparent;
}

Responder
Juan Martin  

JMiur me sirvio aunque no la quería en el centro del header,sino que estuviera centrada en la parte izquierda del header puesto que está dividido,le puse el % a zero y ha quedado mas o menos bien,gracias por tu ayuda,un saludo.

Responder
JMiur  

Con esto, se centra:
background: transparent url(xxxxxxx) no-repeat scroll 50% center transparent;

pero, ahí mismo en lugar de usar 50%, se puede usar cualquier otro valor; por ejemplo:
background: transparent url(xxxxxxx) no-repeat scroll 200px center transparent;

coloca la imagen de fondo a 200 pixeles de la izquierda. De ese modo, se controla la posición de modo preciso.

Responder
Erik  

Hola JMiur muy buena explicacion solo que no me sale:((
ya lo he intentadi como 100 veces y hasta que se puso arriba pero esta como que muy alejado y queda fuera de lugar:(

LA plantilla de mi blog es esta http://btemplates.com/2009/blogger-template-inove/demo/

mira te dejo como queda siguiendo tus pasos...espero me puedas ayudar...esque quiero poner un banner ahy..

Asi es como queda
http://img828.imageshack.us/img828/5782/asiqueda.png
help me:(

Responder
Erik  

hola JMiur
Por fin despues de varios meses buscando encontre tu blog donde explicas como añadir un gadget extra al header.
cuando lo hago como me dices me queda deslineado porque??
que estoy haciendo mal??
mira te dejo una imagen de como me queda.
HELP ME:(
http://img828.imageshack.us/img828/5782/asiqueda.png

por cierto muy padre tu blog me gusta mucho, muy original.
my plantilla es
http://btemplates.com/2009/blogger-template-inove/demo/

Responder
JMiur  

Pués hasta ahí esta bien, No sé qué quieres poner, debería verlo oline pero, para ubicar algo en cierta posición usa margin y separas el elemento cierta cantidad de pixeles, por ejemplo.

Responder
Tekenika  

Hola
Soy bien novato en el tema. Trato de seguir estos tutoriales para modificar mi blog en construcción,
pero no encuentro el mismo lenguaje o instrucciones. Es como si se tratara de otra versión o sistema. Concretamente, trato de redimensionar un cuadro que tiene la plantilla debajo del encabezado o header, para que tenga el mismo ancho que el cuerpo de contenidos, de modo que la barra lateral suba. No encuentro forma de hacerlo. Gracias y saludos

Responder
JMiur  

No veo cual es el sector al que te refieres. Veo un header y debajo veo las entradas y la sidebar.

De todos modos, si lo que queires es personalizar la plantilla, no uses las nuevas ya que no están pensadas para eso y modificar detalles de diagramación es muy complicado. Están pensadas para utilizar las opciones que da el Diseñador y no mucho más. En todo caso, usa una plantilla común como la Mínima.

Responder
Gabriel Staffa  

Hola!
Quisiera colocar un gadget pero arriba de la cabecera...se puede???....me estoy volviendo loco y no puedo encontrarlo por ningun lado!!!!!!!.....HELP!!!!!
Gracias!

JMiur  

Sí, se puede poner; no hay ningún problema en agregar un elemento. Verifica que la sección no esté bloqueada o tenga indicado un máximo de elementos.

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