domingo, 14 de octubre de 2007

Como centrar una imagen en la barra de cabecera de tu blog.

1_ hacemos una imagen, en este ejemplo usaremos una imagen con las siguientes características. Ancho (width): 591px Altura (height): 155px

2_ La cargamos en nuestro blog.









Apretamos "personalizar" en el menu principal










Luego apretamos “editar” en la barra de cabecera









Cargamos la imagen desde la ubicación en nuestro disco y guardamos los cambios

En este punto ya tenemos la imagen cargada y hora devemos centrala









Apretamos en la pestaña"plantilla y luego "edicion HTML"











Apretamos “ctrl.+f” y colocamos “/* Blog Header” sin las comillas Y agregamos es siguiente código justo debajo de “/* Blog Header----------------------------------------------- */”como lo indica la foto.

El margin-top: 4px; es la distancia del borde de nuestra imagen abajo y arriba, a la cabecera.

En width: 591px; pondremos el tamaño en horizontal que tiene nuestra imagen en píxeles.

En padding: 0 59px; es donde controlamos la distancia de la imagen a los lados, si lo dejamos tal cual yo lo he puesto, por ejemplo, una imagen de 591px se verá centrada en la plantilla Rounders.
Según sea el tamaño de nuestra imagen y la plantilla que estamos usando, tendremos que "jugar" con el padding. Los cambios se ven en "vista previa" lo que nos evitará problemas antes de guardar los cambios definitivos.

Y eso es todo acabamos de centrar la imagen DE HUEVO, cualquier duda comenten el post o mándenme un mail domenico03 arroba gmail.com

Perdón si me fui un poco de mi tema con una explicación técnica pero la idea de este blog es divulgar por sobre todas las cosas la libre expresión y para expresarse no basta con querer hacerlo también hay que saber hacerlo.

Un abrazo a todos.

10 comentarios:

Anónimo dijo...

borrad esto, no interesa ni un pelín

Anónimo dijo...

me sirvio de maravillas gracias por compartirlo

toms555 dijo...

discupa por quenopuedo encontrar /* Blog Header por ningun lado aunque lo busque con crtl + f ???

Samantha Kings dijo...

sencillo y simple pero necesario para algunoss xD
awww graciass me sirvio demaciadoo!! :D

q tenga mucho exito tu blogggg
:D
besos

Angel Nunez dijo...

hola... el metodo esta bien... pero hay un detalle... el resto de los objetos en el blog se centran automaticamente sin importar la resolucion de la pantalla que lo este visualizando... pero con el padding al ajustarlo en referencia a mi pantalla cuando cambio de resolucion la cabecera pierde su centro, pero el resto del blog no... como hago para que sea centrada sin importar la resolucion???

gracias anticipadas!

Angel Nunez dijo...

ya l tengo... en el padding en lugar de usar pixels hacerlo en % porciento... eso gradua segun el ancho de la pantalla que lo visualiza... gracias por este espacio de todos modos.

Unknown dijo...

No entendi puff

JuanSen dijo...

no puedo encontrar el Blog Header por ningun lado!!

kwon sang woo dijo...

grasias me sirvio mucho saludos

MADONNAMPAP dijo...

Muy útil!! Gracias