Aporte de Jorge Gomez de Mexico
Hola a todos, esta es mi primera participación en este blog, es acerca de como poner una imagen en el titulo del blog, aunque ya ha habido 2 post anteriores a este refiriéndose a como hacerlo e visto que aun hay muchos a los que no les ha resultado, espero que la información que les dejo les sea de utilidad, trate de modificar en mas mínimo el código original.
1.- lo primero que habrá de hacer es subir la imagen a blog, has como si fueras a subir una imagen cualquiera, agrega una entrada agrega la imagen, solo que deberás de seleccionar la opción Grande, cárgala y checate el código HTML busca la parte donde dice “http://photos…….. .Jpg” esta dirección cópiala y pégala en un documento de texto y déjala pendiente, ahora cámbiate a Plantilla, no publiques la entrada, esto era solo para subir la imagen.
2.-una vez que estés en Plantilla vas a buscar:
/* Header
----------------------------------------------- */
@media all {
#header {
width:660px;
margin:0 auto 10px;
border:1px solid #333;
}
}
aquí haremos las primeras modificaciones
después de: #header { deberás de escribir Background: url(“aquí vas a poner la dirección que tenias reservada en el documento de texto, la que te dio después de subir la imagen a blog”).
después de la dirección deberás de poner el código no-repeat left top; para que tu imagen no se repita;
Width: el cual te aparece con 660px, yo lo cambie por 990 por que mi imagen abarca casi todo el ancho de la pagina
Margin: se deja como esta
Border: borras los valores y escribe none
de tal manera que te quede así:
@media all {
#header {
background: url("http://photos1.blogger.com/blogger/4423/3254/1600/Iacosworldbueno.jpg")
no-repeat left top;
width:990px;
margin:0 auto 10px;
border:none
}
3.- lo siguiente en la plantilla a modificar :
código original:
#blog-title {
margin:5px 5px 0;
padding:20px 20px .25em;
border:1px solid #222;
border-width:1px 1px 0;
font-size:200%;
line-height:1.2em;
color:#ccc;
text-transform:uppercase;
letter-spacing:.2em;
}
Modificar: Padding:20px 20px 20px 20px; esto es para que nos quede centrada
border:none para eliminar el borde
font-size: 0% para eliminar las letras del titulo de tal manera que quede así:
#blog-title {
margin:5px 5px 0;
padding:20px 20px 20px 20px;
border:none
border-width:1px 1px 0;
font-size:0%;
line-height:1.2em;
color:#ccc;
text-transform:uppercase;
letter-spacing:.2em;
}
4.- la ultima parte a modificar es:
#description {
margin:0 5px 5px;
padding:0 20px 20px;
border:1px solid #222;
border-width:0 1px 1px;
font:78%/1.4em "Trebuchet MS",Trebuchet,Arial,Verdana,Sans-serif;
text-transform:uppercase;
letter-spacing:.2em;
color:#777;
}
aqui cambiar
Padding: por 0 0 90 (en vez de noventa puede ser más con esto ajustamos el alto de la imagen)
Border: none
font: 0% para que nos quede así
#description {
margin:0 5px 5px;
padding:0 0 90px;
border:none
border-width:0 1px 1px;
font:0% "Trebuchet MS",Trebuchet,Arial,Verdana,Sans-serif;
text-transform:uppercase;
letter-spacing:.2em;
color:#777;
}
y eso seria todo lo que debemos de hacer para cambiar el header del blog original por una imagen , solo me resta decirte que la imagen que subas si la quieres del ancho de la pagina (aprox) deberá de medir 992 * 172 píxeles, checa que el ancho de la imagen esta directamente relacionado con el Width de #header para que con tu imagen hagas los ajustes necesarios.
Espero haberles ayudado ,Suerte.
