El mensaje que dice: "Ir a la página principal", se llama tiptip, y lo pueden encontrar en el enlace siguiente: Usar tiptip en Blogger.
El tutorial:
Antes de ]]></b:skin> pegamos los siguientes estilos:
.btn {display: inline-block;border: 1px solid rgba(0,0,0,0.4);padding: 2px 3px 2px 3px;font-weight: bold;text-shadow: 1px 1px 1px rgba(255,255,255,0.5);-moz-border-radius: 15px;-moz-box-shadow: 0px 0px 2px rgba(0,0,0,0.5);-webkit-border-radius: 5px;-webkit-box-shadow: 0px 0px 2px rgba(0,0,0,0.5);}.blue { background-color: #CCC; color: #141414; }.blue:hover { background-color: #00C0DD; color: #FFFDFC; }.orange { background-color: #CCC; color: #141414; }.red:hover { background-color: #FF7979; color: #FFFDFC; }
Lo que está de color naranja y azul se puede cambiar, y lo que dice blue yred también se puede cambiar por el nombre que gusten; Y lo que está en negrita, es decir, #00C0DD y #FF8C3F, lo pueden cambiar por el color en la siguiente página: HTML Color Codes, que también es muy buena, intutiva y muy fácil de usar.
Ahora, para poder implementar esto, lo que hemos dado, hemos de poner lo siguiente:
<div class='btn blue' style='font-size: 11px;'>Aquí el texto</div>Si se fijaron de lo que está en negrita, lo primero (btn) dice que los estilos o css que les hemos agregado, se les agrega a blue. Esto nos permite cambiarlo por el otro, el cual es red, que sería de la siguiente manera:
<div class='btn red' style='font-size: 11px;'>Aquí el texto</div>
Y se le agregarían los estilos de red, lo cual haría, que al pasar el mause por encima del botón, el color de fondo sea naranja. Ahora, para poder ver este efecto funcionando, visiten esta página. Si se fijan, arriba del título del blog, podrán ver estos botones.
Opcional
Si quieren que el efecto hover , el cambiar de color sea despacio, como con un efecto de desvanecimiento, entonces agreguen el siguiente código donde dice .btn:
-moz-transition:all 1s;Que quedaría de la siguiente manera:
-webkit-transition:all 1s;
-o-transition:all 1s;
transition:all 1s;
.btn {
display: inline-block;
border: 1px solid rgba(0,0,0,0.4);
padding: 2px 3px 2px 3px;
font-weight: bold;
text-shadow: 1px 1px 1px rgba(255,255,255,0.5);
-moz-border-radius: 15px;
-moz-box-shadow: 0px 0px 2px rgba(0,0,0,0.5);
-webkit-border-radius: 5px;
-webkit-box-shadow: 0px 0px 2px rgba(0,0,0,0.5);
-moz-transition:all 1s;
-webkit-transition:all 1s;
-o-transition:all 1s;
transition:all 1s;
}
Aja
ResponderEliminar