JMiur [E]

La pregunta que contesto con más frecuencia es: ¿cómo poner una imagen en el header de Blogger?

Si estamos hablando de una Plantilla Beta estándard, las respuestas posibles son varias, depende del modelo que usemos, algunas sólo contienen textos, otras incluyen fondos y otras utilizan varias imágenes. Me voy a basar en la plantilla mínima porque en ella podemos entender cómo funciona Blogger y qué significa cada código.

Lo primero, es buscar la propiedad que controla el fondo del bloque y modificar o agregar la propiedad background en la parte de estilo de la plantilla (<skin> </skin>):
#header-wrapper {
.......... otras propiedades ..........
width: ANCHOpx;
height: ALTOpx;
background: #COLOR url(URL_imagen) no-repeat;
}
donde, ANCHO, generalmente, es un valor definido y es el que podemos utilizar para crear la imagen y ALTO será el alto de la imagen (el que se nos ocurra). Ambos valores, deben estar expresados en pixeles.

Luego, buscamos en la plantilla el bloque correspondiente del encabezado, para esto, se debe tener activada la opción "Expandir elementos". En este caso, el código que se mostrará es algo similar a esto:
<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:includable id='main'>
<!-- ========== eliminamos desde acá ========== -->
<div class='titlewrapper'>
<h1 class='title'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<data:title/>
<b:else/>
<a expr:href='data:blog.homepageUrl'/>
</b:if>
</h1>
</div>
<div class='descriptionwrapper'>
<p class='description'>
<data:description/>
</p>
</div>
<!-- ========== hasta acá ========== -->
</b:includable>
</b:widget>
</b:section>
</div>
donde, borraremos todo lo señalado en rojo. Hecho esto, voilá, tema resuelto.

Pero, a este razonamiento le falta algo: entender qué significa ese código que eliminamos porque, no todas las plantillas son iguales, hay diferencias que pueden confundir y, como si fuera, si nos limitamos a borrar esas líneas, también habremos eliminado una de las funciones de navegación más cómodas de Blogger.

Veamos. Hay dos bloques, el segundo es el más simple, allí, la variable interna <data:description/> "escribe" la descripción del blog, tal cual la ingresamos en las opciones, al eliminar esa parte, ese texto no se mostrará más:
<div class='descriptionwrapper'>
<p class='description'>
<data:description/>
</p>
</div>
La primera parte es similar, "escribe" el nombre del blog, utilizando la variable <data:title/> pero lo hace verificando una condición, ¿la página que se está mostrando es la página de inicio o es cualquier otra?
<div class='titlewrapper'>
<h1 class='title'>
<b:if cond='data:blog.url == data:blog.homepageUrl'> ¿es la página de inicio?
<data:title/> SI: escribir el título
<b:else/>
<a expr:href='data:blog.homepageUrl'>
<data:title/> NO: escribir el título pero transformarlo en un vículo
</a>
</b:if>
</h1>
</div>
Si la página NO ES la página de inicio, el texto del título sirve como vínculo, por lo tanto, si lo eliminamos, perdemos la posibilidad que un visitante regrese a la página de inicio de manera sencilla, haciendo click en el header.

¿Cómo se resuelve? ¿haciendo que la imagen sea un vínculo? No, no se puede ya que si nos hemos inclinado por colocar la imagen en la propiedad background, esta, no existe como un objeto, sólo es el fondo y no puede ser un vínculo.

Las solución es crear un bloque falso, que tenga el mismo tamaño que la imagen y utilizar este bloque como vínculo:
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div style='width:100%;height:ALTOpx;'/>
<b:else/>
<a expr:href='data:blog.homepageUrl'>
<!-- este es el bloque vacío -->
<div style='width:100%;height:ALTOpx;'/>
</a>
</b:if>
donde el valor ALTO, es, nuevamente, el alto de la imagen.

Ahora sí, ya podemos guardar la plantilla e irnos a descansar.

89 comentarios:

Yeyo  

Hola, gracias por el articulo. He conseguido quitar el titulo, pero me falta el enlace. El problema es que al añadir el bloque falso no me deja guardar la plantilla ni hacer vista previa porque dice que esta mal formada.

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 "a" must be terminated by the matching end-tag "".


¿Que puede ser? ¿El bloque falso debe ir en alguna parte en concreto?

Responder
Ignasi  

Hola Jmiur!

Estoy intentando poner mi header como una imagen y ya he conseguido substituir la imagen por el titulo y la descripción.

El problema viene que en la segunda parte, cuando se tiene que crear el falso bloque para poder hacer el vinculo hacia home, no me sale

Aqui pongo los codigos que tengo en la sección de mi head-wrapper.

Al poner el bloque de la seccion vacia me sale este error: Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
XML error message: The element type "b:if" must be terminated by the matching end-tag "".

El codigo del bloque vacio lo pongo justo donde estaba la sección de titulo y todo eso (lineas 34 hasta 45 del pastebin)

Sabes que tendría que arreglar para poder hacerlo? Voy a poner mi header aleatorio así que primero debo cambiar el header por imagen ;)

Muchas gracias

Responder
JMiur  

Ya está corregido, aparentemente, el editor agregó algunos caracteres indeseados.

Puedes volver a copiar y pegar directamente desde el post pero el problema era este:

<div style='width:100%;height:ALTOpx;'/></div>

o se pone la barra final o se pone </div>, y no ambas cosas.

Podemos escribir una etiqueta con su inicio y cierrre:
<div> ........... </div>
o "resumirla" en sólo una:
<div />
donde el cierre está incluido dentro de ella.

En este caso, aparecieron ambas sintaxis juntas lo que es un error.

Espero que esto solucione tu problema.

Responder
Ignasi  

Hola!

Ahora si que funciona bien!

Te he respondido al mail que me has enviado.

Muchas gracias por todo! ;)

Responder
Anónimo  

hola, me llamo javier,tengo un problema, quisiera pedirte ayuda,realmente soy nuevo en esto,y te pido un consejo,yo tengo un blog,y keria ponerle un contador de visitas,cuando entro a la pagina, en donde te lo arman gratis,luego me piden que lo introdusca dentro de mi blog,en la parte k dice editar html,hasta alli todo bien, el problema es k no se en k parte del codigo original lo introdusco, pork me salta el siguiente error y no entiendo muy bien.
(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 "img" must be terminated by the matching end-tag "". )
te agradeceria mucho una ayudita para este humilde servidor, :) ,gracias

Responder
JMiur  

Si el error es el que dices, lo que ocurre es que falta la barra final de cierre en la etiqueta. En alguna parte de ese código debe decir:

<img src= .................>

y debería decir:

<img src= ................. />

las etiquetas IMG deben tener una barra / antes de su cierre >

Responder
Mr.Prado  

Buenas JMIur, aquí yo otra vez con un nuevo problema.

Quiero sustituir la imagen del header de blogger y para ello me voy al mismo blooger en su pestaña de "Diseño" y edito la parte correspondiente al header. Cargo la imagen desde la correspondiente URL y activo "En lugar del título y la descripción". Y así queda en mi blog de pruebas

¿Y bien?.

Un saludo y mil gracias.

Responder
JMiur  

Ya veo a que te refieres. La solución es sencilla.

Primero que nada, elimina eso que has colocado, deja todo como estaba y no uses la edición de Blogger de Elementos de la página.

Abre la plantilla en Edición HTML y busca esto:

#header-wrapper {
background:#036EB4 url(http://www.fileden.com/...../header%20ancho.jpg) no-repeat scroll center top;
color:#FFFFFF;
height:149px;
margin:0pt;
width:1000px;
}

Allí, sólo cambia la dirección de la imagen:

http://www.fileden.com/...../header%20ancho.jpg

por la nueva:

http://www.fileden.com/.......new%20header.jpg

Responder
Mr.Prado  

Claro, así ya lo he probado yo pero se solapa con el título. Yo sólo quiero ver la imagen porque ya incluye el título del blog.

En el blog de pruebas está tal y como me dijiste.

Se que será una tontería pero bueno no se cambiarlo :S

Responder
JMiur  

Podría eliminarse esa parte del código pero para evitarte problemas en el futuro lo que puedes hacer es ocultar el texto del título.

Busca:

#header-inner {
padding:45px 0pt 0pt 50px;
}

y agrégale display:none; de tal manera, quedaría así:

#header-inner {
display:none;
padding:45px 0pt 0pt 50px;
}

Responder
WALLACE  

Hola, Gracias a JMIUR por la estupenda explicación del error , que para gente como yo , no controlamos el xml

Responder
JMiur  

Gracias por el comentario, Wallace, me alegro que te fuera útil :)

Responder
teté  

Hola, estoy intentando poner un contador de visitas en mi blog y no puedo 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 "img" must be terminated by the matching end-tag "".

te agradecería mucho que me ayudes ya que me paso varias veces cuando intenté agregar otras cosas.

Responder
JMiur  

Lo más probable es que falte la barra final en la etiqueta IMG.

Debería ser algo así:

<img src="laImagen" />

Responder
KZX7  

no puedo poner mi contador de visitas... me aparece este error Mensaje de error de XML: The element type "img" must be terminated by the matching end-tag "".

Responder
JMiur  

Agrégale la barra final a la etiqueta IMG:

<img src="xxxxxxxxxxxxx" />

Responder
Ricardo  

una simple pregunta

en mi blog
http://www.muchowayer.blogspot.com

cuando carga, carga la imagen de la plantilla y encima la imagen que puse como header. como arreglo eso, yo creo que igual mejoraria el rendimiento de mi web

gracias de ante mano

Responder
JMiur  

Supongo que la imagen que quieres eliminar es esta

Eso l opuedes hacer buscando y elimiando esto:

#header {
background:#000000 url(http://2.bp.blogspot.com/_qTWVg4q5lCo/SOQmqiUpd6I/AAAAAAAABdk/E4-4ULT9vH4/s1600/FF_01.jpg) no-repeat scroll 0 0;
.......................
}

Responder
Administradora  

Hola, existe la posibilidad de insertar un contador de visitas y la fecha en la cabecera de Blogger, he visto miles de post explicando como se pone agregando un gadget, pero al querer moverlo hacia la cabecera no lo permite, he intentado ponerlo editanto el codigo html pero ni así funciona, de que manera lo puedo hacer?, ayuda por favor.

Responder
JMiur  

Sí, supongo que debe ser posible. Revisa que la sección del header sea editable.

Elimina eso en negrita para que puedas agregar elementos:

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

Responder
Juanhellou  

Hopla necesito ayuda copn mi header, quisiera hacerlo q abarque todo el largo de la pantalla de blog, ojala pudieses ayudarme... te dejo el link http://gibsonscave.blogspot.com

Responder
JMiur  

El header está ocupando todo el ancho del blog. Ese ancho, está definido por #outer-wrapper que tiene una propiedad width de 660 pixeles.

El ancho del blog no es igual que el ancho de la pantalla del monitor. Ese otro, es el body y allí, ya hay una imagen en la propiedad background.

Responder
Mario Aravena  

Hola que tal?
Estoy tratando de poner un contador en mi blog(Blogspot.com)
pero cada vez que pongo el código me dice esto: "Mensaje de error de XML: The element type "div" must be terminated by the matching end-tag"
Quisiera saber en donde está el error porfavoor
de antemano GRACIAAS

aqui va el codigo:
los { reemplazan a los <

{a href="http://www.contadorgratis.es/"} {img src="http://www.contadorgratis.es/count.php?magio87" border="0" alt="Contador"/}{/a}{/br} {a href="http://www.contadorgratis.es"}Contador Gratis{/a}

Responder
JMiur  

Mario:
El error es que esta etiqueta está mal: </br>

Se escribe: <br/>

Responder
Bayron  

Hola JMiur, primero q nada quiero decirte q ha sido un muy buen post, bastante util, y bueno lo segundo es q me gustaria saber si me puedes ayudar con un problemilla que tengo con un blog , bueno mira , la cosa es que en mi blog tengo un header un poco grande , pero lo necesito de ese tamaño, pero el espacio que se queda sin ocupar es mucho, quisiera sabe como puedo hacer que la seccion de los post y la de la sidebar se pueda hacer mas para arriba , encima del mismo header, mira aqui te dejo el codigo que me parece es el de el header

#top {
float:none;
margin-top:0px;
background-repeat: no-repeat;

}
.blogname {
float:none;
width:984px;
height: 425px;
padding: 0px 0 0 0;
background: url(http://i43.photobucket.com/albums/e384/Bayron-Hatake/Aol%20web/header_bkgz.jpg) center no-repeat;
font-family:"Trebuchet MS",Verdana,Tahoma,sans-serif;
margin:0px 0 0 0;
}


Te agradesco tu atencion y te dejo mi correo animeaoverloaded@gmail.com o andare pasando por aqui luego, espero tu pronta respuesta, gracias

Responder
JMiur  

Tal como veo el código de esa plantilla, se me ocurre que podrías subir la parte de los posts y la sidebar agregadno un par de propeidades:

.main-repeat {
....................
position:relative;
top:-290px;
}

con top le dices que suba todo eso y se solape con el header. Es un valor negativo. Coloca el número que quieras hasta encontrar el lugar preciso donde quieras verlo.

Responder
Bayron  

Hola de nuevo JMiur , oye pues muchisimas gracias por la ayuda, me ha funcionado de maravilla el codigo, esa era la ultima parte que me faltaba para poder completar mi diseño, nuevamente muchas gracias, y espero seguir visitando tu blog en busca de muy buena informacion y consejos, saludos y pronto te enseñare como quedo terminado el diseño, saludos :D

Responder
JMiur  

me alegro que funcionara, Bayron :)

Responder
Jazmín A.Ventura  

Hola hice todos los pasos hasta que explicas que la imagen se puede convertir cmo en un link directo al blog. Eso no lo he hecho.
Lo que me ocurre es lo siguiente; en internet explorer no se ve la imagen del header pero en firefox si :/
que hago?
necesito que se vea en los dos navegadores ya que es para un trabajo el blog;
te muestro lo que tengo en mi plantilla
/* Header */

#header-wrapper {
background: url(http://img39.imageshack.us/img39/2036/tallerdemusica.png) center top no-repeat;
margin: 0 auto;
padding-top: 0;
padding-$endSide: 0;
padding-bottom: 600px;
padding-$startSide: 0;
border: 0;

Si nos podemos poner en contacto t.t,
muchas gracias.

Responder
JMiur  

Eso seguramente te pasa en versines menorea a IE8. Haz esto, cambia un poco las propiedades eliminando el padding y dándole un tamaño con width y height:

#header-wrapper {
background: url(http://img39.imageshack.us/img39/2036/tallerdemusica.png) center top no-repeat;
margin: 0 auto;
padding: 0;
border: 0;
width:800px;
height:600px;
}

Responder
Unknown  

Cómo hago para poner el header lo más arriba posible, pegadito al borde del explorador, sin espacios

Responder
JMiur  

Jared:
Aunque no usas el header-wrapper para el header sino otra sección, aún así, ese sector tiene un tamaño. Pueden hacerse varias cosas. Eliminar la sección header-wrapper; colocarle display:none para ocultarla o bien quitarle el margen y ponerle margin:0; Todo eso en esta parte:

#header-wrapper {
border:0 solid #333333;
margin:0 auto 10px;
width:980px;
}

También hay un padding de 10 pixeles en outer-wrapper que si queires puedes quitarlo así::

#outer-wrapper {
padding: 0 10px 10px 10px;
}

Responder
Unknown  

Gracias JMiur, agregué la opción display:none; en el header-wrapper y el padding al outer-wrapper y quedó bárbaro.
Hoy me sentí identificado con un comentario que leí por acá. Y también voy a saludarte el 11 de septiembre.
Un abrazo.

Responder
JMiur  

Una exageración pero, igual, gracias :D Me alegro que sirviera.

Responder
suzε dσt  

Holaa, a mi me sale lo siguiente : The element type "style" must be terminated by the matching end-tag "".

Responder
JMiur  

Dide que te falta la etiqueta de cierre </style> pero, habría que ver el código completo para saber si el error es ese o es provocado por otro.

Responder
María José  

Este es mi problema, Mensaje de error de XML: The element type "br" must be terminated by the matching end-tag "
".

Que hago?

Responder
JMiur  

Agrégale la barra final:

<br/>

Responder
dreams anma  

nome sale

Responder
Unknown  

Hola JMiur, donde iría ese bloque falso para enlazar el fondo de la cabecera?

Saludos :)

Responder
JMiur  

Esto que se muestra acá es un reemplazo del gadget Header de Blogger mismo. Hay varais formas de hacer algo similar, depende de la plantilla y de la forma en que está colocado ese header.

Responder
Unknown  

JMiur... la respuesta era para mi?

Responder
JMiur  

Sí pero parece que no fue suficiente :D

Explícame un poco más.

Responder
Grupo Ciclista Amigos de Calaceite  

Hola!!!Soy Germán.
¿Qué tal estamos?
Gracias por toda la ayuda que brindas en tu blog, es una pasada, lo que he llegado a aprender en tu sitio es impagable.

Tengo dos dudas que no acabo de resolver pese a ponerle todo mi empeño, ¿podrías ayudarme?:

1- En nuestro blog: http://amigosdecalaceite.blogspot.com/ no soy capaz de encontrar el lugar exacto, ni como modificar el espacio que hay entre los dos gadgets del header que tengo en mi blog, es decir, me gustaría que el menú estuviera justo encima de la imagen gif y no a uno o dos centímetros.

2- Pese a ordenar las imágenes de las entradas siempre centradas, tanto dándole al botón centrar de la imagen, como añadiendo yo código en el modo html, de los dos modos siempre me salen las imàgenes a la izquierda, ¿cómo puedo hacer para centrarlas?

Muchas gracias por tu atención:
Un saludo del Grupo Ciclista Amigos de Calaceite.

Responder
JMiur  

El espacio que hay entre el menú y el gif es el resultado de una serie de etiquetas <br/> o saltos de línea que hay agregados directamente en el gadget. Si lo editas y las eliminas, creo que se resolverá. Otra forma de quitar esos saltos es que agregues esta definición:
#HTML10 br { display: none; }

Yo veo centradas las imágenes de los posts ¿en qué parte te ocurre eso?

Responder
Unknown  

Hola, tengo problemas al ver el header en diferentes navegadores, en mi plantilla la imagen del header la tengo definida así:
body {
background: #334455 url(http://2.bp.blogspot.com/-xXgW_wAcQ6E/TjTfv6jEsoI/AAAAAAAAA6s/BrfpoT25C8M/s1600/header2.jpg) top center no-repeat;
}
Ocurre que cuando pongo la imagen con las medidas 950x257. La imagen no abarca los 950px que tiene como ancho mi blog, pero cuando le pongo una imagen con 1110x257 px si abarca todo, pero resulta que en algunos navegadores se ve la imagen desbordada :O.
Si defino #header-wrapper {} y agrego la imagen ahí, luego no se donde poner el <div id='header-wrapper' ya que mi plantilla es anormal y no trae esa línea. ¿Me puedes sugerir alguna solución? :(
Thx.

Responder
JMiur  

La imagen de 1110 de ancho se "desborda" justamente, porque está en el body y el body de una página carece de ancho; su ancho es el total de la ventana del navegador.

No hace falta agregar nada, ni siquiera, cambiar la imagen, en lugar de colocar:

body {
background: #334455 url(http://2.bp.blogspot.com/-xXgW_wAcQ6E/TjTfv6jEsoI/AAAAAAAAA6s/BrfpoT25C8M/s1600/header2.jpg) top center no-repeat;
}

coloca:

body {
background: #334455 url(http://2.bp.blogspot.com/-xXgW_wAcQ6E/TjTfv6jEsoI/AAAAAAAAA6s/BrfpoT25C8M/s950/header2.jpg) top center no-repeat;
}

es la misma imagen, redimensionada.

Sino, en lugar de agregar DIVs extras, también puedes quitar la imagen del body donde sólo irça el color de fondo y la imagen, la colocas como fondo en el DIV #container que ya está dimensionado.y al que conviene que además, se le agregue overflow:hidden; para evitar desbordamientos.

Responder
kkk  

Ups, yo tengo un problemita, no me permite eliminarde el borde...
http://www.nuestrotintero.net.
No sé me ocurre qué más hacer.

Responder
JMiur  

No sé a cual borde te refieres.
El blog de tu perfil indica esta URL:
http://nuestrotintero.blogspot.com/
esta otra es privada:
http://www.nuestrotintero.net/

Responder
Monster PawsUp  

oye hola...es que necesito poner una barra como la que tu tienes que dice INICIO BLOGGER HTML/CSS etc...pero no se como..si tienes algun tutorial o si alguien lo tiene me escriben a mi correo porfa juanjo_31@live.com.ar

Responder
JMiur  

El sistema que utilizo es lo explicado en esta entrada.

Responder
Sol Moraño  

Hola, tengo un problema con mi blog y quizás tú me podrías ayudar. Intento modificar la plantilla pero no me deja guardarla por el siguiente error:
"element type body must terminated matching end tag"

Cómo puedo solucionarlo??

Gracias.

Responder
JMiur  

Es imposible saberlo sin ver el código que estás intentando agregar.

Responder
Sol Moraño  

El caso es que sin hacer ningún cambio le di a guardar y me salió el error, algo raro, porque la plantilla funciona tal cual. Es posible mandártela a algún correo para ver si tú sabes donde está el fallo??.
Muchísimas gracias.

Responder
JMiur  

Puedes enviarla aunque no te puedo asegurar si se verá el problema. De todos modos, la miraré.

Responder
Laura María Rodríguez  

Hola, bueno pues yo use una nueva plantilla en mi blogger, muy bonita y todo. pero no tiene cabecera, entonces no tengo como ponerle magen y sí quería dejarle la misma cabecera de otra que tengo en otro blog, en el editor html solo me parece esto en la seccion del header:




No tengo ni idea de como modificarlo, pensaria en agregar un background url pero tengo miedo de matar la plantilla.

Agradezco en loq eu me puedas ayudar.

JMiur  

Lo que estás usando es una de la Vistas dinámicas de Blogger. No es algo que puedas personalizar o cambiar más allá de las opciones que te muestra cuando la eliges.

Si quieres personalizar el sitio, deberás usar algunna de las plantillas normales.

Responder
Sermartin  

Jmiur te escribo por aqui, lo hice tal cual y quedo la imagen. luego agregue el bloque falso en lgar del que borre previamente del titulo y la descripcion y no me genera el link, no se si lo agregue mal o me falta borrar alguna parte del codigo.
El blog es este, muchas gracias.

JMiur  

No entiendo bien lo que quieres hacer. Allí veo que la descripción sigue estando así como una serie de reglas de estilo con propiedades que no deberían existir; reglas para #header h1, #header y #header-inner por ejemplo.

Luego, veo este div:

<div style="width:100%;height:435px;"></div>

que es el que permite eso de lo que habla esta entrada y lo veo normal y funcionando ya que en una página individual, se transforma en enlace.

No entiendo la razón de que tenga 435 pixeles de alto cuando la imagen es de 135.

Sermartin  

Si tenes razon ricien caigo de que el bloque falso solo se generaba en las paginas no home lo que es logico je...gracias.

Sermartin  

Disculpa jmiur estoy probando con otra plantilla y ni el titulo ni la descripcion se identifizan como en el ejemplo.
Al margen, por encima y por degajo del header-wrapper se genera un espacio que no se de donde porviene para quitarlo.
Gracias de nuevo, el blog es este este.

JMiur  

Eso que se ve está muy confuso ¿Para qué tanto div y tanta posición absoluta que es l oque en realidad genera esos espacios indeseados?

Tienes un gadget Pagelist sin uso y dos divs class="span-14" y class="span-3" que tampoco tienen uso; ademá de dos headers dentro de header-wrapper, uno de ellos, también sin uso.

Simplifica todo; el primer DIV sería header-wrapper que es el que contiene la imagen de fondo; su altura la defines con height y la posición de la imagen con background--position. Ese div debe tener como propiedad: position:relative.

Luego, tanto el DIV id="topsearch" como la tabla Explora Forma Parte Ayuda van adentro de header-wrapper y su posición si la defines con position absolute y left top right y bottom que serán relativas al contenedor y no a toda la página tal como ahora.

Sermartin  

mil gracias Jmiur en serio, gracias por estos tips esta bueno para darse cuenta.
Solo te molesto para consultarte a cerca de un boton de twitter que agregue en cada resumen de post en la pagina principal de este blog pero me toma la url del blog y no la de la entrada, tendria que modificar el codigo que da twitter o lo agregue mal? abrazo.

JMiur  

No sé cuál de los códigos usas, supongo que el que se muestra en esta entrada y por lo tanto, tienes que modificarlo para indicar la dirección url de cada entrada en particular ya que, si no lo haces, automáticamente, toma la url de la página donde se encuentra que en el home, siempre es la misma.

Sermartin  

disculpa jmiur cual codigo de la entrada que decis, es que salio mal el enlace en el comentario.

Sermartin  

muchas gracias JMiur un saludo grande!

Responder
Disniruña  

tengo un caso en el que soy incapaz de conseguir una solución con el código. en el lugar de la imagen de cabacera tengo una columna para gadgets que no se como eliminar y que se pone encima de la imagen, por lo que me tengo que cinformar con un ancho de 400px en lugar de 900, ya que si la meo de ese tamaño, se ve cortado en blanco con la columna de gadget que menciono. http://eunor.blogspot.com.es/
Me podrías ayudar con el código? Un saludo!!!

JMiur  

El header de ese blog está dividido en dos partes, la izquierda es una sección cuyo id es header:

<b:section id='header' .............

y la de la derecha header2

<b:section id='header2' .............

que imagino, es el que quieres eliminar. Para eso, basta abrir la plantilla sin expandir los artilugios y eliminar esa línea; como adentro hay un widget, te pedirá confirmar pero, es algo que puedes ver en vista previa antes de guardar.

Luego, tendrás que eliminar las propiedades width y float de #header {} para que ese div ocupe todo el ancho.

Responder
Disniruña  

no me he atrevido a borrar más código, pero widget ya no existe, es la segunda parte la que he borrado con más miedo y me sigue sin dejar eliminarlo del todo

JMiur  

Está perfectamente borrada. Errores, cometeremos siempre, eso es inevitable; en este caso, no era un problema ya que podías verificar el resultado con Vista Previa antes de guardar y, llegado el caso, deshacer el cambio.

Ante cualquier duda, simplemente descarga la plantilla antes de hacer cambios o crea un blog auxiliar, copia la plantilla allí y de ese modo, puedes destrozarla sin culpa :D

Lo que falta es eliminar la propiedad width de #header y, si eventualmente, eso te da problemas (no sé cuales) agregar una regla más, debajo de esa o al final del CSS que la sobrescriba:

#header {float:none; width:100%;}

Responder
Disniruña  

SIENTO LAS MOLESTIAS! seguiré intentándolo y si me veo apurado.. te digo. Un saludo amigo!

Responder
Disniruña  

esa ultima opción es la que me ha salvado, que que no se cual de todos los width de #header devo borrar. pero encima del encabezado sale un gran espacio en blanco y bajo ella muy poco... que quebradero de cabeza esta cabecera... jaja

JMiur  

Solo hay una regla header:

#header{ ............. }

Lo otro ya es un tema de diseño. Por ejemplo, hay un DIV que es el espacio vacio al que te refieres:

<div class='span-24' style='height: 51px;'> </div>

La altura de #header-wrapper dice height: 112px; y no debería tener ninguna o ser exacta, etc.

Responder
Disniruña  

bien!!!!! ya sólo me queda borrar el espacio en blanco d la derecha para poder centrar el encabezado!!...

JMiur  

Tal como está, vas a tener que buscar la imagen y cambiar el estilo en la etiqueta IMG. No sé que dice tu plantilla pero, terminaría siendo algo así:

<img id='Header1_headerimg' style='margin: 0px auto; padding-top: 20px; display: block;' src='http://1.bp.blogspot.com/-hTOjwNAHyOI/UP0VoJL5mfI/AAAAAAAAEU4/SD45BpxWHt8/s798/cabecera2.jpg' alt='Eventos Unidos del Norte' />

Responder
mispadressonprimerizos  

Hola Jmiur, tengo una duda respecto a las cabeceras aleatorias. En un blog, quiero poner una cabecera fija para la pag. de inicio para el resto (las entradas a las q entro a traves de un menú horizontal) quiero poner imagenes de cabecera aleatorias.

Me puse en contacto con Potro y me dió una idea muy buena (siguiendo su entrada de cabeceras aleatorias).http://ciudadblogger.com/2009/07/cabecera-del-blog-cambiante-al-azar.html

Dijo q pusiera dos condicionales, una para q en el inicio solo se vea la imagen fija (Header1) y otra para que se vean los otros dos Header gracias al script aleatorio en el resto del blog.

<b:if cond='data:blog.url != data:blog.homepageUrl'>
<style type='text/css'>
#Header1 {
display: none;
}
</style>
</b:if>


<b:if cond='data:blog.url == data:blog.homepageUrl'>
<style type='text/css'>
#NOMBRE {
display: none;
}
</style>
</b:if>

Yo cambié #NOMBRE por #HTML7 (es donde están las imágenes)

Pero no funciona, ya que en la pag de inicio salen las 3 imagenes y en las entradas 2 (no se ve la del inicio). El Potro no sabe pork no funciona. Me puedes ayudar?

El blog donde está hecha la prueba es http://mispadresprimerizos.blogspot.com.es/

JMiur  

El script y las condiciones funcionan pero, además de eso, tienes tres elementos header
Header1, Header2 y Header3 que son los que se ven siempre ya que el script no los afecta y las condiciones no ocultan a dos de ellos (el 2 y el 3). No entiendo por qué hay 3 headers con 3 imagenes.

mispadressonprimerizos  

Esos tres header son header1 la imagen fija q solo debe verse en el inicio del blog y header2 y 3 los header aleatorios de las entradas. Es así como lo explica Potro en la entrada q te dije. La diferencia es q él la explica para header aleatorios desde el inicio, por eso hay q ponerle unas condicionales q son las q te he mandado... condicionales para q haga el efecto solo con header2 y 3 q son los q están en el gadget HTML7

JMiur  

Yo no sé cuál es la idea que quieres aplicar o en qué publicación te basas, simplemente, miro lo que dice el blog y allí, hay 3 headers. Además, hay un script en el widget HTML7.

Empecemos con ese script ¿qué hace? Escribe una etiqueta IMG allí mismo usando document.write(); aleatoriamente, elige una de dos: dibuheader2.jpg o dibuheader4.jpg

Ocultar HTML7 con CSS ocultará esa imagen y nada más; en ningún momento estás definiendo nada respecto de los headers 1,2 y 3. Están siempre ahí, no se modifican; el script no hace nada con ellos.

La otra condición oculta #Header1pero ¿qué pasa con el 2 y el 3? Nada.

Con condicionales podrías mostrar uno de ellos y ocultar los otros dos pero no puedes establecer cuál de esos dos se verá de modo aleatorio ya que para eso requieres javascript y la función que usas no hace nada de eso.

Desde la lógica, lo que deberías tener es un solo header ya que tener tres implica triplicar el peso de la carga con imágenes que no se verán.

Una vez hecho eso, el script sólo debería cambiar la imagen de ese header único. Sin entrar en detalles, sería algo como esto:

var laImagen;
var alea = Math.floor(Math.random()*2)+1;
if (alea == 1) {
laImagen = "http://1.bp.blogspot.com/-JrvnCGU37m0/ULn0FUBpNBI/AAAAAAAABmk/1Ydw5XTRqmA/s640/dibuheader2.jpg";
} else {
laImagen = "http://2.bp.blogspot.com/-5zF-A1V3d1I/ULn0HiwQ8OI/AAAAAAAABm0/bJK_5I6PUAk/s640/dibuheader4.jpg";
}
jQuery('#Header1 img').attr('src',laImagen);




Responder
EM  

Hola Jmiur! Estoy a pocos días de lanzar un blog "htttp://fdmsantiago.blogspot.com" y estoy intentando seguir tu consejo pero se me complica demasiado por hecho de que me descargué una plantilla y quizás allí esté el problema.

Sucede que pude cambiar las medidas del header y todo lo demás, pero nunca apareció la imagen. Solamente quedaba el espacio en blanco. Probé de muchas formas y no logré solucionarlo... ¿podrías darme una mano?

Gracias, un abrazo!!

JMiur  

Yo veo perfectamente la imagen del header ¿eso te ocurre en algún navegador en particular?

Responder
Anónimo  

Hola, gracias por el tutorial. Tengo una pregunta: ¿Cómo pongo el header o cabecera del blog hasta arriba?.

Lo que pasa es que tengo una imagen de fondo que me sirve para el diseño y ya intente cambiando tamaños del header y del fondo pero no queda, el punto es que necesito dejar el fondo tal y como está y el tamaño de la cabecera también está bien.

Así que ¿cómo le hago para que no se vea la parte de arriba (verde) del fondo de mi blog?, creo es poniendo el header lo más alto posible, pero ¿cómo hago eso?:

http://sekakunstories.blogspot.mx/

O ¿tendrás una mejor solución?, muchas gracias.

JMiur  

Revisa la dirección escrita porque a que has colocada es errónea.

Responder
Unknown  

Hola apenas comienzo con mi blog y quisiera si es posible su opinion sinceraaqui le dejo mi enlace gracias
http://bit.ly/HBbtkc

JMiur  

Lo siento pero nunca comento sobre sitios ajenos.

Responder
Ernesto Caballero  

Me gusto mucho tu articulo
http://bit.ly/GHLCaK

Responder
Psicopompo  

Hola.
Sé que esto es bastante antiguo y que seguramente ya habrán salido métodos mejores para solucionar lo de los enlaces en el header y esas cosas, pero a mí me gusta hacerlo de este modo que explicas. El caso es que tengo un problema con el frame vacío; está desplazado ligeramente abajo y a la derecha, con lo que en algunos dispositivos el header no se ajusta al ancho de la pantalla (le sobra esa parte del frame vacío que sobresale por la derecha). ¿Sabes si hay alguna forma de ajustarlo?
Un saludo.

JMiur  

Si se trata de este blog:
http://kabochastudio.blogspot.com
allí,el header está dentro de un contenedor cuya clase es blogname y que posee propiedades propias que deberían eliminarse o simplemente eliminar ese contenedor que carece de uso.

Responder

¿Quiere dejar un comentario?

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

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