ir arriba
Google

Insertar imagen en cabecera de la plantilla son of moto

Atendiendo a la petición de un lector que quería saber como insertar una imagen en la cabecera del blog , aprovecho y os explico a todos los que tengais la plantilla Son of moto cual es la forma posible de hacer la transformación; a continuación teneis el trozo de plantilla en el que vamos a trabajar, identificarla;


1º.- Espacio de la plantilla donde vamos a trabajar

/* Primary layout */

body {
margin: 0;
padding: 0;
border: 0;
text-align: center;
color: $mainTextColor;
background: #692 url(http://www.blogblog.com/moto_son/outerwrap.gif) top center repeat-y;
font-size: small;
}

img {
border: 0;
display: block;
}

.clear {
clear: both;
}
/* Wrapper */

#outer-wrapper {
margin: 0 auto;
border: 0;
width: 692px;
text-align: left;
background: $mainBgColor url(http://www.blogblog.com/moto_son/innerwrap.gif) top right repeat-y;
font: $bodyFont;
}

/* Header */

#header-wrapper {
background: #8b2 url(http://www.blogblog.com/moto_son/headbotborder.gif) bottom left repeat-x;
margin: 0 auto;
padding: 0 0 15px 0;
border: 0;
}

#header h1 {
text-align: left;
font-size: 200%;
color: $pageHeaderColor;
margin: 0;
padding: 15px 20px 0 20px;
background-image: url(http://www.blogblog.com/moto_son/topper.gif);
background-repeat: repeat-x;
background-position: top left;
}

h1 a, h1 a:link, h1 a:visited {
color: $pageHeaderColor;
}

#header .description {
font-size: 110%;
text-align: left;
padding: 3px 20px 10px 23px;
margin: 0;
line-height:140%;
color: $blogDescriptionColor;
}

2º.-Trabajar la imagen
Lo siguiente que nos hará falta será la imagen que queramos ingresar en la cabecera, antes que nada unos pequeños consejos para que esta no pierda calidad, que la anchura no sea inferior a 500 pixels y la altura nunca debera ser mayor a 200 pixels (porque la plantilla por defecto la estrechará y la imagen quedará distorsionada) Todo esto se puede hacer en un editor de fotos, quien lo tenga no hay problema pero para quien no lo tenga existe en linea la siguiente herramienta en linea que podrá utilizar sin ningún problema, viene en español;podreis cargando vuestra imagen del ordenador redimensionarla y ver como queda, si os gusta y no esta muy distorsionada o pixelada para introducirla en vuestro ordenador. Una vez tengais la imagen a punto nos iremos al siguiente paso.

3º.- Alojar la imagen en Internet
Para ello os vais al servicio de alojamiento de imágenes en internet imageshack una vez cargada vuestra imagen os aparecerá la siguiente pantalla;
Para visualizar mejor, pinchar sobre la imágen

Como veis teneis la última dirección seleccionada en azul; será esta la dirección que trabajemos.

4º.-Cambios en la plantilla;
Vereis que en la plantilla os he señalado dos cosas en la primera eliminamos la url que nos dan y la sustituimos por la url de nuestra imagen quedando así;
#8b2 url(http://www.blogblog.com/moto_son/headbotborder.gif) por #8b2 url(http://img517.imageshack.us/img517/5973/prueba1nz2.jpg)
y en la segunda;
url(http://www.blogblog.com/moto_son/topper.gif); hacemos la siguiente operación simplemente eliminamos el contenido de los parentésis, ojo!! Los paréntesis no hay que eliminarlos.

5º.- Visualizar los cambios;
Ya sólo nos queda a darle a guardar plantilla y ver blog Para ver el resultado.

Siempre debeis tener en cuenta que guardando vuestra plantilla en un documento antes de realizar todas estas operaciones os asegura que si os equivocais o no os gusta el resultado os ireis a la plantilla; eliminais todo el código y pegais la que habeis guardado anteriormente; es una forma de trabajar sin presión y realizando los cambios sin miedo a equivocarse.

Acordaros que estos cambios son para la plantilla son of moto;-No os acordais que plantilla teneis? Cuál es la que elegí? Vamos a solucionarlo....
En el código de la plantilla hay un trozo casi al principio como este
-----------------------------------------------
Blogger Template Style
Name: Son of Moto (Mean Green Blogging Machine variation) Este es el nombre de vuestra plantilla elegida
Designer: Jeffrey Zeldman
URL: www.zeldman.com
Date: 23 Feb 2004
Updated by: Blogger Team
----------------------------------------------- */

Ya lo teneis todo paso a paso, sino sale a la primera probar con la segunda, ya vereis que no necesitareis la tercera ;)

6 comentarios:

-Leonardo Miquilena- dijo...

hola muñeca... pasando a visitar tu blogs.. llegue a el a traves.. de mi amiga silvia.. lo vi en su nueva seccion, esta muy interesante, lo voy a detallar con mas tiempo.. tienes muy buenos consejos... una pregunta.. como logras el efecto para que los logos.. se paseen en forma de una cascada.. los que tienes en la sidebar tambien quisiera enlazarte.. espero respondas mi preguntas.. saludos.. y besos.. y muchos abrazos.

Carmen Martin dijo...

Hola leo!!!
Primero al trabajo!! el efecto está en editar textos y luego en texto en movimiento es un codigo html marquee muy sencillo, espero que los encuentres si no es así te doy la ruta exacta.
Tambien veras que lo puedes hacer en horizontal..
Bueno gracias por lo de muñeca; si quieres enlazrme no hay problema al final de cada post tienes código para hacerlo, yo por mi parte te incluyo en la sección de pont ublog aqui.
Salu2 y vuelve siempre que quieras...

Sambanorte dijo...

Gracias por tu ayuda, ya he conseguido poner la imagen en el titulo de mi blog
No se como agradcertelo, ahora si que me gusta
Me gustaria que me dijeras si ves algun defecto en mi blog o alguna sugerencia sobre él
Un saludo y gracias otra vez

Carmen Martin dijo...

Me alegro!! ;).He pasado por el blog y te ha quedado bien la implementación de la cabecera. Darte opinión sobre el blog?? Pues la verdad me pones en un compromiso...
Un blog es una herramienta de expresión personal, y refleja tu persona, es como a todos no caemos bien por lo que a todos no podemos gustar...
Hay una regla de Oro, si quieres que lean los articulos no lo cargues demasiado en la barra distrae la atención de lo que redactes...por si te interesa... :)

Ana dijo...

Sabes si hay manera de quitar esa greca que queda justo debajo de la foto?

Gráfica dijo...

Hola Ana!!!
Si te refieres a la plantilla son of moto te digo; busca esta parte del código en la plantilla

/* Header */

#header-wrapper {
background: #8b2 url(http://www.blogblog.com/moto_son/headbotborder.gif) bottom left repeat-x;
margin: 0 auto;
padding: 0 0 15px 0;
border: 0;
}

Elimina la url que hay entre parentesis...el http:// dale a guardar y publicalo te habrá desaparecido...si no observas los cambios a la primera dale a actualizar ;O)

Ultimos Posts

Enlazáme

O puedes tambier copiar y pegar las siguientes opciones; elige la que mas te guste!! Trucos blog ( Esta última simplemente selecciona el enlace y copia y pega en tu espacio )