Annyz-BlOg : Tooltips
para COPIAR los codigos usa la tecla Ctrl + C y para PEGAR usa la tecla Ctrl + V gracias :) El Blog Se visualiza mejor con Google Chrome..

24 noviembre 2012

Tooltips



Hola blogueras como estan? espero que muy bien, disfrutando de este lindo fin de semana ^^, yo les traigo este tuto que me han pedido y es sobre el "Tooltip" y se preguntaran que es eso?? haha bueno el tooltip es una cajita con un mensaje que es visible solo cuando pasas el mouse encima de un link.. 
aqui una imagen

Nos vamos a Plantilla >> Edicion de Html >> Continuar >> Pulsamos (Ctrl + F) y buscamos </head>

pegamos este codigo antes de </head>


<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/><script language='JavaScript' src='http://static.tumblr.com/oiizew6/8B5lzwf17/script.js' type='text/JavaScript'/>
<style>
div#qTip {
padding:3px 5px 3px 26px;
border-top-left-radius: 10px;
border-bottom-right-radius: 10px;
border: 1px solid  #bebebe;
border-left: 3px solid  #ff34b3;
border-right: 3px solid  #ff34b3;
-moz-border-radius: 1em 4em 1em 4em;border-radius: 1em 4em 1em 4em;border-bottom-width: 2px;
display: none;
background:#fff  url(http://i1190.photobucket.com/albums/z449/_KawaiiCherryCupCake_/Annyz_Blog/minigifsbyannyzblog56.gif)no-repeat 5%;
color: #000000;
font-family: Century Gothic;
font-size: 14px;
text-align: left;
position: absolute;
z-index: 1000;
}
</style>

personalizando:

Color: forma del borde
Color: Grosor, tipo y color del borde de arriba y abajo
Color: Grosor, tipo y color del borde de derecha e izquierda.
Color: Minigif de tu preferencia.

Ahora solo das guardar y listo :) 

Aqui algunos gifs




-No Copycat-

36 comentarios:

  1. Respuestas
    1. A mi tampoco,lo hago todo,y cuando le doy a guardar,no me sale:s
      Besitos de miel^^
      Alicia

      Eliminar
  2. Gracias ^^ el que Queriia♥ Pediido Por Mi XDD ariigatO Bss

    ResponderEliminar
  3. Puedes hacer un totu de como hacer que caigan estrellitas de colores en tu mause?? gracias:)

    ResponderEliminar
    Respuestas
    1. http://annyzkawaiiworld.blogspot.mx/2011/06/brillitos-multicolor-cayendo-d-cursor.html

      ahi el link valentina.. saludos

      Eliminar
  4. Ola, este código dos comentários pertence a meu blog, pode colocar os créditos ^^ obrigada

    ResponderEliminar
    Respuestas
    1. Pensé que Annyz creaba sus propios tutoriales y que sabía sobre html o___O ¿luego dice no copiar? ¬¬

      **No te ofendas pero me mentiste mal, mal**

      Eliminar
    2. ay niña primeramente enseñate a leer en otros idiomas okei?? ella no se refiere al tutorial sino al estilo de comentarios que tenia.. baka o.o

      Eliminar
    3. En el traductor portugués me dio así.
      Y se otros idiomas
      Mejor ingles ;)

      Baka o.o

      Eliminar
    4. hahaha buenooo entonces te dire.. ensenate a leer bien xD hahahah

      Eliminar
    5. Claro... siempre tienes algo para pelear no?

      SE LEER BIEN NO SOY BURRA ¬¬
      No hagas enojar a la gente te diría mas pero eres muy sensible...

      ¿Y como resiviste eso?
      A mi malísimo ahora no te quejes porque lo que me dijiste de que empiece a leer también me enojó.

      PD: Por lo menos no se leer pero escribo bien y no soy una burrita...

      Eliminar
    6. Si bueno pero hay que acostumbrarse a Annyz Flor ¬¬

      Eliminar
    7. Chicas! ya paren! No pelen... mejor dejenlo asi, solo tuvieron un malentendido o.o... pero annys explicanos sobre el comentario de karine, no nos dejes con la duda ¬.¬

      Eliminar
    8. Este comentario ha sido eliminado por el autor.

      Eliminar
    9. Ja ensima sofia no sabe lo que significa BAKA >w< Idiota O__o
      cOMO mi cancion del blog..baka baka baka♥

      Eliminar
  5. Hum... A mí tampoco me funciona >-<... Mi plantilla es Picture Window, igual no son compatibles... >-<

    ResponderEliminar
  6. Yo uso la picture window y si me funciona O.o..

    ResponderEliminar
  7. Hola mmm olle podrias ayudarme esque cuando quiero poner algo en mi blog osea como os tooltips en mi blog y quiero copiar y pegar y no puedo :/ y si lo escribo yo me sale error y me tardo mucho ;/

    ResponderEliminar
    Respuestas
    1. Haz lo que yo subrayo como si fuera a copiar y luego asi siguiendo subrayado aplasto el boton izquierdo sin desaplastarlo y lo llevo hasta el codigo =D

      Eliminar
    2. hola janette solo selecciona el codigo y en tu teclado presiona ctrl+C para copiar y ctrl+V para pegar el codigo.

      Eliminar
  8. Hola Annyz te tengo una pregunta ¿que plantilla o que utilizaste para que tu blog se vea a si de la imagen principal a lado de unos gadgets? arigato n_n

    ResponderEliminar
  9. No me funciono :( Di a guardar y no fuinciono T.T

    ResponderEliminar
    Respuestas
    1. Yo uso la plantilla de blogger xD

      Eliminar
    2. si.. pero cual plantilla yo por ehemplo uso la travel..

      Eliminar
  10. este tuto está muy bueno y me encanta como se ve cuando pasa por una de las imagenes que tienes a un costado, como lo hiciste? o solo se tiene que poner el codigo y ya saldra? porque a mi solo me sale en algunos links pero no en los que quiero...espero me puedas ayudar...

    ResponderEliminar
  11. gracias me funciono,yo uso plantilla clasica

    ResponderEliminar
  12. hola annyz, una pregunta, ¿como puedo hacer por ejemplo que gire?

    ResponderEliminar