Blogger. Cómo eliminar/sustituir la cabecera.
En un principio puede parecer lo más tonto del mundo quedarnos sin cabecera, sobre todo teniendo en cuenta el trabajo que seguro nos costó diseñarla. Lo que ocurre es que no es exactamente eso lo que vamos a hacer. Más bien vamos a eliminar el artilugio de cabecera de Blogger para poder poner otra cabecera más flexible que se pueda adaptar a nuestro diseño.
La cabecera que viene de serie en las plantillas habituales, sólo nos da la opción de colocar una imagen debajo del texto que corresponde a nuestro título y descripción , o sustituir todo por una imagen que será lo único visible. Como en una imagen creada por nosotros podemos poner también texto, quizás sea esta última la opción con más posibilidades estéticas.
La cabecera de serie en las plantillas habituales, viene como un WIDGET y por eso es tan poco manejable. Además, es un elemento en el que a priori no tenemos la opción "eliminar" por lo que parece que no es fácil de quitar. Sin embargo, si buscamos en nuestra plantilla -sin expandir artilugios- encontraremos el código correspondiente...
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Cosicas de prueba y prueba y prueba (cabecera)' type='Header'/>
</b:section>
</div>
MAXWIDGETS indica la cantidad de artilugios máximos que admite esa sección. Como suele venir con 1, pues no nos admite añadir más. Pero es que también, el SHOWADDELEMENT que sirve para que salga el "AÑADIR UN GADGET" en una sección, está también por defecto puesto en NO, por lo que no nos aparece esa opción. Personalmente prefiero quitar estos dos atributos siempre que los veo. Así podremos añadir más cosas sin mayores problemas, sea la sección que sea.
Pero la palabra mágica para que NO se pueda quitar la cabecera es LOCKED. Este atributo (con TRUE) provoca que el artilugio quede bloqueado y no pueda ser movido de su posición (en la parte superior de la plantilla) y que tampoco pueda ser eliminado. Si lo quitamos o lo ponemos en FALSE, ya podremos moverlo o eliminarlo. Tranquilos que siempre lo podremos volver a poner. Precisamente en la lista de gadgets Blogger prefabricados (Lo Básico) hay uno llamado sin más rodeos Cabecera. Está el último pero está.¿Y ahora que nos hemos quedado sin cabecera qué...? Pues ahora sólo tenemos que Añadir un Gadget en esa misma sección, tipo HTML y poner lo que nos dé la gana: una imagen, un texto, una imagen de fondo y un texto, un gif animado, un vídeo flash con nuestro nombre lleno de estrellitas (¡puajj!), un gif animado, una lista (UL), un widget conseguido de otro servicio,... en fin, ahora sí podemos poner lo que queramos.
Sólo a modo de ejemplo, un par de opciones:
- podemos colocar una imagen y que sus elementos sean enlaces usando un mapa de imágenes (puntero por encima para simulación)
- podemos generar una tabla y colocar un fondo común y/o un fondo por celda y luego los elementos que queramos, incluyendo incluso efectos rollover.
NINGUN DERECHO RESERVADO
71 comentarios:
Que bueno, eres un genio
No creas... ;)
¡Que casualidad! Justo desde hace dos dias la cabecera de mi blog confronta problemas , yo la veo sólo como un rectángulo negro , voy a buscar bien la información por si en tu blog está la corrección a este problema , pero como soy novata :P ¿será que te puedas dar una vueltita por mi blog a ver si detectas que sucede?... yo no he querido modificarle porque me daba la impresión que eran un error de Blogger pero ya hoy he visitado varios blogs y les veo funcionando perfectamente.Quiero también decirte que me encanta tu blog es espectacular , es hiper hiper lindo e instructivo , gracias por compartir tus conocimientos , saludos desde Venezuela :)
Hola Alba. Creo que el problema es simplemente que ha desaparecido de su alojamiento la imagen de fondo que tenías:
http://img409.imageshack.us/img409/9869/kapli17hp6rg4.jpg
Tendrás que usar otra...
Oloman sí que es difícil manejar el header...pruebo esta vez en otro blog, muy buena tu entrada. Espero ganen el premio 20 blogs tu o Iván: no estoy de acuerdo con los demás en la categoría diseño...pero es así...saludos!!!
Graciela, no es difícil, lo que ocurre es que intenté explicar cómo está construido el HEADER, para que se entendiera bien cómo "destruirlo". Lo de después son sólo unas ideas creativas.
Jiji, muy útil entrada Oloman, grácias otra vez
Mira, me preguntaba si hay alguna manera de escribir en mi blog con estilos diferentes de fuentes a las que vienen por defecto
Espero tu respuesta, grácias
Claro, capitan z. Busca en la plantilla dónde tienes los atributos FONT-FAMILY y cambias las fuentes por las que desees. Ojo! Utiliza fuentes usuales u otros usuarios que no las tengan no las verán igual.
Muchas gracias! me servio mucho, precisamente algo que estaba buscando para moverle a mi blog lo resolvi con los trucos de este post.
Saludos.
Brillante lo tuyo!!
ME encanta este blog y quiero que muera "Lo que me toca los cojones". No es justo, éste debería ser el primero.
¿Alguien no está de acuerdo?
Hola Oloman,
Hechando un vistazo en tu blog me he dado cuenta de que cuando pasas el puntero sobre un titulo de una entrada se selecciona como si estuviera marcado por un rotulador, ¿cómo lo haces?
Grácias
Maritoñi: ¿Sobre cual de tus cuatro afirmaciones preguntas?
1º De acuerdo ;)
2ª No estoy de acuerdo
3ª No estoy de acuerdo
4ª No sé si debería ser el primero
Mercier, se trata de un efecto para el HOVER de la clase que controla los títulos de los posts (normalmente POST.H3), en el cual he colocado una imagen de fondo (background:url(...).
En el siguiente post (párrafo "Jugando con el fondo") tienes explicado como hacer ese y otros efectos para destacar los enlaces y el título... es un enlace.
Hola. Si quieres ganar 50 € con tu blog con enlaces de texto y sin necesidad de clics, dímelo. Un cordial saludo. Javier
Te invito a participar en el concurso de mi blog llamado Boox de Blogs aqui como registrarte.
El registro: Dura del 15 de Agosto al 22 de Agosto y consta de que los blogs que quieran participar se registren dejando un comentario con los siguientes datos:
Nombre del blog: WinBoox
URL del blog: http://www.winboox.blogspot.com
Tema del blog: Diversos temas
E-maill - WinBoox@hotmail.com
ASEPTO EL CONCURSO
Para ver mas info entra a
http://winboox.blogspot.com/2009/08/llega-el-concurso-boox-de-blogs-as.html
Muy útil la información, se agradece.
Quería aprovechar también mi comentario para felicitarle por este meritorio segundo puesto en la clasificación y desearle mucha suerte para el concurso.
Un cordial saludo desde UNIVERSO DE MARTI
Excelente blog con buenas y nuevas ideas. Keep going!
Saludos :)
Descubre Irlanda
http://descubreirlanda.blogspot.com/
Hola, está super su blog!!!, yo lo que quiero es poner dos imágenes en la cabecera de mi blog, una la izquierda y otra a la derecha del título, una en formato jpg y la otra es un gif animado, se puede hacer eso??? puede ayudarme??? mi blog es: http://jedicerocool.blogspot.com/
Se puede hacer desmontando la cabecera tal como se explica aquí y luego añadiendo un nuevo elemento tipo HTML.
En ese elemento puedes colocar IMAGEN-TITULO-IMAGEN sin ningún problema. Si tienes algún problema de formato puedes recurrir a usar una tabla y tienes también un enlace en el post de cómo construir una.
Haber si entendí:
1.-Desmonto la cabecera.
2.-Añado un gadget donde estaba la cabecera y dentro del gadget el nuevo elemento tipo HTML.
3.-En ese elemento coloco IMAGEN-TITULO-IMAGEN.
4.-Si tengo algún problema de formato uso una tabla dentro del nuevo elemento HTML que está dentro del gadget.
Corrígeme si me equivoco en algún punto por favor.
LO LOGRÉ!!! (^_^)
Si alguien quiere ver:
El Retorno del Jedi
No pude contestarte afirmativamente en su momento Cero Cool, pero ya vi que te apañaste ;)
hice lo que dice el post pero al momento de colgar el nuevo titulo en el gadget html me qda un espacio como de dos centimetros entre el titulo y la imagen del fondo..por lo que no se ve bien..como le hago para que el gadget quede sobre la imagen de fondo??
Hmm. No sé que hiciste, si instalar la cabecera como artilugio Blogger o borrar esta y poner un HTML. Supongo que lo segundo, pero no puedo averiguar dónde está el problema si no dejas un link.
De todas formas, vamos a suponer que lo que ha pasado es que has tratado imagen y texto por separado. Para que uno quede encima de otro, hay que usar STYLE="BACKGROUND:URL(direc_imagen);" y no la etiqueta IMG ¿es eso?
Tu blog es buenisimo !!!
Felicitaciones !!!
Sigue asi !!!
Graciaaaas!!!! Me estaba sacando de quicio no poder poner otra cosa ¬¬
Buenisimo este post!!!
Uno que sabe algo de programacion sabe que la mayoria de las cosas se pueden hacer... solo es necesario saber como hacerlas.
Gracias por enseñarnos.
En este caso, es sólo la explicación de cómo hacer algo, complementado con una idea de diseño. Luego cada cual la aplica como su imaginación le permita.
he eliminado la cabecera en los blog que tengo desde el principal y me queda un trozo de la zona azul aun en pantalla, las cabeceras para los tres blog, son las mismas, me elimina titulo, pero me deja un trozo
inserto un Gadget el de html, doy a enlace y pongo la direccion de la imagen, y no me la muestra, por que?
De momento no puedo ver ninguna de tus cosas porque tienes un problema mayor en el blog. Espero que hicieras copias de seguridad, aunque creo que simplemente se trata de un punto y coma que te falta al final del DISPLAY de este trozo.
<style type="text/css">#navbar-iframe { display:block; }
</style>
ya me dí cuenta, en internet explorer se ve bien pero en firefox no hay manera
Ya veo que todo vuelve a funcionar bien. No sé qué es lo que será lo que decías del hueco azul, pero supongo que será el de la navbar.
Con respecto a lo de la imagen, si está alojada en Blogger, a la dirección del enlace le tienes que quitar el guión y la h (-h) que lleva detrás de 1600.
Por si me vuelve a pasar me puedes corroborar lo siguiente:
para hacer copia de seguridad de la plantilla es en:
diseño, edicion html, descargar plantilla completa.
y para restaurarla, en diseño, edicion html y Carga una plantilla desde un archivo de tu disco duro busco la copia de seguiridad y darle a subir es correcto?
ves donde está el titulo que pone tecnologias de la información y la comunicacion, pues en los dos blog que tengo enganchados a este donde entran en modo privado ahí he quitado la cabecera pero me sigue mostrando un centimetro en azul como la cabecera que tiene el título anteriormente mencionado, y si pongo una imagen, no me la muestra. me sigue poniendo el centimetro en azul.
Sí Luz, lo de las copias es de la forma que has explicado. Con respecto a lo del hueco, te decía que sólo se me ocurre que pueda ser la navbar oculta que reserve el espacio o que la sección de la cabecera mantenga algún margen que provoque eso. Como estoy a ciegas es difícil acertar.
si me dejas tu mail te agrego para que puedas ver el de Ciclos formativos por ejemplo
de todas formas creo que es lo que comentas porque antes intentaba poner una imagen y ese trozo siempre me lo dejaba debajo de la imagen
me gusta la cabecera que tienes en http://oloman-cosicas.blogspot.com/ con tantos botoncitos cuando solucione todo lo que tengo entre manos lo intentaré
Lo de los botones es el último ejemplo de esta misma entrada. Si seleccionas el trozo y ves el código fuente de esa parte, podrás ver que es fácil montarlo.
he puesto uno en en el blog de ciclos y otro par el de bachilleratos, para volver a la pagina principal, me ha que dado bien el boton.
Hay algunas entradas por ahí con distintas formas de hacer BOTONES y cómo aplicar efectos ROLLOVER. Echales un vistazo si te parece.
no encuentro donde dicee eso del codigo ayuda:s
agregame porfaaas metamorphosis124@hotmail.com
te lo agradeceria mucho
ya lo encontre wujuuuu! soy feliz muchisimas gracias
De nada Shakira
Siempre tuve dudas sobre eso!!!
Ahora que ya se que se puede modificar; voy a poner en practica lo aprendido!!
Muy Bueno este blog. Fue hasta hoy que me entere de su existencia!!!!
Me gustó muchísimo este post, porque si bien no tengo mucho que publicar en una cabecera, muestra de qué forma podemos romper su estructura y amoldarla a nuestra necesidad.
Es atrapante leerte, me encantan tu inteligencia, investigación, prolijidad, etc.
Felicitaciones y claro que te voto para todos los premios que indiques.
Un saludo afectuoso desde Córdoba, Argentina. Con toda mi admiración.
Voy a añadir una regla a las condiciones de uso de esta página: Prohibido piropear al autor ;)
bueno solucioné lo del tozo de cabecera que me dejaba, ahora voy a intentar hacer una a mi gusto, me dices que seleccionando el trozo veo como está hecha la última que tienes aqui, pero como no consigo ver el html.
Por otra parte, como diseñas los botones, son muy originales, tengo el gimp pero el dibujo no es que sea mi fuerte.
Sí se ve Luz. Por lo menos lo importante. Lo de los botones es como tantas otras cosas; la práctica va haciendo que uno mejore...
Hola Oloman,
antes de nada felicitarte por el premio, que no te conoc�a y a trav�s de Gem@ ahora aqu� me tienes.
He mirado tus c�digos pero no alcanzo a comprender c�mo puedo a�adir el secrip con enlaces dentro de la imagen de mi cabecera o en donde los tengo que colocar o, si por el contrario, lo he de hacer individualmente con la imagen primero y despu�s subirla,
en fin, que he probado de todas las manera y no me salen m�s que barbaridades.
Muchas gracias y lo dicho, felicidades.
Hola Susy
Para poner una cabecera de ese tipo, primero tienes que eliminar la que viene por defecto con Blogger. Es un gadget y en la primera parte de la entrada se explica cómo poderlo borrar. Luego puedes restituirlo si te arrepientes.
Luego diseñas lo que quieres hacer y lo metes como gagdet HTML/JavaScript.
Gracias por contestarme Oloman, pero eso sí sé hacerlo, si has visto mi blog lo habrás visto. Mi pregunta es si en esa misma cabecera que tengo puesta o en otra puedo incluir enlaces en el centro de la misma.
Me he leído tu post varias veces así como los enlaces, pero o no me entero o es que no puede ser o no sé yo qué,
Un abrazo y si sabes de algo que responda a lo que digo y me puedes orientar, te estaría muy agradecida, si no ya has hecho lo que has podido y más.
Un abrazo.
Pues con dificultad (anulado botón derecho), pero creo que he visto que lo tienes como un gadget no-cabecera. Lo que no sé es si está como imagen. Si no es así, podrás introducir código. En ese caso, deberías crear un div con un background formado por tu imagen principal y ahí ya puedes meter todos los enlaces que quieras.
Los puedes ubicar con POSITION o más fácil dibujándolos en ese fondo y usando un mapa de imágenes. En este último caso, la imagen no iría como fondo, sino con el tag habitual IMG.
muchas gracias por todo hice ya la cabecera, el caso es que intentaba ver el html con IE y no habia manera para verlo para ese trozo sólo, pero con firefox he podido y ya tengo mi cabecera, me das tu opinión, un saludo
Oloman,
te agradezco de veras tu explicación y haré pruebas con lo que me dices, así que ya te contaré.
Imagino que debe tratarse a algo parecido a la división del header o algo así pero, claro, dada mi ignorancia en el campo, lo mismo he dicho una barbaridad.
Gracias y un abrazo.
Bien Luz, están muy bien. Sólo te falta poner el enlace en INICIO y en SALUDO. Sale JAVASCRIPT:VOID(0); que es un enlace nulo.
Mientras te escribo veo que estás actualizándolos por otros de colores. Ojo con los bordes, que no sé que pasa pero están raros.
Susi, empieza por leer lo del Mapeado de Imágenes, que creo que es lo más sencillo y lo que soluciona directamente lo que propones.
ya, los he quitado no soy capaz de poner colores que queden bien, como hago para poner todos los botones a la parte derecha y en la parte izquierda un buscador, se puede?
Se trataría de hacer un contenedor general para el fondo con la imagen de la cabecera o una imagen con enlace a inicio. En cualquier caso con una propiedad POSITION:RELATIVE. Luego creas dos capas más superpuestas y dentro de la anterior con POSITION:ABSOLUTE;BOTTOM:0PX;LEFT:0PX; y POSITION:ABSOLUTE;BOTTOM:0PX;RIGHT:0PX; respectivametne. En una capa metes el buscador y en la otra los botones.
De momento me curraría lo de los botones con el Photoshop y ya tendrás tiempo después de meter el buscador, que todavía no tienes tanto contenido como para que sea imprescindible.
Hay varios post sobre POSITION por ahí.
lo veo de momento un poquito complicado, voy a intentar que los botones estén mejor, tengo el gimp pero supongo que podré conseguirlo, ahora me pongo a ello.
me estoy volviendo loca para colocar los botones en la parte de la izquierda pero no lo consigo, me puedes echar un cable, la posición no la he variado, pero he introducido una celda mas en la primera fila de la tabla y hay algo que se me está escapando
No te contesto porque ya veo que has logrado poner los botones a la izquierda ;)
yo los veo debajo del globo terraqueo, a la izquierda
perdon es que confundo las manos, es a la derecha donde los quiero para que no me queden debajo del globo, sino al otro lado
Gracias Oloman, en eso estoy.
Abrazos.
Ok Susy.
Luz ya he visto arreglado lo de la navbar. Con respecto a los botones y al globo (terráqueo), tienes el código de las tablas un poco desastroso. Hay cierres de tabla (/table) dónde no toca y una sola columna arriba y cuatro abajo.
Una vez más, te remito a un post antiguo. Bueno a dos:
http://oloblogger.blogspot.com/2007/12/construir-tablas.html
http://oloblogger.blogspot.com/2007/12/construir-tablas-2.html
En el segundo se explica como formatear las celdas. Para alinear la tabla entera dónde tú quieres o la metes dentro de un DIV con una etiqueta STYLE o directamente pones el STYLE (con sus atributos) en el tag TABLE.
bueno esta noche estoy ya un poco fuera de servicio, lo intentaré mañana
he hecho dos botones, me dices que te parecen?, un saludo
Si te refieres a los de fondo verde, yo hubiera escogido un color que contrastara más con el fondo, porque el resultado es "extraño".
bueno intentaré a ver que puedo hacer
Excelete - Muchas Gracias de verdad me sirve de mucho ^^!
--
jeje te pido un poco de tu ayuda, crees saver cual seria el codigo para mostrar la cantidad de comentarios?
El buscador, Feuer, está arriba a la derecha...
http://oloblogger.blogspot.com/2009/02/numero-de-comentarios-perdido-blogger.html
PUBLICAR UN COMENTARIO