viernes, 15 de junio de 2012

Poner un menu en la cabecera con Imagemap

Hola chicas hoy les enseñare como poner un menu dentro de su cabecera o header es muy sencillo porque no vamos a necesitar editar nuestra plantilla ni nada de eso.. todo lo haremos por medio de gadgets okei ^^?

Para empezar necesitamos tener ya hecho nuestro menu en la cabecera ejemplo:



yo lo hice sencillito pero ustedes pueden poner el menu en el lugar que gusten y darle un estilo propio :)

al tener la imagen va a la pagina image map.com
y se encontraran con esto:



Al presionar "Start Mapping You Image" se te abrira otra ventanita, habra un conteo de 10 segundos y luego da clic en continue to next step
se empezara a cargar tu cabecera, al cargarse te saldra al lado derecho una opcion que dice "rectangle" da clic ahi.




y se te abrira una especie de forma para llenar, arrastrala hacia tu menu (sigue la imagen guia)



Haz lo mismo con todos los demas recuadros de tu menu.. al terminar da clic en

se te abrira esta ventana, escoges "Html Code" y copias el codigo que muestro en el recuadro de abajo



okei ahora cabe destacar que vamos a usar una gadget html y ahi vamos a poner nuestra cabecera..para eso vamos a tener que quitar la que tenemos y como hacemos esto? pues bien mira a continuacion:

nos vamos diseño y damos clic en editar en nuestro gadget de la cabecera, estado ahi eliminamos la imagen que teniamos como header y damos clic en guardar. La imagen desparecera y solo quedara el nombre del titulo que en mi caso es Annyz Kawaii pruebas.


Ahora abres un gadget html abajito del gadget de la cabecera y pegas el codigo que te dije que copiaras arriba ^^ .. luego das clic en "Ver Blog" y veras tu cabecera con tu menu, peroooo como notaras arribita se sigue mirando el nombre de tu blog

en este paso vamos a deshacernos de el:

ve a diseño y da clic en "disenador de plantillas" y haz lo que hago en la imagen de abajo
si te fijas puse 2px para que se hiciera pequeño el titulo, puedes ponerle 0px no tiene importacia, recuerda al terminar dar clic en "aplicar al blog"



Ahora si visualiza tu blog para que mires como te quedo ^^

Hay algunas notas que quiero resaltar la primera es que es un gadget javascript asi que si quieres ponerle efectos amm por ejemplo que se mueva 360 grados y algunos otros efectos al header no se podra porque como dije no es el header .. es un gadget html script okei?

y segundo si lo pusiste y despues decides quitarlo y poner tu cabecera
normal .. solo elimina el gadget y vuelve a poner la imagen de tu cabecera donde habitualmente se pone ^^


24 comentarios:

  1. Increible tendre que hacerlo xD .. pero sinceramente esas cosas no se me dan D;< Increible blog!! Annys... Podrias hacerme un enorme favor ¿Recomendar mi blog? Es una blog-novela

    www.musicainmy.blogspot.com , me encantaria que la vieras y que me dieras tu opinion :D

    ResponderEliminar
    Respuestas
    1. aww gracias ya me paso para ver tu blogui ^^

      Eliminar
  2. wow siempre aportando cosas buenas!!!
    no ee xq pero soOy adicta a tu blog ^^ jajjaja
    pasate x el mio alguna ves..... me sentiría felizz =)

    ResponderEliminar
  3. como puedo hacer el menu?Que programa usas?
    Un besito y gracias^^

    ResponderEliminar
    Respuestas
    1. con el photoshop o el photoscape cual gustes. los 2 son buenos

      Eliminar
  4. como puedo hacer el menu?con que programa?
    Besitos de miel^^
    Y gracias
    Alicia

    ResponderEliminar
  5. ¿Sólo funciona con ese tipo de plantilla? D: yo uso la clásica TT^TT

    ResponderEliminar
    Respuestas
    1. aww no sabria decirte no he probado la clasica nena u.u

      Eliminar
  6. Hola annyz :3 espero que no me pegues por contestarte meses después =3=
    Pero al final dejé el blog y todo para estar más con los estudios xd si te fijas no hay publicados diseños mios como desde hace + de 3 meses en mi blog xd
    Pero bueno, ahora ya acabé mis exámenes finales y estoy libre, asi que me voy a poner como loca a hacer diseños >.< si no me odias y todavia quieres que aga lo que me pediste me avisas *-* xdd (si es así dime si te importa qe use cualquier imagen o quieres qe use una en especial xP)

    Besitos :3

    ResponderEliminar
    Respuestas
    1. hah no te preocupes nena ya no tiene importancia pero igual muchas gracias por responderme.

      Eliminar
  7. Annyz, en lo primero que hay que hacer, que hay que seleccionar la imagen de tu ordenador (from your pc) abajo dice: from a url y eso lo tengo que rellenar, ¿que es lo que tengo que poner ahí, la url de que?¿de la imagen o mi blog o el que? :C
    Espero rapida tu respuesta ^^ :S

    ResponderEliminar
    Respuestas
    1. si tu menu ya debe de estar en puesto en la cabecera.. lo que haras en esa pagina es poner las direcciones para que queden ya dentro de tu menu ^^

      la url bueno me refiero a tu url de la entrada que quieres que ahi tenga.. por ejemplo cuando le den clic a donde quieres que los redirija.

      Eliminar
  8. GENIAL!!!!!!!! Me re sirvió puse un header parecido al tuyo hecho por mi en photoshop jejejeje es un diseño muy lindo, todo me quedo bien como me gustaba sin errores, gracias Annyz-chan por compartir este tuto tan genial!! nya nya nya~ bye >w<

    ResponderEliminar
  9. *O* eres una capa mujer no sabes como estaba esperando un tutorial así se te quiere por mejorar nuestros blog con tan lindos tutoriales ^^ siempre tengo presente en mi blog en agradecimientos *O*

    ResponderEliminar
  10. mi blog es de fics XD y se ve lindo(segun yo por que le pongo muchas cosas XD) gracias a tu tutoriales que son muy sencillos *O* te adoro

    ResponderEliminar
  11. Hola..Annyz..queria sabes con que prtograma puedo hacer el meno...tu blog esta super...me encanta

    ResponderEliminar
    Respuestas
    1. grax nena tu menu lo puedes hacer en photoshop o paint pero te recomiendo photoshop queda mas bonito ^^

      Eliminar
  12. Lo siento mi ignorancia Pero como se llama la cancion de fondo?

    ResponderEliminar
    Respuestas
    1. se llama la cancion de tomoyo de sakura cardcaptor n.n

      Eliminar
  13. Yo te enseñé a hacer eso, y ni me mencionas ¬.¬

    ResponderEliminar
    Respuestas
    1. amm nop almy eso yo ya lo sabia y te lo dije en un comentario.. que yo con los codigos o tema no tengo problemas o.O que solo queria ver si me podias hacer una cabecera recuerdas??

      Eliminar

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