
En este tutorial te mostrare como añadir Tooltip a imagenes o enlaces.esta es una herramienta que ayuda a describir un objeto cuando el visitante pone el cursor del mouse sobre el mismo.Esta simple tecnica la puedes impletmentar con el codigo de diseño Css.En esta ocasion vamos a integrarlo al blog de blogger con los siguientes pasos.
Ejemplo :Pon cursor sobre el siguiente enlace:
Consejos BloggerConsejos Blogger Trucos
1.Entra en tu cuenta de blogger>>Plantilla>>Editar Html
2.Busca la siguiente en ella la siguiente etiqueta</head> .
3.Copie el codigo de abajo y peguelo antes de la etiqueta </head> .
<style type='text/css'> a.tooltip{ position:relative; text-decoration: none; } a.tooltip span{ display: none; } a.tooltip:hover span{ display:block; position:absolute; top:20px; left:20px; padding: 5px; width:200px; border:1px solid #fff; background-color:#000000; filter:alpha(opacity=60); opacity:0.6; color:#fff; } </style>
4.Ahora Gurada tu plantilla.
5.Luego cuando vayas a añadir este efecto tooltip a un enlace sigue el siguiente paso.
<a href="Tu enlace" class="tooltip">Enlace de Texto<span>Tu Texto Con Tooltip</span></a>
Mira el ejemplo:
<a href="http://ciudadblogger.info/" class="tooltip">Trucos Blogger<span>Trucos Recientes de Blogger </span></a>
Chequea Imagenes Con Efecto Swing
0 comentarios:
Publicar un comentario