Bienvenido a mi blog. Aquí encontrarás todas las cosas que he creado e ido aprendiendo con el tiempo, útiles para ti y tu sitio web.

Menu kawaii "Kuma Menu"

23.10.12

Hace poco aprendí la combinación de varios códigos, así que me puse a jugar y como resultado... UN MENU SUPER KAWAII AL ESTILO KUMA CON EFECTOS ZOOM!!!

ESTA ES UNA CAPTURA, A QUE ESTÁ MONÍSIMO!!
En la captura se ve las opciones que yo personalizé para mi blog. El código que les dejo contiene las opciones de "BLOG PERSONAL, AFILIAME, AFILIADOS Y MIS PREMIOS". Bueno iniciemos con el paso a paso para su instalación. GOOOOOO!

 PARA EL EFECTO 
(SI YA TIENES INSTALADO ESTE EFECTO OMITE ESTE PASO)

PASO 1: Lo de siempre clic a 'Diseño → Edición de HTML → Continuar'

PASO 2: Usa Control + F (para una búsqueda más rápida) y busca  ]]></b:skin> 

PASO 3: Pega el sgte. código arriba de  ]]></b:skin> 

/*Efecto Zoom
----------------------------------------------- */
.hovergallery img{
-webkit-transform:scale(1);
-moz-transform:scale(1);
-o-transform:scale(1);
-webkit-transition-duration: 0.5s;
-moz-transition-duration: 0.5s;
-o-transition-duration: 0.5s;
opacity: 1;
margin: 0 0 0 0;
}
.hovergallery img:hover{
-webkit-transform:scale(1.1);
-moz-transform:scale(1.1);
-o-transform:scale(1.1);
box-shadow:0px 0px 35px white;
-webkit-box-shadow:0px 0px 35px white;
-moz-box-shadow:0px 0px 35px white;
opacity: 1;
}
PASO 4: Clic en 'Vista previa', si todo sigue normal clic en 'Guardar plantilla'


 PARA EL MENU 

PASO 1: Igual clic a 'Diseño → Diseño → Añadir un gadget → HTML/Javascript'

PASO 2: Pegamos el sgte. código...

<!--KUMA MENU-->
<img src="http://img204.imageshack.us/img204/4458/menutitler.png" style="border: #e55252 1pt dashed; -moz-border-radius: 24px 24px 0 0; border-radius: 24px 24px 0 0;"/><table background="http://img825.imageshack.us/img825/1373/other1j.png" border="0" style="background-color: none; border: #e55252 1pt dashed; width: 210px; -moz-border-radius: 0 0 24px 24px;border-radius: 0 0 24px 24px;">
<tbody><tr><td>
<center><div class="hovergallery">
<a href="URL DE BLOG"><img src="http://img405.imageshack.us/img405/3756/blogpersonal.png" /></a>
<a href="URL DE AFILIAME"><img src="http://img443.imageshack.us/img443/9304/afiliame.png" /></a>
<a href="URL DE AFILIADOS"><img src="http://img577.imageshack.us/img577/5249/afiliadosv.png" /></a>
<a href="URL DE PREMIOS"><img src="http://img525.imageshack.us/img525/1908/mispremios.png" /></a>
</div></center>
<div style="text-align:right;"><span style="color:#e55252; font-size: 100%; "><b>Consigue este widget en:</b></span><a href="http://nemuri-kuma.blogspot.com/2012/10/menu-kawaii-kuma-menu.html"><img src="http://img339.imageshack.us/img339/2318/75047749.png" /></a></div>
</td></tr></tbody></table>
<!--END KUMA MENU-->
PASO 3: Clic en 'Guardar'


*NOTA: Sólo debes cambiar lo que está resaltado de anaranjado por el URL que indica. Pasa el mouse sobre el menú al lado derecho de mi blog para ver el efecto (*-*)

YEY!! otro recurso más hecho por mi (✪㉨✪) -se vuelve loca de felicidad- Si gustas ver el otro recurso que creé para Blogger pasa por nemuri-kuma.blogspot.com/recursos. Bien es todo me hasta más tarde.

13 comentarios:

  1. ke kawaii esta este menu yo pense en poner en un tuto el menu de mi blog jaja y muchas cosas mas

    ResponderEliminar
    Respuestas
    1. gracias(>w<) me esfozé un buen para este menú jejeje

      Eliminar
  2. *_* ESTA GENIAL TU APORTE
    graciias graciias :$
    Cuando necesite el menu vendre por aqui jeje Aproposito gracias a ti tengo el de las Nuevas entradas y Comentarios recientes ;) Tq >__< Besos!

    ResponderEliminar
  3. Podria pedirte un Favorsiyo *_*
    Si no es mucha molestia :$
    Tu porfa podrias enseñarme como hacer un boton de afiliación y como poner afiliados en el blog :$ PLis esqe no tengo idea .___. GRACHIAS :D

    ResponderEliminar
    Respuestas
    1. Ok Mariia-chan (nwn) no hay problema pero todo depende de que formato deas que sea ese botón de afilición (el banner).

      Eliminar
  4. waa:)gracias por poner esta totu!!la he estado buscado por mucho tiempo,gracias por ponerla!!

    ResponderEliminar
    Respuestas
    1. No hay de qué Dayi...en un futuro no muy lejanos les enseñaré a diseñar sus propio menús ...pero más adelante :B

      Eliminar
  5. Que bonito!! lo puse en mi blog y queda muy lindo n.n! también lo publique en una entrada me daban ganas de compartirlo en mi blog xD te di créditos y puse que visitaran tu blog, pues es super kawaii y muy decorado es genial! lo acabo de conocer xD saludos nena~ :3

    ResponderEliminar
    Respuestas
    1. Awww~ gracias por visitar mi blog (^^) espero regreses pronto y que bueno que te haya gustado este tutorial (*0*).

      Eliminar
  6. esta muy linda tu blog te dejo un LIKE y ☆☆☆☆☆☆☆☆☆☆ estrellitas me facino al 100%
    un saludo para ti
    ATTE:jorge

    ResponderEliminar
  7. Hola Amo tu blog! de veras te gusta Uta no prince-sama? pues a mi si! :3 ME ENCANTO

    ResponderEliminar
    Respuestas
    1. Claro que sí me gusta *___* LO AMO! Ahora estoy esperando la segunda temporada con sub en español (>w<)! yay!!! ..........Gracias por visitar mi blog :D

      Eliminar

Home About Design My designs Contact