DASHBOARD SEKAI WORLD ABOUT

lunes, 4 de febrero de 2013

Menu tooltips with CSS3

Hola hola!! les traigo el pequeño tutorial para poner esta clase de menú en su blogcito :).

Por favor ingresen a la página: Codrops, dan click en el botón DOWNLOAD SOURCE y les descargara un rar con los códigos.


Abran la carpeta llamada css, oki en la página pudieron apreciar que hay un botoncito llamado view demo, según el estilo de menú que quieran eligan {en la carpeta de css} el código que necesiten :), pues yo elegi el primero (con el nombre style, el que tenia mi anterior diseño), al darle click se abrira con el bloc de notas.


Ahora vamos a editar nuestra plantilla ^-^:

Dashboard Plantilla Editar HTML

 Después de < head> peguen este código:


Es siempre larguito XD, listo dan guardar y ahora vamos a agregar el gadget:

Dashboard Diseño Añadir un Gadget HTML/Javascript


Eso es todo! , una cosita mas ...en el código css, en donde esta el background, las imágenes que uds ven en el demo, eso no son imagenes aparte es una sola, osea tienen que editar {una imagen} para el menú  y cambiar la url por su imagen personalizada.
¿Yo que hice?:  Fácil le tome un pantallazo a la imagen del view demo y me guie por esa, listo xD!


{ven solo hay para poner un background}

Otra cosa que les ayudara, si al poner encima el cursor ¡el recuadro con el nombre sale muy desigual!, en este apartado del código variando los numeros hacen que se posicione de la forma correcta:



Explicación en video ;) 


Créditos: Codrops

13 comentarios:

  1. wow esta un poco complicado este tuto pero vere si puedo hacerlo en la proximo diseño de mi blog

    ResponderEliminar
    Respuestas
    1. jeje bueno solo un poquito ;), lo más complicado es familiarizarse con el código para que quede perfect, pero pues normal :), espero que lo hagas ^O^

      Eliminar
  2. Hola! Gracias por la info nwn Adios~~

    ResponderEliminar
  3. soy lenta y no lo he pillado XD ya me espavilare tranquila gracias por el tutorial

    ResponderEliminar
    Respuestas
    1. wow me encantó este tutorial, es el sitio donde mejor explicado está.

      Gracias por subirlooo

      Saludoss :D

      Eliminar
  4. Konichiwa,
    Gracias por el tutorial. Debo tomarlo poquito a poquito a ver si me resulta. Besos***

    ResponderEliminar
  5. Estaba esperando a que publiques este tutorial! xD Gracias por compartirlo ^^!

    ResponderEliminar
  6. Muchas Gracias por los tutoriales :D
    Ettoo... ahora estoy editando una plantilla de blogskin pero me faltan cosas, te la podría mostrar para que me digas que me falta y cosas así? n-n

    ResponderEliminar
    Respuestas
    1. Claro que si señorita!!! puedes enviarme pantallazos, preguntas con tranquilidad ;) enviame al correo es mas accesible :). Saludos!

      Eliminar
    2. Gracias :D, disculpa la demora es que estos días no he tenido internet y mi netbook esta malo :C
      Saludos :D

      Eliminar
  7. Sabia que no era la unica que tenia una carpeta llamada "anime" xD

    ResponderEliminar

Notitas ♥


• Actualizado todos los post de font.
• Actualizado post: personalizar Blog.
• Renovar post: Programas para perso. win.
• Agregado nuevo menú: manga {como imprimirlo y empastarlo} (29/04/2013)