Esta es una página que te ayudará a colocar accesorios al blog. Aprenderás como mejorar tu blog. Pasa y encontrarás de todo un poco.
Cargando

Cambiar la cabecera por una imagen (Plantillas Denim) -45-

Cabecera de página.- Visualiza el título y la descripción de tu blog.

Para insertar una imagen en la cabecera necesitaremos agregar algunos códigos y a su vez hacer algunas modificaciones en el blog. Esto prácticamente resulta para la plantillas Denim (Stretch Denim, Washed Denim, Stretch Denim Light).
Te recomiendo que no te arriesgues hacer esto con las otras plantillas porque las modificaciones no van hacer iguales para las demás. Quizás esto te puede servir simplemente para guiarte.

En la cabecera de las plantillas Denim eliminaremos un borde y el título para luego agregar la imagen:
1. Ir a Plantilla, después a Edición de HTML y clic en Expandir plantillas de artilugios. Entonces, ahora buscamos lo siguiente:

/* Header
----------------------------------------------- */

#header {
width: 760px;
margin: 0 auto;
background-color: $headerBgColor;
border: 1px solid $headerBgColor;
color: $headerTextColor;
padding: 0;
font: $headerFont;
}

h1.title {
padding-top: 38px;
margin: 0 14px .1em;
line-height: 1.2em;
font-size: 100%;
}

2. Se tiene que cambiar el valor del border de header, entonces el nuevo valor será: border:0 (sin px). Después en el mismo header agregamos lo siguiente:
background: url(http://Aquí-la-direccion-de-tu-imagen) no-repeat;
Entonces el resultado seria así:

#header {
width: 760px;
margin: 0 auto;
background-color: $headerBgColor;
background: url(http://i151.photobucket.com/andrewmusic1/Ayudaparaelblog.jpg) no-repeat;
border: 0
solid $headerBgColor;
color: $headerTextColor;
padding: 0;
font: $headerFont;
}

3. En h1.title ocultamos el título, así que tendrás que agregar lo siguiente (lo que esta en azul):

h1.title {
padding-top: 38px;
margin: 0 14px .1em;
line-height: 1.2em;
font-size: 100%;
visibility:hidden;
}

- La imagen que vas a colocar en la cabecera tiene que tener un ancho de 760 px y un alto de 120 px. Estos valores son simplemente un aproximado.
- Otra alternativa para este tipo de plantillas es utilizar: Cambiar el titulo por una imagen.
El resultado seria así:
En este ejemplo el titulo y la descripción del blog son imágenes.

Cambiar el título por una imagen
Cambiar la descripción por una imagen

11 Comentarios:

Aviber dijo...

Hola Andrés:

Una ayuda invalorable es la que proporciona tu blog,he instlado la imagen de cabecera y quiero modificarla en el alto,pero no encuentro la manera de hacerlo ya que no veo height,si puedes ayudarme te agradezco desde ya

Andrés dijo...

Aviber: Tendrías que agregarlo debajo del width y jugar con los valores.
Gracias por la visita.

Voda dijo...

Andres, no sabes de verdad como me ayudó este dato. Date una vuelta por mi blog, y checa la cabecera como quedó. Muchìsimas gracias!!!!!!!!!!

gaby dijo...

Hola Andrés: Disculpa la molestia, pero ojalá puedas ayudarme.
Un amigo va a hacerme una cabecera para mi blog y me pregunta las medidas.
Y como no deseo confesarle mi novates en estas lides, espero me ayudes.
¿Las medidas son esas que has puesto Ancho-760 px; Alto-120 px?.

Por cierto..... ¿Que es px?.

Perdoname, pero es que de verdad estas cosas me superan (por ahora).
Muchas gracias.

Anónimo dijo...

Hola,me podes ayudar? Bueno,Tengo un blog y le coloque en la cabecera una imagen con un reproductor junto en color negro,solo que la cabecera de mi blog de fondo es azul y quiero saber si da para dejar de color negro, delmismo color del reproduuctor Gracias por leer y contestar Saludos ha!que bueno esta tu pagina la pagina de mi blo es: http://cristalfm1079.blospot.com

Anónimo dijo...

Hola,me podes ayudar? Bueno,Tengo un blog y le coloque en la cabecera una imagen con un reproductor junto en color negro,solo que la cabecera de mi blog de fondo es azul y quiero saber si da para dejar de color negro, delmismo color del reproduuctor Gracias por leer y contestar Saludos ha!que bueno esta tu pagina la pagina de mi blo es: http://cristalfm1079.blospot.com

ayudaaaa jajajajja dijo...

hice todo lo que me pusiste en la planilla denim pero no me sale nada, me acepta las formulas pero no se ve, tenes idea que podra ser.....camy

Fede dijo...

Pues la verdad este es un tema con el que estoy luchando hace dias y no encuentro la solucion.
Mi plantilla es de ThemeLib modelo CristalX y al cambiar la imagen por los px exactos que tiene me queda un poco fuera de cuadro la imagen que subo y no entiendo porque, ya que me he fijado en la configuracion html de mi plantilla y he subido la imagen con la misma caracteristica, quedandome la imagejn del lado derecho unos milimetros fuera y del lado izquierdo le faltan los mismos milimetros para quedar la imagen dentro. Alguien me puede dar una mano por favos? Gracias, como siempre el blog dandonos una mano en todo.

Totty_Chan dijo...

muchas gracias!! no podia poner la imagen en la cabecera, pero con lo que pusiste lo pude hacer^^!!
muchisimas gracias!! =D

carlos dijo...

Además o mejor que cambiar la cabecera.
En pczeros hay un excelente tutorial para que puedas cambiar el cambiar el fondo del blog, además hay algunos fondos para que puedas elegir y otros cientos de accesorios para el blog. Yo ya cambié el mio y quedo de 10. Muy bueno el post y un saludo para todoooossss!!

Angel (solo de nombre) dijo...

HOLA muy copado tu ayuda... pero en esta plantilla tengo una gran duda, ya remplacé por una imagen el header. pero exite una variable llamada headerCornersColor que es lo que envuelve el HEADER a la izquierda y a la derecha.
Como puedo hacer que eso sea también otra imagen..??

Muchas gracias

Related Posts with Thumbnails
Últimos Post