Botón con código deslizable

Hola, bueno ando superlido con tres trabajos para mañana  por eso un tutorial rapidito. A kumi le gustaba asi que se lo dedico,no sé como llamarlo pero trata de un botón que al pasar el ratón sale una cajita con un texto. Como el que tengo yo de color verde (el que dice ¿Qué es este blog?) Es facil. Comencemos con el tutorial¡¡GO, Go, go!!

Vas a Plantilla >> Edicion HTML y buscas </body>, encima pones esto:

<style>
.musMMC {
text-align:center;
font-size:11px;
font-family: trebuchet ms;
font-style: italic;
position: fixed;
left: 20px;
top: 10px;
width:150px;
color:#fff; /* COLOR DEL TITULO */
border: 1px dashed #fff; /* BORDE DEL TITULO */
padding:4px;
border-radius: 10px;
background: #95d3bf; /* FONDO DEL TITULO */
-webkit-transition: 2.0s;
-moz-transition: 2.0s;
}
.musMMC:hover {
-webkit-transition: 2.0s;
-moz-transition: 2.0s;
}
#note {
border-radius:10px;
border:1px dashed #95d3bf; /* BORDE DEL BOX */
margin-top:820px;
width:180px;
margin-left:10px;
padding:4px;
position: fixed;
text-align:left;
background:#fff; /* FONDO DEL BOX */
color:#95d3bf; /* COLOR DE LA LETRA DEL BOX */
opacity: 0;
-webkit-transition: 2.0s;
-moz-transition: 2.0s;
}
.musMMC:hover #note {
margin-top:20px;
opacity: 1;
overflow:hidden;
-webkit-transition: 2.0s;
-moz-transition: 2.0s;}
</style>
<div class="musMMC">  Titulo del botón <br /><div id="note">
Aqui el estado, mensaje... lo que quieras poner <br />
SI QUIERES PONER UN REPRODUCTOR DE MUSICA PONLO AQUI SI NO, BORRA ESTE MENSAJE</div>
</div>

Puedes usarlo poner un mensaje, música, un link, un menú... ¡lo que quieras! Se pondrá en la esquina superior izquierda de tu blog, si quieres colocarlo del lado derecho, cambia el "left" marcado por "right".