enero 09, 2014

Tutorial: Mapeo de imágenes para cabeceras

¡Primer tutorial del año! Nada más porque me encanta compartir con ustedes los trucos que voy aprendiendo y porque ya van varios que me preguntan cómo hago las cabeceras del blog. En esta ocasión nos vamos a meter un poquito con el diseño personal de blogs. 

Cuando empecé a buscar un estilo que le quedara a mi blog y tuviera un pelín de mi personalidad en él, encontré que no me gustaba realmente tener una barra debajo de la cabecera para las diferentes páginas del blog. No sé, se me hace demasiado bromoso. En lugar de eso, busqué la manera de que DENTRO de la cabecera, existiera la opción de meter los links a las páginas en la imagen. ¡Y lotería! La respuesta a la pregunta del título se responde de manera sencilla: mapeo de imágenes

El mapeo de imágenes convierte en botones algunas partes de la imagen de cabecera que elijas para tu blog. Si das clic en una parte específica de la imagen (en el botón), te llevará a una de las páginas del blog. Muchos de los tutoriales que encontré eran un tanto confusos, así que comparto con ustedes uno hecho por mí, aprovechando que le he hecho cambios de diseño al blog. Renovarse o morir, a veces digo. Entonces, si quieren tener una cabecera con menú incluido en la imagen (dígase más fácil: una cabecera como la que tengo actualmente o como la del diseño anterior), sigan leyendo.

El primer paso, y esencial en el proceso es el diseño de la cabecera. En esto no les puedo ayudar mucho, pues el diseño es muy personal y refleja el estilo de tu blog. Yo he optado por fondos blancos con una imagen y el nombre de mi blog (tanto en el diseño actual como en el anterior). Mis cabeceras las he hecho con la ayuda de tutoriales (sobre todo los de CM), PicMonkey y Power Point (no es broma). Acá lo que necesitan es un suspiro de inspiración. :) Algo ESENCIAL para cuando estés haciendo el diseño, es ubicar las imágenes que se convertirán en los botones a las páginas. Les pongo un ejemplo con la cabecera anterior de Libros entre Mundos:

En esa cabecera los botones son evidentes y en el diseño actual se disfrazan un poco más. Ustedes pueden tomar ideas de las mías o inspirarse de otros blogs o páginas que les gusten. Tengan en cuenta que si no dejan estos botones en la imagen de la cabecera, no podemos trabajar con los siguientes pasos para el mapeo de la imagen.

Ya que tenemos lista la cabecera del blog con el diseño definitivo y los botones están donde deberían estar, vamos a usar la ayuda de Image-Maps. Esta página nos ayudará a hacer el mapeo de la imagen y a agregar los links a los botones. Entonces, antes que nada, abre la página.


 -
 -

Así de fácil y sencillo es generar el mapeo de una imagen. Ahora cada recuadro rojo funcionará como botón cuando pongas la cabecera en tu diseño.

Lo que sigue es ir a Diseño, añadir un gadget HTML en el lugar de la cabecera (hasta arriba) y pegar el código que se generó en la página. Probamos que funciona antes de guardar cambios y ¡listo!

Ahora, lo más seguro que su antigua cabecera siga ahí o que esté el título de su blog o algo encimado (como me pasó a mí). Aquí lo que hay que hacer es eliminar esa cabecera y título del blog de su plantilla. Después de mucho esfuerzo y búsqueda de tutoriales lo logré. El mejor tutorial que les puedo recomendar para hacerlo lo encuentran AQUÍ. Es sencillo, está bien explicado y no creo que tengan problemas para hacerlo.

Técnicamente, todo debería funcionar sin problemas. :) Ya saben que si tienen alguna duda o problema durante el proceso, estoy encantada de ayudarles. Espero que este tutorial les funcione a varios. ¡Un beso!

31 comentarios:

  1. ¡Wao que buen tutorial!... a penas me sienta inspirada para cambiar mi cabecera utilizaré este método a ver que tal me va!.. Muuuchas gracias por la info!

    Un besoo!

    ResponderEliminar
    Respuestas
    1. ¡Genial! Que bueno que te animes a usarlo. Me pasaré por tu blog para ver qué tal se ve. :) Espero no tengas ningún problema. ¡Saludos!

      Eliminar
  2. ¡Yo ocupo casi lo mismo que tú! (Picmonkey, Image maps) De hecho, cuando dijiste eso de que la imagen te llevaría a tal lugar pensé enseguida en esa página. Me diste la idea, así que quizá lo ponga algún día de estos ;).

    ¡Cuídate!

    ResponderEliminar
    Respuestas
    1. ¿Apoco no es sencillísimo? :) Espero que te animes, Paula, me encantaría ver el resultado. ¡Te mando un abrazo!

      Eliminar
  3. Menudo tutorial, la verdad que se agradece ;)
    Lo leeré con más calma por la tarde, pero la verdad que es muy útil.

    Un besiño

    ResponderEliminar
    Respuestas
    1. Gracias, Ali. :3 Espero lo puedas utilizar pronto y nos presumas tu cabecera. ¡Un beso!

      Eliminar
  4. Tienes una paciencia de los dioses, Reina!!! :D Me gusta el diseño de las esferas, ojalá me resulte alguna vez, porque soy nulísima en todo esto de la tecnologóa Blogger :P ..

    Saludos :d

    ResponderEliminar
    Respuestas
    1. Jajaja, la paciencia nada más viene a veces, Caro. Espero que te animes a probarlo, si tienes alguna dificultad o preguntas, yo encantada de ayudarte. :)

      Eliminar
  5. Muchas gracias por el tutorial :)
    Yo no conocía estas páginas y se ve que son muy útiles.
    Besotes.

    ResponderEliminar
    Respuestas
    1. Un placer, linda. :D
      Espero que te sirvan, son de mucha ayuda y bastante sencillas de utilizar.
      ¡Un beso!

      Eliminar
  6. Estaba buscando este tutorial hace un rato y no lo encontraba, para mi mala suerte ahora mi compu "Has been Exterminated!" (Sí así es soy Whovian, ¡Chócalas!) y no he podido terminar el diseño de mi blog. Ahora que me desahogué, está muy bueno el tutorial, bastante sencillo que incluso entenderán quienes apenas comienzan con blogger.

    ResponderEliminar
    Respuestas
    1. Whovian companion alert! :D Que bueno es encontrar más fans de Doctor Who por acá (porque parece que escaseamos). Ojalá recuperes pronto tu compu y puedas seguir, espero que te sirva bien el tutorial. :)
      ¡Un abrazo!

      Eliminar
    2. Ya sé, es más fácil encontrar a miles de rostros de Boe que a Whovians :'( y eso no es nada bonito u.u equis eres mi amiga Whovian ahora :9 jajajaja soné medio enfermo con eso xD

      Eliminar
    3. Deberíamos encontrar alguna forma de traerlos al lado oscuro (con galletitas y leche). Jajaja, ¡para nada nuevo amigo whovian!

      Eliminar
  7. genial tutorial y esta super sencillo lo pondré en practica
    genial lo de la pag. de como quitar la cabecera pocas pag. te enseñan en la nueva interfaz del html


    Besos & abrazo de oso!

    ResponderEliminar
    Respuestas
    1. ¡Gracias! Espero que te sirva. :)
      ¡Abrazos de oso panda de regreso!

      Eliminar
  8. Acabo de utilizar el tutorial y que fácil ha resultado! Millones de gracias (nuevamente) por esta información, me fue de gran ayuda... ahorita hice una cabecera bastante simple, pero cuando tenga más tiempo -e inspiración- seguro lo uso para una cabecera un poco más elaborada!
    Un beso grande :3

    ResponderEliminar
    Respuestas
    1. ¡Que feliz me haz hecho! Me alegra un montón que te haya funcionado, Lis. :) Si es la que está en tu blog, te quedó preciosa.
      ¡Saludos enormes!

      Eliminar
  9. Hola me encanto tu tutorial!!
    Es genial sin duda ya estoy en eso solo me queda una duda!!
    Como centras la imagen, osea me queda de lado izquierdo y quiero que quede en el centro!
    Si me ayudas te iras al cielo jeje de verdad te lo agradeceria mucho!!

    ResponderEliminar
    Respuestas
    1. ¿Quieres decir centrar la cabecera completa ya que está en el blog?

      Eliminar
    2. Listo, mon ami! A petición. :)
      http://librosentremundos.blogspot.mx/2014/07/tutorial-centrar-la-cabecera-de-tu-blog.html

      Eliminar
  10. Yo tengo una duda. Lo intenté hacer y me salio todo bien hasta que lo intenté instalar ya que no puedo ponerlo hasta arriba porque esta la cabecera preliminar de la plantilla de Blogger y no se como hacer para quitarla. La puse en mi blog de pruebas, por si no entiendes a lo que me refiero http://x-smellingbooks.blogspot.mx/ Si ves, viene el titulo del blog "Blog de pruebas" (que original soy) arriba de la cabecera que hice, y la cabecera me salio bien, solo es ese el problema que tengo. No se si haya una forma de arreglarlo (soy malisima para todo esto de diseño y HTMLs asi que muy apenas si se como cambiar el color de links :c) pero agradecería que me contestaras la duda :)

    ResponderEliminar
    Respuestas
    1. ¡Aló! :) Justo al final de este tutorial explico qué cómo hacer para quitar esa cabecera que viene por default. Puedes seguir este tutorial para quitarla, que es el más sencillo y efectivo que he encontrado. http://csssoldier.blogspot.mx/2013/10/eliminar-cabecera-de-blogger.html Si sigue sin funcionar me dices. :)

      Eliminar
    2. No había visto esa parte, que pena jajaj. De todas maneras gracias por responder mi duda, este tutorial me ayuda mucho ;)

      Eliminar
  11. Super el tuto! cuando pueda lo aplico a mi blog, besitos.

    ResponderEliminar
  12. Hola, el tutorial es muy bueno, vere que sale, gracias por compartir.
    Besos^^

    ResponderEliminar
  13. Hola!!
    Muy bueno el tutorial, pero no sé si hice algo mal o que, pero no puedo colocarlo de cabecera. O sea, no se me queda en el lugar que debería quedarse y el título no desaparece :( Podrías ayudarme??

    ResponderEliminar
    Respuestas
    1. Si tienes problemas para instalarlo, checa este tuto: http://csssoldier.blogspot.mx/2013/10/eliminar-cabecera-de-blogger.html
      Si sigue sin funcionar, mándame el link de donde lo estás aplicando para ver en qué te puedo ayudar. :)

      Eliminar
  14. Lo he probado muchísimas veces, pero no me funciona :(

    ResponderEliminar
    Respuestas
    1. Si quieres, mándame un mail y te ayudo. :)

      Eliminar

Hola, querido unicornio lector.
Este es un espacio para la libre expresión, nunca temas expresar lo que piensas. Una regla: aquí se prohibe el spam. :)
¡Felices lecturas y gracias por dejarme tu opinión!

 
Libros entre mundos. Design by Marloz