Configuración:
.
Biología
.
Botánica
.
Tecnología
.
Sociedad
A mis trece años de edad, el día 2 de Diciembre de 2007 inicié ‘El Balcón de Jame’. Este humilde espacio, cuyo secreto siempre fue el de compartir sin recibir nada a cambio, me dio la oportunidad de conocer un mundo nuevo, un entorno en el que me sentía yo mismo.

Hoy, 17 de abril de 2011 finalizo esta etapa de mi vida con una gran sonrisa y junto al recuerdo que este blog y cada unos de vosotros me habéis concedido.

He sido bloggero.

Jaime Trujillo Escobedo.

Imagen como cabecera del blog

Este truco es verdaderamente útil, sobre todo si queremos personalizar el blog.

Comencemos alojando la imagen en un servidor, para poder así obtener su dirección (URL) y realizar el truco.

Algunos sitios para alojar imágenes son:

Tinypic

Photobucket

Imageshack

Blogger también puede servirnos para alojar una imagen.

Seguidamente debes obtener su URL. En caso de no saber cómo conseguirla, mira esta entrada.

A continuación sigue los siguientes pasos:

Diseño>edición HTML>expandimos artilugios




Busca estos bloques de CSS en tu plantilla:

#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}
#header {
margin: 5px;
border: 1px solid $bordercolor;
text-align: center;
color:$pagetitlecolor;
}


A continuación añadiremos la línea de fondo (el background).

Es aconsejable que la imagen mida 400 píxeles de ancho (aproximadamente) de manera que no se quede "corta" en la cabecera.

Para que te hagas una idea, en el primer bloque
encontrarás la línea width:660px; que indica el ancho de la cabecera. La imagen debería ser similar a ese valor (en este caso 660).

Para poner una imagen de fondo debes agregar la siguiente línea en el primer bloque:

background: transparent url(URL DE TU IMAGEN) no-repeat;

El valor no-repeat (no repetir) indica que la imagen no se repetirá. Si quieres que la imagen se repita (puede servir de utilidad si la imagen es pequeña) cambia no-repeat por repeat.

Sustituye URL DE TU IMAGEN por la dirección de la imagen que alojaste en el servidor.

Puedes ver como he incluido la línea del fondo en el primer bloque:

#header-wrapper {
width:500px;
margin:0 auto 10px;
}
#header {
margin: 5px;height:100px;
background: transparent url(URL DE TU IMAGEN) no-repeat;
text-align: center;
color:$pagetitlecolor;
}

Si tienes alguna duda o necesitas ayuda puedes consultarme por medio de un comentario.

bleid dice...

Hola jaime
si te fijas en mi blog, la cabecera no esta bien centrada, ya que se ven lineas blancas alrededor ademas de un buscador degoogle en verde.quisiera quitarlo y poner una imagen nueva de cabecera, pero quequede ajustada a la perfeccion.Ademas el cuerpo del blog esta dividido en tres (cuerpo y sidebars) me gustaria que entre el cuerpo y las sidebars no se viera la separacion por lines blancas no se si eso se soluciona con un fondo , pero me gustara que quedara mas o menos como el tuyo, para que sea mas agradable a la vista.Y ya puestos, tambien quisieraenmarcar los gagets mas o menos como en el tuyo con una barra chula de seguidores y un marquito chulo.
bueno ya se que pido demasiado, he intentado hacer cosas yo , sin molestarte y algunas me han salido bien pero en otras no me aclaro.
muchas gracias
un saludo

Jaime Trujillo Escobedo dice...

bleid, a continuación te dejo las respuestas a tus preguntas:

1) El buscador de google es un Add, seguramente haya sido añadido por medio de un gadget. En ese caso sólo tienes que eliminarlo.

Para ajustar la cabecera a la perfección ve a Diseño > Edición de HTML y busca el siguiente bloque de CSS:

#header {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:transparent url(http://img31.imageshack.us/img31/7839/koti3.jpg) no-repeat scroll left bottom;
height:150px;
padding:0 15px 8px;
}

Cambia el 8 por un 0. si quieres cambiar la imagen, borra la línea http://img31.imageshack.us/img31/7839/koti3.jpg e incluye la url de otra.

2) Para quitar las líneas de separación, busca este bloque de CSS:

#main {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:transparent url(http://www.blogblog.com/rounders4/rails_main.gif) repeat-y scroll 0 0;
padding:0;
}

Y elimina la línea del fondo (marcada en negrita).

Con eso eliminarás las líneas azules del cuerpo de las entradas.

Las líneas blancas no son más que espacio. Podrías agregar el mismo color de fondo que tienes en el main-wrapper al blog.

Para hacerlo busca el bloque de CSS:

body {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
-x-system-font:none;
background:#FFFFFF url(http://img215.imageshack.us/img215/6872/bgbm7.jpg) repeat scroll left top;
color:#4C4C4C;
font-family:Trebuchet MS,Verdana,Arial,Sans-serif;
font-size:small;
font-size-adjust:none;
font-stretch:normal;
font-style:normal;
font-variant:normal;
font-weight:normal;
line-height:normal;
margin:0;
text-align:center;
}

Y cambia #FFFFFF por #E0ECFF.

3) Para enmarcar los gadgets busca este bloque de CSS:

.widget-content {
margin-top:0.5em;
}

Y cámbialo por este otro:

.widget-content {
margin-top:0.5em;
padding: 3px;
border: 1px solid #000000;
}

El color del borde es #000000 (negro). Para cambiarlo usa la tabla de colores.

Al parecer eso es todo. Si necesitas cualquier otra cosilla solo tienes que decírmelo ;).

ASIECAH dice...

este </body> no lo encuentro en mi plantilla a igual que los codigos para enmnarcar los gadgets

Jaime Trujillo Escobedo dice...

ASIECAH, no veo el paso en el que se cite dicha etiqueta e incluso dudo que se necesite para realizar este truco. Aún así, prueba a buscar simplemente <body o la línea:

<body expr:class='"loading" + data:blog.mobileClass'>

Recuerda que puedes utilizar el buscador de tu navegador (pulsa las teclas Ctrl y F -simultáneamente- para abrirlo).

Escribe tu comentario en la entrada...

El Balcón de Jaime fue terminado el 17 de abril de 2011. Leer despedida.

Me gustaría conocer tu opinión. El comentario será moderado y en breve se publicará.

Si deseas incluir un enlace utiliza este código:

<a href="Dirección de tu página">Titulo del enlace</a>

Para publicar un código haz uso del Conversor de entidades.

Intenta escribir sobre algo relacionado con el artículo. Si no lo haces, podría tardar en responderte.

¿Problemas al comentar? Utiliza el formulario antiguo