43

Imagen en la cabecera (Plantilla 897 de Blogger)

Recuerda
que aunque yo pruebe los "trucos"
Antes de hacer ningún cambio
GUARDA SIEMPRE TU PLANTILLA
Nunca es seguro
que todo salga bien...
Me han llegado varias peticiones por email sobre como se podría cambiar la cabecera de la plantilla 897 por una imagen.

1- Buscamos esta parte de CSS en la plantilla- html Y sustituimos la url que viene por defecto en Blogger por la de tu imagen, ten la precaución de que la imagen tenga el mismo ancho que la cabecera más o menos, la anchura podemos variarla añadiendo en #header h1 {, el valorheight:100px; y cambiando 100 por la anchura de nuestra imagen.

#header h1 {
background:url("URL DE LA IMAGEN QUE QUIERAS PONER") no-repeat left top;
margin:0;
padding:70px 0 30px;
line-height: 97px;
font: $titleFont;
text-transform:lowercase;
}

2- Si quieres eliminar el cuadrado de al lado con la estrella, borras esta parte del CSS (está justo encima de #header h1 {:

#header .titlewrapper {
background:#269 url("http://www.blogblog.com/no897/topleft.gif") no-repeat left bottom;
padding:0 0 0 160px;
margin:0 0 10px;
color:#fff;
width:100%;
width/* */:/**/auto;
width:auto;
}
Usamos la vista previa y si está correcto guardamos cambios.

3- Luego has de eliminar el título del blog (si quieres, claro). Expandimos plantilla de artilugios y buscamos esto:

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='nnnnnnidododdd (cabecera)' type='Header'>
<b:includable id='main'>
<div class='titlewrapper'>
<h1 class='title'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<data:title/>

Borramos la última línea, la de data:title. Usamos la vista previa y si está correcto guardamos cambios.

4- Si también queremos eliminar las dos barras que están debajo de la cabecera con la descripción del blog, buscamos esto en el CSS:

/* Description
----------------------------------------------- */
#header .descriptionwrapper {
background: #88ddff url("http://www.blogblog.com/no897/bg_desc_top.gif") no-repeat left top;
margin:0 0 6px;
padding:12px 0 0;
color: $descColor;
font-size: 75%;
border-bottom: 1px solid #ffffff;
}
#header .description {
background:url("http://www.blogblog.com/no897/bg_desc_bot.gif") no-repeat left bottom;
margin:0;
padding:0 0 12px;
display:block;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
min-height:12px;
border-bottom: 1px solid #ffffff;
}

#header .description span {
/* To remove the word next to the description, delete the following background property */
background:url("http://www.blogblog.com/no897/temp_no.gif") no-repeat left center;
/* Keep everything below */
display:block;
padding:0 0 0 160px;
text-transform:uppercase;
letter-spacing:.1em;
min-height:12px;
}
Y lo eliminamos por completo.
USAMOS LA VISTA PREVIA ANTES DE GUARDAR NADA.

Entradas Relacionadas:

43 comentarios:


Antero

aunque no está directamente relacionado con este post, queria comentarte que he cambiado la plantilla de mi blog (me estoy arrepintiendo pero creo que ya es demasiado tarde), una de las cosas que no me gustan es que la cabecera del título que me hiciste y que quedaba tan chulo en la otra plantilla ahora queda demasiado pequeño, ¿Es posible modificarlo y hacerlo más grande para que ocupe las dos columnas?

BRAKSS

Hola, quiero cambiar el nombre que tengo en la cabecera de mi Blog, creo que es la que sale por defecto, y no se como hacerlo, he intentado cambiar las letras por las que salen en HotFreeLayouts.com, pero me sale error, y solo he podido poner el nombre en el lateral dcha.
Donde tengo q ir para cambiar la cabecera? y es posible el cambio no?.
Gracias y adelante con tu Blog.

Rosa

antero, prueba con esta imagen (es la misma a tamaño del cuerpo de tu blog)
Por cierto, has tenido suerte que aún no me había deshecho de ella,:)

http://img182.imageshack.us/img182/5670/20061120185101librosnd8.jpg

Brakss, ahora mismo miro lo que me dices...;)

Rosa

Brakss, mira a ver por favor si te referías a algo como esto:

http://pamiscositas-rosa.blogspot.com/

Antero

Muchas gracias, ahora me gusta más, le veo el fallito de que ahora las letras salen algo borrosas, pero eso me preocupa menos, con tiempo, lo arreglaré.
¡No se que seria de nosotros sin tí!

Rosa

Antero, prueba con esta:
http://img235.imageshack.us/img235/1685/20061120185101librosbf4.jpg

Antero

Ha quedado genial, 1.000.000 de gracias o más...es que ya no se como agradecer que curres tanto por nosotros

BRAKSS

CLARO justamente esto es lo que quiero, pero como lo hago. GRACIAS
Un beso y abrazo

Rosa

Te cuento Brakss:
USA EN CADA PASO LA VISTA PREVIA ANTES DE GUARDAR Y ANTES DE EMPEZAR DESCARGA UNA COPIA DE LA PLANTILLA A TU PC.

1- Antes de nada has de tener la imagen, en este caso el glitter preparado, si lo haces en HotFreeLayouts te dará un código más o menos como este:

<a href="http://glitter.hotfreelayouts.com/"><img src="http://glitter.hotfreelayouts.com/glitter/fc/fcd1aa8da1e5592e1392d18492b3888c.gif" border="0" alt="Glitter and MySpace Layouts"></a><br><a href="http://www.hotfreelayouts.com/layouts.php?index=myspace_layouts">Layouts</a> at <a href="http://www.hotfreelayouts.com/layouts.php?index=best_myspace_layouts">HotFreeLayouts.com</a>

Pero como supongo que no querras que al pinchar en el glitter nos lleve a la página de HotFreeLayouts, has de quitarle los links y quedaría así:

<img src="http://glitter.hotfreelayouts.com/glitter/fc/fcd1aa8da1e5592e1392d18492b3888c.gif"/>

2- El segundo paso es eliminar el título que tienes ahora (no te preocupes que aunque no se vea, en internet sigue costando a todos los efectos).

Vas a plantilla-HTML-expandir elementos y buscas esto:

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='BRAKSS (cabecera)' type='Header'>
<b:includable id='main'>
<div class='titlewrapper'>
<h1 class='title'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<data:title/>

Eliminas la última línea el <data:title>

3- Colocas el glitter, su url, la que sacamos antes del código, y la colocas justo donde antes estaba el <data:title>

¡Mucha suerte!

BRAKSS

MUCHAS GRACIASSSS. Te agradezco un
monton la ayuda que me has proporcionado y con la rapidez que lo has hecho.He seguido tus pasos y PERFECTO.
Gracias por tu ayuda.
Un abrazo

Rosa

Gracias a ti Brakss, por confiar en mi ;)

Andrés

Hi.
Buscando información para publicar en mis 2 blog: uno de musica, cine y el de ayuda, encontre tu blog y esta muy bueno, estas ayudando a la gente que esta comenzando en esto de los blogs y me parece muy bien.
Bueno, también ayudo algo, a la gente que esta comenzando en los blogs, pero a paso lento, jejeje, no posteo digamos que todos los días, asi que te invito a me visites y me digas que te parece?, acepto criticas.
Con respecto a este post de la imagen en la cabecera, la verdad que muy largo, he publicado sobre esto pero un metodo mas fácil, si puedes lo haces, con solamente 2 pasos.
Tu metodo vale, pero borramos demasiado, no lo tomes a mal.
Saludos.
Bye.

Rosa

Andrés, si me conocieras un poco, sabrías que no me voy a tomar ninguna cr´tica y, menos aún, cualquier sugerencia a mal...:)

Simplemente trato de ayudar explicando los trucos que otros han hecho antes, a veces están en páginas inglesas que no todo el mundo entiende, cuando es así siempre pongo la fuente y cuando no encuentro lo que alguien me pide, pues me pongo manos a la obra, como así ha sido en este caso, y me lo curro yo solita.
El caso es que seguro no es la manera ideal, ¡pero resultó! y esa era la finalidad.
¡Un saludo! ;) Y no dejes de volver y de opinar LO QUE SEA.

Andrés

Hi.
Simplemente dije que tu post esta muy largo, este truco tu lo has hecho porque no existe ninguna fuente. No vale picarse.
Dejare de opinar, a partir de ahora en tu blog. Lo siento.
Bye.

Rosa

Andrés, no entiendo que te ha molestado de mi respuesta...algo has malinterpretado mal...lo siento a lo mejor es la forma de expresarnos en España...pero creo que has entendido todo lo contrario de lo que quise decir:(

Canoso

Gracias Rosa, un amigo me recomendó tú página y gracias a ella he conseguido poner el dichoso banner en la cabecera. Yo lo había intentado antes muchas veces y no lo había conseguido.

Rosa

Canoso, me alegra haberte sido útil:)

MediCoFreaK

Wola Rosa, me preguntaba si es posible que me explicaras como consigues que tu cabecera(titulo del blog) no tenga limite de anchura igual que la barra de menu... Muchas gracias!

Rosa

MediCoFreaK , el ancho de mi cabecera es normal, más o menos 750px.
Lo que ves que parece la cabecera, en realidad es una imagen de fondo aplicada en body, del mismo alto y color que la cabecera y por eso parece que son la misma cosa, aunque no es así.
En cuanto al menú está colocado debajo del header, pero no en un elemento html, sino directamente en la plantilla, con lo que al ponerle un 100% de ancho, ocupa toda la pantalla.

Echizen

Rosa... quizas parezca algo tonto pero no logro poner la imagen de cabecera... sé que esta entrada es vieja... pero realmente necesito la ayuda... ya se que se cambia desde el diseño directamente, pero no me toma la imagen. Como habras visto antes, uso la minima black, pero ya probé todas las formas posibles y no me queda la imagen.

Rosa

Echize Procura que el formato de la imagen no sea .gif ni .png a veces no las toma en esos formatos.

Limpia la caché del navegador o trata de subir la imagen usando otro navegador distinto al habitual.

O prueba accediendo a tu panel desde Blogger in Draft: http://draft.blogger.com/

Tiene que tomarla...

Echizen

gracias Rosa... probé lo que me dijiste y tampoco pude... la imagen es .jpg, no se si tendré que cambiar algo en el html... no lo se... la verdad ya lo hice en otro blog de mi novio para ayudarlo eso de sustituir la imagen y no tuve problemas... pero aca no me deja... no me la toma de ninguna manera...
igualmente muchisimas gracias! ;)

Rosa

Echizen Me parece bastante raro...en fin, mira a ver si te sale así:

http://elescaparatederosa.blogspot.com/2007/01/poner-una-imagen-como-cabecera-del-blog.html

encarna

Hola Rosa, me gustaría saber si la plantilla 897 se puede ensanchar.
Muchas gracias, ehnorabuena por el blog, es estupendo. Mil amores.

Rosa

encarna Todas las plantillas pueden ensancharse, el problema es que si queremos respetar su formato original, en algunas como es la tuya (897) habría que construir nuevas imágenes para sus fondos...y lleva bastantes.
O sea, sería casi como diseñarla de nuevo a mayor tamaño, y es que además yo en lo de las imágenes...nula por completo:(

Mario Pera

rosa un favor, yo uso la plantilla 897 de blogger y he intentado todos los trucos habidos en internet para poder poner el boton de "seguir leyendo" porque mis post resultan algo extensos pero por mas que he tratado varias formulas con ninguna he podido tener buenos resultados, mi idea es que solo figure los dos primeros parrafos de cada entrada y que luego venga el "continuar leyendo"...para que ese ckick te lleve a una nueva pagina donde se desarrolla todo la entrada en si. Muchas gracias de antemano por tu amable respuesta. saludos

Mario Pera

por siacaso mi blog es: http://familiapera.blogspot.com/

Rosa

Mario Pera Para ese efecto precisamente no influye la plantilla, menos esa que es original de Blogger...tendrías que poder incluirlo sin mayor problema.

Mario Pera

entonces que me recomiendas que haga rosa porque hatsa ahora no he podido implementar esa importante herramienta del seguir leyendo

Rosa

Mario Pera ¿Has visto este sistema?
http://elescaparatederosa.blogspot.com/2009/07/leer-mas-con-miniatura-de-imagen.html

Es de lo más sencillo de implementar y queda muy bien.

BellaSwan

¡Hola Rosa!

Ante todo felicitarte por este magnífico trabajo bloggero...¡No puedo creerlo! Qué gran mundo que has montado aquí, lleno de trucos...genial para los que no tenemos ni idea como yo XD.

He podido hacer varias cosas, como poner un buttom de enlace (que no sabía) o cambiar el texto de ''comentarios'' por otro.

Pero, para que mi blog vaya adquiriendo forma, querría una IMAGEN DE CABECERA O BANNER. ¿Qué pasa? Qué no puedo ponerla...¡No me deja! Y no se como hacerlo.

Mi plantilla es MINIMA, de tres columnas. ¿Cómo le pongo imagen de cabecera? Probé de todas las maneras y no se. Supongo que es un código HTML de estos, pero no se como cambiarlo o qué poner...¿Me ayudas?

Gracias y felicidades de nuevo

este es ^^

Rosa

BellaSwan No me dices si has tratado de hacerlo con la opción más sencilla:

http://elescaparatederosa.blogspot.com/2007/04/imagen-de-cabecera-opcion-de-blogger.html

BellaSwan

Sí Rosa, fue lo primero que intenté. Subí desde mi PC la imagen y no aparece en el cabecero. La subí desde URL y tampoco.
La plantilla está bien descargada, le puse fondos y mil cosas...Pero con la cabecera no hay manera. ¿Qué opción me queda?

BellaSwan

Aquí de nuevo :(

Rosa, hice progresos, y desde EDITAR HTML pude poner la imagen a mi cabecera. Pero: ¿Cómo quito el titulo y la descripción de esta?
Ya que no puedo hacerlo más que en el modo Editar HTML...


mil gracias!

Rosa

BellaSwan Localiza en la plantilla esto:
#header h1{
Y justo debajo de esa línea, añades: display:none;

Un poco más abajo estará:
#header .description{

Haces ahí lo mismo.

BellaSwan

¡Rosa eres estupenda! :D se quitó!

Pero...(dios, el día que deje de poner peros...) Se ha empequeñecido el cuadradito ahora que no hay texto. Estuve jugando con los píxles (vamos, tocando donde no debía) y no hubo cambios.

¿Qué podría hacer?

BellaSwan

Listo Listo...seguí tocando y ¡EUREKA!

Sin más...un millón de gracias. ¡Gracias!

(Y afiliada a mi blog ^^, esto no se lo puede perder nadie, juas juas!)

Rosa

BellaSwan Muy bien hecho! Tu "toca" que no va a romperse nada... en esto de los códigos todos los fallos tienen solución ;) y "tocando" es como se aprende.

Carolina

Hola Rosa, quería hacerte una consulta con respecto a la imagen en la cabecera. En mi blog la imagen que coloqué en la cabecera se ve perfecta en FIREFOX, pero en IE se ve fuera de cuadro. La imagen es de 900 pixels de largo igual que el ancho del outer-wrapper,pero seguramente algo no está bien en el código.
Desde ya te dejo un "mil gracias" y un deseo de buenisima semana.
:D

Rosa

Carolina Prueba en esta parte del código:
#header-wrapper {
position: relative;
_height: 0;
}

#header-inner {
bottom left no-repeat;
_height: 0;
}

A eliminar el guión antes del height y añade ahí el ancho de la imagen:
height: 124px;

Anota como estaba antes del cambio, pues esa plantilla es adaptada de la original y no estoy segura del todo de que funcione ¿ok?

Carolina

Rosa: resultó perfecto!!! Muchisimas gracias! No uso IE pero me molestaba ver esa imperfección en la cabecera por aquellos que si lo usan, en fin, sigo fana de Firefox :D
Te envio un abrazo y siempre leo las novedades del blog por el correo.
Buenisima semana

Gabbo The Fox

Hola, Rosa. Pues está bueno tu post y la verdad tengo esa plantilla de mi blog, pero no he hecho los cambios en la cabecera y quisiera sugerirte que haga más trucos para modificar este tipo de plantilla como cambiar el fondo de un color a una imágen y todo lo demás. Gracias!!

Rosa

Gabbo The Fox El fondo de esa plantilla está compuesto por varias imágenes... cambiarles el color y demás, sería cada uno con un programa de dibujo supongo...

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