22/2/15

[Tutorial]Elegant Tooltip!


Holaaaaque tal? he podido sacar tiempo para poder publicaros un tutorial, la verdad que me gustaría que me dijerais que os gustaría que os publicara ya que yo tengo ideas pero quizás preferís que haga lo que vosotras o vosotros me pedís así que si no os importa me gustaría que me dijerais abajo en los comentarios QUE QUERÉIS QUE PUBLIQUEimageAhora dejando a un lado la pregunta vamos con el tutorial que es de como poner el tooltip al que llamé
Elegant Tooltip

  • Plantilla
  • Edicion HTLM
  • Ctrl+f buscas & pegas antes de </body>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js'/><script src='http://static.tumblr.com/7qjmkr5/IUmmdsy41/jquery.style-my-tooltips.js' type='text/javascript'/><script>    (function($){        $(document).ready(function(){            $(&quot;[title]&quot;).style_my_tooltips();        });    })(jQuery);</script>

  • Buscas de nuevo con Ctrl + F ]]></b:skin> y pegas el siguiente código antes que ]]></b:skin>

#s-m-t-tooltip {
background: #98b1d7; /* COLOR DE FONDO */
color: #fff; /* COLOR DE TEXTO */
text-shadow: 1px 1px 0px #6b8bba; /*Sombra de la letra, y los numeros son el grosor de la sombra*/
box-shadow: inset 0 0 30px #6b8bba, 0 0 2px #6b8bba;
font-family: calibri; /* TIPO DE LETRA */
font-size: 9px; /* TAMAÑO DEL TEXTO */
letter-spacing: 2px; /* ESPACIO ENTRE LETRAS */
border: 0px solid #fff; /* BORDE DEL TOOLTIP */
-webkit-border-top-right-radius: 5px;
-webkit-border-top-left-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
text-transform: uppercase;
line-height: 11px;
text-align: center;
display: block;
padding: 10px 15px 10px 15px;
margin: 20px 10px 0px 10px;
z-index: 999;
}
Aviso: no cambiéis nada si lo queréis tal cual esta en mi blog 
Esto es todo lo último seria guardar & ver el fantástico resultado en mi opinión este estilo de tooltip me encanta si queréis ver otro estilo de tooltip que hice en otro tutorial pinchad aquí espero que os haya gustado mi tutorial <3 un gran abrazo & nos vemos en la próxima entrada 

19 comentarios:

  1. Seguro que aciertas, publiques el truco o tutorial que publiques. Siempre es un placer estar en tu casita. Un besazo, guapa.

    ResponderEliminar
  2. no lo hago por no saber que publicar si no por saber si queréis que publique algo en especial XD lo entendiste mal

    ResponderEliminar
  3. Oh muy bueno el tuto gracias!!

    ResponderEliminar
  4. muy buen tutorial, la verdad todo lo que pones es interesante y bienvenido asi que pienso que deberias mostrarnos tus ideas :3, por otra parte podria pedirte un favor? me ayudarias a escoger el tema de la semana?????? pooooorfis solo debes votar en mi blog gracias :3

    ResponderEliminar
  5. hola kumy! tanto tiempo. gracias por el tuto c:
    por cierto, cambié la URL de mi blog y el nombre, espero que lo puedas cambiar de los afiliados.
    http://constellationofcancer.blogspot.com/

    cuídate y saludos!

    ResponderEliminar
  6. Muy linda la tool tip, tiene un efecto muy bonito ;)
    Saludos~

    ResponderEliminar
  7. Me encanto el tooltip, muy lindo, gracias

    ResponderEliminar
  8. Me gusto de maravilla ●ω● ,gracias y saludinees~

    ResponderEliminar
  9. Muy bueno :3 gracias por compartirlo >w<!

    ResponderEliminar
  10. ¡Hola, Kumy! Siempre me han gustado las cabeceras con blondas (puntillas) como la tuya y me gustaría saber cómo crearlas. Para mí sería estupendo si nos lo explicases. Y otra cosa que me intriga y que quisiera hacer para mi blog es crear una cabecera en que se integre mi propio avatar. Conozco muchos sitios que presentan en la cabecera una "caricatura" del autor y me encantarñia poder hacerlo para mi blog. ¿Conoces algún programa que lo permita? He probado algunos, pero no me acaban de convencer. Te facilito enlaces de dos blogs para que veas a qué me refiero: http://www.personalizaciondeblogs.blogspot.com y http://www.latitalily.blogspot.com

    En fin, guapa, un besazo.

    ResponderEliminar
    Respuestas
    1. Claro yo intentare hacer un graphic style enseñando a como hacer ediciones con bordes :3

      Eliminar
  11. Hola kumy muchas gracias este tutorial me sirvio mucho en mi nuevo diseño no se si te acuerdes de mi ?? creo que apenas te dije eso en una entrada nueva en fin
    saludos muchos saludos linda ah
    por cierto ya no tienes afiliados?? ya renove tu boton
    saludos otra vez XD

    ResponderEliminar
    Respuestas
    1. si leei esa entrada no se si te conteste es que con el lio de los exámenes se me olvida contestar comentarios x-x

      Eliminar
  12. Genial! Me encanta utilizar las sombras para crear ese efecto como que sobresale.

    Espero andes bien,
    saludos! ~

    ResponderEliminar
  13. Hola Kumy, no se si me recordaras... soy sofi, de mundo sofi y te queria felicitar por como vas con el blog y tus seguidores!! Te pasaba a saludar, espero que sigas asi hermosa. Besos :)

    ResponderEliminar
    Respuestas
    1. Cuanto tiempo que tal estas ? te fuiste tan rápido :'( bueno espero que ya estés mejor y que vengas a quedarte de nuevo en blogger

      Eliminar
  14. Kumy, hace mucho que no me pasaba por tu blog y esta bellisimo *---* ojala sigas haciendo crecer el blog, me gusta mucho y tus recursos siempre sirven y tu manera de escribir tambien es muy bonita... ademas de que poner iconitos en todas partes y eso me mata de ternura *---* gracias por el tutorial nena!

    ResponderEliminar

Holaa!! muy buenos días-tardes-noches espero que te haya gustado la entrada & si me dejas una huellita estaría muy agradecida.
Si tienes alguna duda no te olvides de mandarme un mail a mi correo o bien hacerlo por medio de la sección de dudas
candelaaisiska@gmai.com