Como poner un tooltip


¡Hola! lectoras como están? imageespero que muy bien yo estoy con mucho calor en mi pais hace demasiado calorimage,cambiando de tema el día de hoy les traigo un tutorial de como poner un tooltip a tu blog antes de empezar les mostrare una vista previa

Vista previa


  • Plantilla
  • Edición HTML
  • Ctrl + f buscamos
  • </body> 
y pegamos el siguiente codigo debajo de el que dije anteriormente
<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>
Vista previa y guardar

segundo paso
  • Plantilla
  • Edición HTML
  • Ctrl + F y buscamos
  •  ]]></b:skin>
y pegamos el siguiente codigo debajo de ]]></b:skin>

 #s-m-t-tooltip {

-webkit-animation: ToolHorizontal 1s infinite;

background: #cba4f4; /* COLOR DE FONDO */
color: #fff; /* COLOR DE TEXTO */
font-family: 'ABeeZee'; /* TIPO DE LETRA */
font-size: 9px; /* TAMAÑO DEL TEXTO */
letter-spacing: 1px; /* ESPACIO ENTRE LETRAS */
border: 2px solid #fff; /* BORDE DEL TOOLTIP */
border-radius: 5px; /* ESQUINAS REDONDEADAS */
text-shadow: 0 0 0.5em  #b26bfe , 0 0 0.5em #b26bfe;
text-transform: uppercase;
line-height: 11px;
text-align: center;
display: block;
padding: 10px 15px 10px 15px;
margin: 20px 10px 0px 10px;
z-index: 999;
}

Lo que esta de color rojo es el color del tooltip puedes cambiarlo al color que quieras

-Tambien hise algunos fondos espero que les gusten si usan alguno no olviden darme creditos quiero diseñar otra plantillas pero no tengo muchas ideas que me recomiendan? muchas gracias por visitar el nos vemos luego~







No hay comentarios :

Publicar un comentario

miércoles, 1 de julio de 2015

Como poner un tooltip


¡Hola! lectoras como están? imageespero que muy bien yo estoy con mucho calor en mi pais hace demasiado calorimage,cambiando de tema el día de hoy les traigo un tutorial de como poner un tooltip a tu blog antes de empezar les mostrare una vista previa

Vista previa


  • Plantilla
  • Edición HTML
  • Ctrl + f buscamos
  • </body> 
y pegamos el siguiente codigo debajo de el que dije anteriormente
<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>
Vista previa y guardar

segundo paso
  • Plantilla
  • Edición HTML
  • Ctrl + F y buscamos
  •  ]]></b:skin>
y pegamos el siguiente codigo debajo de ]]></b:skin>

 #s-m-t-tooltip {

-webkit-animation: ToolHorizontal 1s infinite;

background: #cba4f4; /* COLOR DE FONDO */
color: #fff; /* COLOR DE TEXTO */
font-family: 'ABeeZee'; /* TIPO DE LETRA */
font-size: 9px; /* TAMAÑO DEL TEXTO */
letter-spacing: 1px; /* ESPACIO ENTRE LETRAS */
border: 2px solid #fff; /* BORDE DEL TOOLTIP */
border-radius: 5px; /* ESQUINAS REDONDEADAS */
text-shadow: 0 0 0.5em  #b26bfe , 0 0 0.5em #b26bfe;
text-transform: uppercase;
line-height: 11px;
text-align: center;
display: block;
padding: 10px 15px 10px 15px;
margin: 20px 10px 0px 10px;
z-index: 999;
}

Lo que esta de color rojo es el color del tooltip puedes cambiarlo al color que quieras

-Tambien hise algunos fondos espero que les gusten si usan alguno no olviden darme creditos quiero diseñar otra plantillas pero no tengo muchas ideas que me recomiendan? muchas gracias por visitar el nos vemos luego~







No hay comentarios:

Publicar un comentario

Copyright © 2015 Fiorela Kawaii - Desing by Angel P.