jueves, 3 de noviembre de 2011

Kawaii Menu Tab

Hola chicas desde hace un buen que me pidieron este tuto x.x que se trata de poner un menu como el mio que al pasar el cursor sale una imagen ^^ gOmeneee por la tardanza..!!




Empezemos :

Primero identifica donde vas a poner tu menu tab de preferencia se recomiendo ponerlo bajo el header asi como lo muestro..!!

Para ver las imagenes en tamanio grande da clic sobre ellas ^^!!



Copia el siguiente codigo y pegalo en un gadget HTML/Javascript






Justo abajo del codigo anterior pega estos codigos:

<a href="URL DE TU BLOG" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Annyz Kawaii Home','','http://i1120.photobucket.com/albums/l497/annyz_kawaii/inicio2-1.png',1)"><img src="http://i1120.photobucket.com/albums/l497/annyz_kawaii/icicio3-1.png" alt="v" name="Annyz Kawaii Home" width="110" height="80" border="0" /></a>



<a href="URL DE LA PAGINA DE TU CATEGORIA O ENTRADA" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Annyz Kawaii tutorial','','http://i1120.photobucket.com/albums/l497/annyz_kawaii/tuto3.png&#039;,1)"><img src="http://i1120.photobucket.com/albums/l497/annyz_kawaii/tuto4.png" alt="Annyz Kawaii tutorial" name="Annyz Kawaii tutorial" width="110" height="80" border="0" /></a>



<a href="URL DE LA PAGINA DE TU CATEGORIA O ENTRADA" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Annyz Kawaii Premios','','http://i1120.photobucket.com/albums/l497/annyz_kawaii/premio3.png',1)"><img src="http://i1120.photobucket.com/albums/l497/annyz_kawaii/premios4.png" alt="Annyz Kawaii Premios" name="Annyz Kawaii Premios" width="110" height="80" border="0" />



</a><a href="URL DE LA PAGINA DE TU CATEGORIA O ENTRADA" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Annyz Kawaii Afiliados','','http://i1120.photobucket.com/albums/l497/annyz_kawaii/afi5.png',1)"><img src="http://i1120.photobucket.com/albums/l497/annyz_kawaii/afi4.png" alt="Annyz Kawaii Afiliados" name="Annyz Kawaii Afiliados" width="110" height="80" border="0" /></a>



<a href="URL DE LA PAGINA DE TU CATEGORIA O ENTRADA" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Annyz Kawaii Afiliame','','http://i1120.photobucket.com/albums/l497/annyz_kawaii/Afiliame4.png',1)"><img src="http://i1120.photobucket.com/albums/l497/annyz_kawaii/afiliame3.png" alt="Annyz Kawaii Afiliame" name="Annyz Kawaii Afiliame" width="110" height="80" border="0" /></a></div></div>




Listo tendras un menu tan bonito como el mio :) kawaiii no??

Notita: puedes ponerle mas categorias si gustas solo copia y pega uno de los codigos y listo =)!




Ahora una explicacion para quien quiera personalizar a su gusto el menu.. ya sea con diferente letra e imagenes. Como ven subraye con diferentes colores algunas lineas

En lo Verde pues ahi va la direccion o url de la entrada o categoria..!!

En el Lila ahi remplaza por tu nombre y el nombre de la categoria..!!

En lo rosita va la url de las imagenes... el menu se forma de 2 letreros una en la que va la imagen y la otra en la que va solo el letrero.. asi se da el efecto de que aparece y desaparece la imagen al pasar el cursor ^^ ( pasa el cursor sobre mi menu arriba para que te des la idea )


ejemplo:

Yo lo puse con 2 colores pero ustedes pueden hacerlo con uno solo para que no sea tanta la complicacion :)!!

Un letrerito con imagen



Un letrerito sin imagen




Yo recomiendo hacer los letreritos con photoshop y fondo trasparente.!!

Chicas he decidido reabrir lOs comentarios ^^


22 comentarios:

  1. awww Adorable!! me encantaron pero no convinaria mucho con mi blog xd pero estan hermosos! *333*

    ResponderEliminar
  2. Me encanta que se haya decidido a abrir de nuevo los comentarios!
    Así que sigo diciendo lo mucho que su sitio es kawaii!
    Me encanta el menú!
    besos<3

    ResponderEliminar
  3. Yupi!!!jeje sere la primera en comentar!!!Muy kawaii el Tuto mmmmtalvez lo intente hacer!!!!Espero estes Bn cuidate!!!!

    Besos!!!

    ResponderEliminar
  4. Gracias chicas =D !!!!


    Rukii puedes personalizarko a tu gusto de manera que quede con el look de tu blog ^^ el truco esta en los letreritos solo haz tus propios letreros e imagenes los subes a un host y remplazas lo que puse de color..!! saludos

    ResponderEliminar
  5. Yo habia puesto el mismo tutorisl mucho antes y nadie lo vio T-T

    ResponderEliminar
  6. annyz cual es la direccion que muestra el letrerito la primera o la segunda?

    ResponderEliminar
  7. La de arriba nena.. ese tiene el letrerito

    ResponderEliminar
  8. Neena esta genial este tutorial, pero a mi no me sirvio, le saque la imagen que sale cuando uno pone el mouse del codigo, y no se que paso que no me salen con los espacios correctos o me salen mal distribuidas XD asi que no lo voi a colocar, pero esta muy bueno el tuto como siempre los tuyos son los mejores, me alegra que hayas puesto los comentarios, adios :D que estes super

    ResponderEliminar
  9. sorry que no te haya servido nekotakahashi =( en cualquier cosa con gusto te ayudo ^^!! gracias gracias por tu comentario y que tengas un buen dia !!

    ResponderEliminar
  10. Intenté hacer letreritos, pero no soy buena...
    Te puedo hacer una pregunta?
    Tus letreritos no se pueden copiar no?
    Gracias por tomarte tiempo para nosotras Sayo! m(._.)m

    ResponderEliminar
  11. KAWAII GIRL:

    Si mira creo que ya estan puestos los links en los codigos del tutorial =D

    ResponderEliminar
  12. *w* me encantó! tomare tus códigos si no es molestia u-u cuando haga algún buen diseño lo cambio vale ? *O* es por mientras que no se vea feo xD
    muchas gracias por tu tutorial!!

    ResponderEliminar
  13. estos codigos que dices que hay uno para cada menu se ponen todos juntos?

    ResponderEliminar
  14. saku-chan:

    sip todos juntos si es que los quieres todos..^^

    ResponderEliminar
  15. Sos una genia... ¡Me quedó súper cute! ¡Millón de gracias, amiga!

    ResponderEliminar
  16. Hola!! me encanto este tipo de menu, hace rato que lo tengo en mi blog! :) te queria preguntar que fuente usaste para hacer los letreritos, porque quiero hacer unos yo tambien, gracias!!!

    ResponderEliminar
  17. está muy genial y quisiera usarla pero al estilo VOCALOID, solo que no tengo potoshop y no se como hacerlo......

    ResponderEliminar
    Respuestas
    1. amm bueno yo puse un photoshop para descargar quiza te sirva y poco a poco iras aprendiendo a usarlo.. en la categoria photoshop ahi encuentras la descarga.. saludos

      Eliminar

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