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.
Artículos Relacionados
