El Tooltip es el cuadradito que aparece cuando ponemos el cursor encima de un enlace.
Este cuadradito vale para explicarnos algo relacionado con el enlace.Modificando nuestra plantilla
Para poder hacer que el Tooltip funcione en nuestro blog, tenemos que modificar nuestra plantilla.Nota:
Antes de realizar cualquier cambio en nuestro blog, tendremos que realizar una copia de seguridad del mismo por si algo no sale bien.
Puedes ver en este post como lo hacemos paso a paso
Antes de realizar cualquier cambio en nuestro blog, tendremos que realizar una copia de seguridad del mismo por si algo no sale bien.
Puedes ver en este post como lo hacemos paso a paso
Nos vamos a Tema > HTML
Busca la etiqueta ]]></b:skin> y añade este bloque encima:
Ingredientes
.tooltip { position: relative; display: inline-block; border-bottom: 1px dotted black;}
.tooltip .tooltiptext { visibility: hidden; width: 320px; background-color: black; color: #fff; text-align: center; border-radius: 6px; padding: 5px 0; /* Position the tooltip */ position: absolute; z-index: 1; top: -5px; left: 105%;}
.tooltip:hover .tooltiptext { visibility: visible;}</style>
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 320px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
/* Position the tooltip */
position: absolute;
z-index: 1;
top: -5px;
left: 105%;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
</style>
Decorarlo a nuestro gusto
Ahora podemos modificar el código a nuestro gusto. width: 320px; ancho: 320px;
background-color: black; color de fondo: negro;
color: #fff; color letra #fff;
text-align: center; alineación de texto: centro;
border-radius: 6px; borde-radio: 6px;
padding: 5px 0; borde-radio: 6px;
/* Position the tooltip */
position: absolute;
z-index: 1;
top: -5px; arriba: -5px;
left: 105%; izquierda: 105%;
Ya puedes guardar los cambios.
Ahora, siempre que quieras insertar el enlace con el tooltip usa esta línea:
Cambiamos..
Lo marcado en rojo por la URL de la pagina que quieras enlazar.
Lo marcado en azul por el titulo del enlace.
Y lo marcado en verde por el texto que aparecerá en el tooltip.
Ingredientes
eeeeeeeeeeeeee
Nota:
Antes de realizar cualquier cambio en nuestro blog, tendremos que realizar una copia de seguridad del mismo por si algo no sale bien.
Puedes ver en este post como lo hacemos paso a paso
Antes de realizar cualquier cambio en nuestro blog, tendremos que realizar una copia de seguridad del mismo por si algo no sale bien.
Puedes ver en este post como lo hacemos paso a paso
Nota:
Antes de realizar cualquier cambio en nuestro blog, tendremos que realizar una copia de seguridad del mismo por si algo no sale bien.
Puedes ver en este post como lo hacemos paso a paso
Antes de realizar cualquier cambio en nuestro blog, tendremos que realizar una copia de seguridad del mismo por si algo no sale bien.
Puedes ver en este post como lo hacemos paso a paso
No hay comentarios:
Publicar un comentario
En breve les contestaremos