Awesome me ;
Bonjour!


Hi , welcome to my blog. Be nice here, do follow me. Enjoy reading. Thankyouuu ^^





Tagboard



Credits


Template : Syazwani Norzin
Basecode : Afifah Hikmatunisa
Sources : ♥♥♥
Blog Owner : Afifah
Kawaii menu
viernes, 14 de marzo de 2014 | 0 Comment |
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..!!





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.!!






Thanks for reading :)



Older Post . Newer Post