Bienvenido a VidaBlogger, un sitio dedicado a brindar Ayuda para Blogs.

Vas a poder encontrar trucos blogger, tutoriales y herramientas para blogs, aprenderás estrategias sobre SEO y posicionamiento web, y te daremos los mejores consejos para que lleves tu blog al máximo potencial!





26 sept. 2014

Trucos Blogger: tooltips con css

tooltip

Los trucos visuales hacen que el blog gane en adeptos a los que les gusta la parte gráfica. Si bien muchas veces los trucos nos afectan en otras cosas, como la validación del sitio por ejemplo, no debemos dejarlos de tener en cuenta, ya que pueden ser muy útiles a los ojos de los visitantes.

El truco de hoy es insertar un tooltip (caja con texto descriptivo que se tiene al pasar el mouse sobre un objeto o texto) con css. Este truco fué creado por la gente de Ciudad Blogger, y el cual considero que es muy interesante.

Bien para generar nuestro tooltip destacado, debemos acceder al escritorio y allí dirigirnos a la pestaña de diseño > edición de html. Una vez allí buscaremos el siguiente código: ]]></b:skin>. Antes de ese código deberemos pegar lo siguiente:

a.tooltip {
position: relative;
z-index: 24;
cursor: help;
text-decoration: underline;
}
a.tooltip:hover {z-index: 25; text-decoration: none;}
a.tooltip span {display: none}
a.tooltip:hover span { /* Estilos de la descripción */
display: block;
position: absolute;
top: 2em; left: 2em;
width: 16em;
border: 1px solid #0cf;
background: #ECE0D8;
color: #000;
text-align: center;
}


En background puedes poner el código de otro color que se ajuste a tu blog, o incluso puedes añadir una imagen de fondo insertando este código en lugar del código del color:

url("http://dirección-de-la-imagen.jpg") (esto iría en remplazo de #ECE0D8)

Ahora para finalizar solo falta añadir un código extra en nuestras entradas, para cada vez que deseemos utilizar este tooltip en las entradas:

<a class="tooltip">Pasa el cursor aquí<span>Mensaje mostrado</span></a>


Como vemos es un truco muy sencillo y que puede darle un toque especial a nuestros blogs.

Si te ha gustado este post, no dudes en suscribirte al feed RSS de VidaBlogger - Ayuda para Blogs! para recibir todos los días la últimas novedades - (¿Que es RSS?)

0 comentarios :

Publicar un comentario en la entrada

Lea las reglas:

Todos los comentarios serán leídos y moderados previamente.

Serán publicados aquellos comentarios que respeten las siguientes reglas:
- Su comentario debe estar relacionado al contenido del post.
- No se aceptan comentarios tipo SPAM.
- No incluya links No necesarios en el contenido de su comentario.
- Si quieres dejar la url de tu blog, hazlo utilizando la opción OpenID.
- La caja de comentarios no es el lugar para pedir intercambio de links (para ello ve a la página de contacto).
- Ofensan personales, amenazas o insultos NO serán permitidos.

OBS: Los comentarios de los lectores no reflejan las opiniones del blog.