Image Map

domingo, 8 de septiembre de 2013

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 ^^

No hay comentarios:

Publicar un comentario