miércoles, 6 de febrero de 2008

Cómo incluir una imagen en la cabecera del blog

Uno de los aspectos que no se pueden descuidar en un blog es el diseño. Pero no me refiero a los adornos más o menos superfluos que confunden a los usuarios o llenan de ruido un blog, sino a lo que contribuye a su funcionalidad y a su caracterización. La cabecera de las bitácoras es lo primero que tenemos que cuidar, porque sencillamente es lo primero que se ve, y ya sabemos que las primeras impresiones cuentan en la vida. Los diseños de que disponemos en los gestores de los blogs suelen ser variados, pero como los usan muchos usuarios, al final nos encontramos en la Web muchos blogs "como los míos". Lo mejor en estos casos es colocar una imagen en la cabecera para personalizar nuestra bitácora, y voy a explicar dos formas de hacerlo en los blogs de Blogger.

1. Cómo tiene que ser la imagen de la cabecera

En este mismo blog escribí un artículo, Diseño y elección de la plantilla en Blogger, en el que humildemente aconsejo cómo elegir y modificar un diseño para que sea bonito, útil y claro. Ahora vamos a fijarnos en la cabecera de nuestro blog, y vamos a incluir una imagen de fondo que nos permita la identificación de nuestro blog entre tantos otros que tienen el mismo diseño. Para lograr una buena personalización de nuestra cabecera con una imagen hay que tener en cuenta lo siguiente:
  1. La imagen no tiene que ser grande ni pretenciosa; basta con un icono representativo o una imagen de tamaño medio que dé una idea del contenido del blog y que exprese la personalidad del autor o autores del blog.
  2. Como el título del blog está a la izquierda, es mejor colocar la imagen a la derecha para evitar que el texto se superponga a la imagen, aunque a veces este caso puede ser bonito, pero la imagen nunca tiene que entorpecer la lectura del título.
  3. Los diseños de los blogs de Blogger, como muchos diseños de blogs, tienen dos modalidades según tengan una anchura fija o se extiendan todo lo ancho de la pantalla (strech). Si la anchura es fija, entonces la anchura de la imagen se puede acoplar a la del diseño, pero, en caso contrario, la imagen no cambiará de anchura, mientras que la cabecera, junto a todo el diseño, se puede ensanchar más o menos.

2. Incluir la imagen como elemento de página

En Blogger, se pueden incluir imágenes en las entradas, en el lateral, en el pie y en la cebecera del diseño. Para incluirlas en las entradas, utilizamos el editor, y para incluirlas en el diseño, usamos los llamados widgets, que se encuentran en la sección de la Plantilla, dentro del Panel o zona de administración del blog; en concreto, tenemos que ir a la parte de Elementos de la página, como se ve en la siguiente imagen, que podemos ver en tamaño grande si hacemos doble clic en ella:

Ahora tenemos que editar la cabecera haciendo clic en el enlace Editar correspondiente. y aparecerá la siguiente ventana:

En este formulario podemos hacer lo siguiente:
  1. Cambiar el nombre del blog
  2. Escribir una breve descripción del blog, que aparecerá en la cabecera, debajo del título.
  3. Cargar o subir la imagen desde nuestro ordenador o desde otro servidor web donde esté alojada.
  4. Colocar la imagen detrás del título, o sustituir el título y la descripción, de forma que la imagen debe incluir el título del blog. A la vez, podemos reducir la imagen hasta los 750 píxeles de anchura.
Cuando guardamos los cambios, la imagen aparece en la cabecera alineada a la izquierda. Si el diseño es de anchura fija, entonces la imagen puede cubrir toda la cabecera con las medidas apropiadas. Pero si la anchura del diseño es flexible, habrá que ver si nos gusta como queda. No es recomendable hacer imágenes muy anchas, pues la resolución de los monitores varía, y el diseño se ensancha o se contrae para acoplarse a la pantalla.

El contenido siguiente de este artículo sólo se puede aplicar a las antiguas plantillas de Blogger, porque desde la aparición del Diseñador de plantillas de los blogs de Blogger, el código fuente ha cambiado y ya no se pueden aplicar las modificaciones que propongo en esta entrada.

3. Quitar la imagen de la cabecera en algunas plantillas

Algunas plantillas de Blogger incluyen imágenes en sus diseños, también en la cabecera. En estos casos, tendremos que quitar la imagen de la cabecera para poner la nuestra. Veamos cómo se consigue esto con la plantilla Tic Tac, de Dan Cederholm. Para ello, tendremos que quitar los enlaces a esas imágenes, que están en el código HTML de la plantilla, y entonces ya entramos en un terreno peligroso para quienes tienen miedo de enredar con el código por temor a estropear el diseño de su blog. Pero lo que vamos a realizar ahora no es tan complicado, así que vamos a la sección Diseño -> Edición HTML. Ahí está el código del diseño de nuestro blog. Antes de modificarlo, conviene guardarlo en un archivo dentro del disco duro, y para ello hacemos clic en el enlace que dice: "Descargar plantilla completa".

Si queremos quitar las dos imágenes que conforman la cabecera de la plantilla Tic Tac, entonces tendremos que borrar las siguientes líneas del código, que se encuentran en las secciones #header-wrapper y #header, y que aparecen en color rojo a continuación:
#header-wrapper {
margin: 0;
padding: 0;
font: $pagetitlefont;
background: #e0e0e0 url(http://www.blogblog.com/tictac/top_div_$startSide.gif) no-repeat $startSide top;
}

#header {
margin: 0;
padding-top: 25px;
padding-$endSide: 60px;
padding-bottom: 35px;

padding-$startSide: 160px;

color: $pagetitlecolor;
background: url(http://www.blogblog.com/tictac/top_h1.gif) no-repeat bottom $startSide;
}
El código que eliminamos es un enlace (url) a las dos imágenes del fondo (background) de la cabecera (header), que ahora se ha quedado vacía, como muestra esta imagen:

Pero aunque no se vean, el título del blog y la descripción (si la hay) están ahí, sólo que en color blanco, y por eso no se ven. Cuando pongamos una imagen nuestra de fondo, se verán si hemos colocado la imagen por detrás, según las posibilidades que vimos en la sección anterior.

Pero no todo acaba aquí, porque la imagen que incluyamos debe tener una anchura máxima de 766 píxeles para que no desborde el ancho de la cabecera. Y además, para que quede bien ubicada dentro de la cabecera, tendremos que modificar los números de los píxeles de separación que hay entre los bordes de la cabecera y los de la imagen, es decir, los padding del código, que he puesto con color azul en el código HTML de los headers de arriba. Sugiero el siguiente código para dejar la imagen de 766 píxeles bien ajustada:
padding-top: 0;
padding-$endSide: 0;
padding-bottom: 0;
padding-$startSide: 40px;
Con este código dejamos a cero las separaciones de todos los bordes menos el izquierdo, que tiene que estar a 40 píxels. No sé si esto funcionará perfectamente en todos los monitores, pero supongo que sí. En mi blog de pruebas queda así:

Espero que a vosotros os quede mejor.

4. Una solución avanzada

En este blog yo he optado por tocar el código fuente de la plantilla, porque el diseño de mi blog es mixto en cuanto a la anchura. Es decir, la anchura tiene un máximo de 1000 píxeles, pero el diseño se acopla a la resolución de la pantalla cuando la anchura es menor. Y como en este caso la imagen no se puede guardar en Blogger, la imagen tiene que estar guardada en un servidor web accesible para enlazarla desde allí . Si se desea conseguir un servidor gratuito, léase el siguiente artículo de mi blog: Espacio web gratuito para docentes.

En todo caso, si queremos colocar una imagen a la derecha de la cabecera para que no se junte con el título, tendremos que seguir los siguientes pasos:

Vamos a la sección Diseño -> Edición HTML. Ahí está el código fuente del diseño de nuestro blog. Antes de modificarlo, conviene guardar el diseño en un archivo dentro del disco duro, y para ello hacemos clic en el enlace que dice: "Descargar plantilla completa". A continuación, buscamos por arriba el siguiente código, que es el de la cabecera (header):
#header {
background: url(http://ruta_imagen/imagen.jpg) no-repeat bottom right;
margin: 0 2%;
background-color: $headerBgColor;
color: $headerTextColor;
padding: 0;
font: $headerFont;
position: relative;
}
En este código de hojas de estilo CSS tenemos que incluir la línea de color azul que está en negrita, que aquí es la primera línea del código de la cabecera. Este código quiere decir que en el fondo (background) de la cabecera hay que incluir la imagen cuya ruta o URL (dirección) es la que está entre paréntesis. La imagen no se tiene que repetir en forma de mosaico (no-repeat) y se debe colocar a la derecha (bottom right).

En mi blog he colocado a la derecha de la cabecera una imagen de766 píxeles de anchura para que el diseño del blog no se salga por un lado de la pantalla si tiene una resolución de 800x600, aunque ya existen pocos monitores así. Como el ancho máximo es 1000 píxeles, aún queda un trozo de cabecera que tiene el color de fondo distinto al de la imagen. Para igualar ambos colores, he ido a la sección Diseño -> Fuentes y colores, y he cambiado el fondo por el color de la imagen, como se ve en la siguiente imagen:

A la izquierda, se puede elegir el Color de fondo de la cabecera de la página, y si no se encuentra entre los que aparecen ahí, se escribe en el cuadro de texto de la derecha que se titula Editar el código. En mi caso, es el color #e64300. Para conocer el código de los colores en HTML, se puede visitar la página de la Wikipedia que los explica. Así queda mi imagen de cabecera:

Otro ejemplo de imagen colocada a la derecha de la cabecera por este método. Se puede ver en el blog colectivo donde colaboro con unos amigos y colegas: El camarote de idiomas:


(Artículo actualizado el 20 de agosto de 2009)

25 comentarios:

  1. ótimo tutorial. muitos internautas dão dicas semimagens, o que dificulta um pouco a compeensão exta da explicação.

    obrigado pela dica.
    Abraços.

    ResponderEliminar
  2. Gracias por las indicaciones. Les echaré un vistazo con tranquilidad y a ver si puedo colocarla en mi blog! (http://xy-hombres.blogspot.com)

    ResponderEliminar
  3. Gracias por las indicaciones. Les echaré un vistazo con tranquilidad y a ver si puedo colocarla en mi blog! (http://xy-hombres.blogspot.com)

    ResponderEliminar
  4. Muchas gracias por tu post, con tu ayuda estoy personalizando mi blog.

    http://elblogdeismed.blogspot.com/

    ResponderEliminar
  5. Hace unos días hice un blog de un montón de cosas antiguas que vendo, bah, hay de todo un poco, pero hay más antiguas que modernas. La dirección del blog es www.vendotodotodotodo.blogspot.com y quisiera por favor si me podés decir como lo puedo mejorar. No soy ni un novato ni un experto, me defiendo, pero si me das algunos consejos, bienvenidos sean. Un abrazo. Jorge Rosales

    ResponderEliminar
  6. tu comentario ha sido muy práctico y de gran ayuda, pero quisiera algo de más calidad, algo así como exportar la imagen de cabecera de mi otro blog http://elunefistadelanoche.wordpress.com
    a mi blog principal (aunque los dos están enlazados con las mismas cosas). SI puedes poner un tutorial sobre cómo modificar el blog, pero sin hacer hincapié en lo del código fuente (aún no lo domino) sería de gran utilidad, ¡hasta lo recomendaría si fuera el caso! Bien, hasta otra...

    ResponderEliminar
  7. No imaginas que alergría me ha producido aprender a poner una imagen en mi blog, siempre que lo veía en otros me picaba la curiosidad. Gracias
    . Un saludo,Ana Municio

    ResponderEliminar
  8. Hola, sabrias decirme como hago para que despues de colocada la imagen esta misma este vinculada a la url del blog?

    ResponderEliminar
  9. Hola, está super su blog!!!, yo lo que quiero es poner dos imágenes en la cabecera de mi blog, una la izquierda y otra a la derecha del título, una en formato jpg y la otra es un gif animado, se puede hacer eso??? puede ayudarme??? mi blog es: http://jedicerocool.blogspot.com/

    ResponderEliminar
  10. Hola!
    Gracias por este blog tan interesante con el me he iniciado y perfeccionado en este apasionado mundo de los blogs; hoy te escribo para comentarte que en la cabecera de mi blog no he sido capaz de incluir ninguna imagen no sé si es que la ruta de las mismas no es la adecuada o que simplemente la plantilla que he escogido(Dan Cederholm ) no me lo permite pero lo cieto es que me he llevado un desilusión pues hasta aquí siempre me habían salido las cosas bien; en fin simplemeente decirte que me gustaría que si te es posible ampliases un poquito más la información de cómo diseñar cabeceras diferentes para nuestros blogs.

    Muchas gracias.
    Susana (matesprueba.blogspot.com)

    ResponderEliminar
  11. Susana, he incluido la sección 3 en este artículo para explicar lo que me preguntas. Espero que te sirva.

    ResponderEliminar
  12. Lo logré!!! Por fin en mi cabecera pude poner: IMAGEN-TEXTO-IMAGEN. Si alguien quiere pasar a ver: El Retorno del Jedi: http://jedicerocool.blogspot.com

    ResponderEliminar
  13. Enhorabuena por tu blog, es my útil, sin embargo he intentado varias cosas en el nuestro y no consigo mejorar la calidad de la imagen de cabecera. Es de una asociacion de deportistas con discapacidad. Puedes echarle un vistazo y si sabes como solucionarlo te lo agradecería enormemente.

    http://specialolympicsaragon.scoom.com/

    Un abrazo. Alberto

    ResponderEliminar
  14. Muchas gracias, me salio de una!
    Muy buen tutorial, gracias de nuevo.

    ResponderEliminar
  15. Hola muchísimas gracias por sus tutoriales son realmente exelentes y e aprendido bastante de ellos.
    Sin embargo me quedo una duda que no logro resolverla y quisiera saber si podría ayudarme ya que el tema esta intimamente relacionado con todo lo que explico más arriba.
    El tema mío es que no logro hacer que se pueda clickear en la cabecera y que esta direccione a los usuarios a la pagina principal del blog, osea que ellos mientras navegan por todo el blog tienen que ir con as flechitas ya que después de haberle colocado una nueva cabecera en reemplazo de la que viene ya por defecto esta ya no tiene más su función de redirección a la página principal.
    Ojala pudiera darme una mano ya que he buscado por todas partes la solución y no logro encontrarla.
    Desde ya muchisimas gracias por su tiempo y dedicación!!

    ResponderEliminar
  16. He visto tu blog y no sé cuál puede ser el problema que impide que la cabecera enlace con la portada del blog. También he visto que has insertado un vídeo entre la cabecera y las entradas. Yo que tú quitaría ese vídeo temporalmente para ver si es el motivo de ese problema. Si se me ocurre algo, lo comentaré en estos comentarios.

    ResponderEliminar
  17. Hola Alejandro Valero muchas gracias por responder tan pronto.
    Quería comentarle que intenté hacer lo que me dijo, pero aun así no me sale.
    Para colmo cometí un error en la sidebar y ya no me llega hasta abajo de todo sino que esta se termina con el último gadget que dice "Añádenos a tus favoritos" quisiera saber como retornar la sidebar a su estado normal la cual pertenece a Tic Tac de blogspot.
    Desde ya le pido mil disculpas por las molestias ocacionadas y le agradezco nuevamente por su tiempo.

    ResponderEliminar
  18. Hola Alejandro Valero yo nuevamente, queria perdirle perdón por las oestias pero ya solucione casi todos los problemas que tenía. Lo uúnico que aún sigo sin solucionar es el del banner de la cabecera que no redirige al portal.
    Desde ya mchas gracias y perdon por as molestias.

    ResponderEliminar
  19. Gracias por la tutoría, es excelente!!

    ResponderEliminar
  20. ola, quisiera que por favor me indiques como puedo hacer para organizar mi blog en una sola dirección, pues e realizado un taller dividido en 5 módulos y e creado 5 blogs con cada modulo, yo creo que seria mas comodo q una sola direccion maneje todos, quisiera que me ayudes a organizarlos todos con enlaces al costado cosa q diga por ej modulo 1 d clic y esten las actividades....
    http://fujebo-s.blogspot.com/ esa es la direccion del modulo 1 ahi cree una entrada donde estan las direcciones d los otros 4 modulos

    otra duda q tengo es por q cuando privatizo el blog la direccion se vuelve mas larga
    saludos espero me puedas colaborar alejandro

    ResponderEliminar
    Respuestas
    1. Tienes que añadir gadgets al lateral del blog principal con los enlaces de los otros blogs. Eso lo explico en Blogger por dentro.

      Eliminar
  21. Hola Alejandro en la url de tu blog tienes la imagen de una araña.
    ¿como podria poner en la url del mio la foto/imagen que utilizo en el mio.
    Lo veo en muchos y no se como cambiar el que tiene blogger por defecto, me gustaria personalizar mi url. Gracias.

    ResponderEliminar
    Respuestas
    1. En la sección Diseño del blog, está la sección Favicon, edítala y allí puedes incluir tu imagen.

      Eliminar
  22. por fin encuentro una información que me ayudo mucho! gracias

    ResponderEliminar

Pido disculpas, pero no voy a poder atender los comentarios temporalmente.

Nota: solo los miembros de este blog pueden publicar comentarios.