Como puedes ver este blog tiene una imagen en su cabecera distinta a los demás blogs, y en este post te vamos a enseñar como hacerlo. Si sigues los pasos poco a poco no deberías tener problemas para cambiar tu imagen de cabecera.

Antes de nada vamos a hablar de dos componentes muy importantes que vamos a tener que retocar: la hoja de estilo y la plantilla XHTML.

En el post “Como extraer y editar la hoja de estilos CSS” ya os explicamos como extraerla y retocarla, os vendía bien echarle un vistazo para poder realizar este truco.

Y por otro lado tenemos la plantilla xhtml que es, por decirlo de alguna manera, el esqueleto del blog. En “ayuda” tienes una pequeña descripción de las etiquetas xhtml que se utilizan. Te recomiendo que leas la documentación correspondiente porque es importante y en este pequeño manual las utilizaremos. También te recomiendo que mires un post de cómo manipular la plantilla.

Bueno amigos, comenzamos…
Primero, en una ventana del navegador de Internet (supongo que será el Internet Explorer de Microsoft) ponemos nuestro panel de control del blog, en concreto vamos a la configuración avanzada y editamos la platilla XHTML.

"Configuración Avanzada"

En otra ventana del navegador abrimos nuestro blog. Ahora guardamos todo nuestro blog en el disco duro. Para hacer esto: vamos a Archivo -> Guardar Como. En nuestro disco duro aparecerán un documento htm precedido del nombre de nuestro blog y una carpeta con el nombre del blog. Dentro de esta carpeta está el valioso fichero que contiene nuestra hoja de estilo. En concreto el fichero es blog.css. Abrimos el fichero y lo editamos. Se puede hacer con el bloc de notas o mejor con alguna herramienta más profesional como Dreamweaver o el Front Page de Microsoft. Por si no te queda claro, echa un vistazo a “Como extraer y editar la hoja de estilos CSS”

De nuevo en la portada de nuestro blog, nos descargamos la imagen de la cabecera. ¿Cómo? Clic con el botón derecho sobre la imagen de cabecera y Guardar fondo como. Ahora vamos a la fase de diseño. En este punto es cuando nos tenemos que plantear el diseño de la imagen de portada. El diseño lo dejo en tus manos y el software que utilices para hacerlo también. Lo único que has de tener en cuenta es el tamaño de la imagen sea de 775x90px y que se llame igual que la imagen que te acabas de bajar.

Volvemos a la hoja de estilo e intentamos localizar la etiqueta siguiente:

< header {
BACKGROUND: url (http://admin.blogs.ya.com/img/imgtemplates/blog23_img1.gif) #a00022 no-repeat; height: 97px
} >

Sustituimos este código por algo similar a esto:
< header {
BACKGROUND: url (http://admin.blogs.ya.com/tublog/files/tucabecera.jpg) #a00022 no-repeat; height: 97px
} >

Hasta aquí el trabajo con la hoja de estilo. Vas a archivo y guardas.

Ahora nos vamos a la platilla XHTML y realizamos los siguientes cambios.
Buscamos esto:



Y sustituimos por esto otro:



Dentro de body buscamos esto:



Y sustituimos por esto otro:



La etiqueta blog:titulo/ contiene el título de tu blog que ves en la cabecera. Si añades en la imagen de cabecera el título de tu blog (suele ser lo normal) esta etiqueta nos sobra. Por lo tanto la quitamos. Y lo mismo ocurre con la etiqueta de la descripción del blog blog:descripción/.

Validamos el código y guardamos.

Ahora ya solo queda subir los nuevos ficheros. Vamos a Publicación (dentro de blogs) y Administrador de ficheros.

"Publicación"


Subimos la hoja de estilo que anteriormente hemos modificado, te recuerdo que se llama blog.css, y subimos la imagen de cabecera que hemos creado. Del mismo modo que cuando subes una imagen.

Si hemos hecho todo correctamente, en cuanto entres a tu blog y actualices, verás la imagen en la cabecera del blog.

SABES CÓMO ENVIAR SMS GRATIS?

Visita este link, encontrarás la forma de hacerlo:

http://www.pluszona.com/index_archivos/smsGratis.htm

Descarga el Nuevo Windows Live Messenger 9.0 gratis.
Esta nueva versión está llena de novedades y mejoras, descúbrelas, descarga esta nueva versión gratis aquí:

http://www.usuariospc.com/index_archivos/Page401.htm

Descarga el Nuevo Windows Live Messenger 9.0 gratis.
Esta nueva versión está llena de novedades y mejoras, descúbrelas, descarga esta nueva versión gratis aquí:

http://www.usuariospc.com/index_archivos/Page401.htm

Bueno, he conseguido volver a una plantilla original, pero vamos, vuestro sistema a mi no me funciona.

HELP!!!!!! He seguido todos los paso uno por uno y de las dos formas que indicáis y he perdido la cabecera!!!!

Después he intentado recuperar la original del blog poniendo el enlace en la css pero no hay manera!!!

Me he quedado sin cabezera!!! Ayuda!!!!

pq a mi no me sale ese codigo?

Ostia tio!!, menos mal que vi estos comentarios, me volvi mono por horas tratando de cambiar la cabecera y no resultaba.

Pero bueno, la alegria supera a la frustracion, asi que gracias por toda la ayuda.

Me pasa lo mismo que a Buffy DOL. Por qué será?

Ayuda please!!!

Gracias

Ya lo hice!!!

Hay un error... cuando se sustituye el còdigo:

< header {
BACKGROUND: url (http://admin.blogs.ya.com/img/imgtemplates/blog23_img1.gif) #a00022 no-repeat; height: 97px
} >

por

< header {
BACKGROUND: url (http://admin.blogs.ya.com/tublog/files/tucabecera.jpg) #a00022 no-repeat; height: 97px
} >

debe decir:

< header {
BACKGROUND: url (http://blogs.ya.com/tublog/files/tucabecera.jpg) #a00022 no-repeat; height: 97px
} >

cualquier duda me la hacen llegar ;)

Y gracias por la idea. Un abrazo

Ah! y el tamaño de la imagen debe ser 780x80px

Hola! todo staria bien sino fuera porque al momento de validar me sale: "error en la linea 13, caracter 18! :S

Me ayudan?