jueves, 11 de julio de 2013

Añadir Css Tooltip A Enlaces de Blog de Blogger

Leave a Comment
Añadir Css Tooltip A enlaces de blog de blogger

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
If You Enjoyed This, Take 5 Seconds To Share It

0 comentarios:

Publicar un comentario