Slider

espacios slider









16 ene. 2014

Tutorial: Reproductor de Musica



Tutorial: Reproductor de Música

Hola que tal se encuentran? ya tengo un respiro y decidí estar por aquí  ahora les explicare el siguiente tutorial que como dice en el titulo  es para tener un reproductor de música, empezamos?






Es muy sencillo solo hay que seguir los siguientes pasos 

1- Vamos  Diseño
2- Añadir un Gadget Javascrip/html y pegas el siguiente código

<style>
#box{
    overflow:hidden;
    position:fixed;
    width:18px;
    height:18px;
    top:50px; /* Puede cambiar el número o cambiar a fondo*/
    left:50px; /* Puede cambiar el número o cambiarlo a la derecha*/
    background:#ffffff; /* Este es el color de fondo */
}
#icon{
    /* Esto es para el posicionamiento de la música gif: */
    margin-top:5px;
    margin-left:2px;
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
    transition: all 0.3s linear;
}
#box:hover #icon{
    margin-top:-20px;
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
    transition: all 0.3s linear;
}
#musicbox{
    width:8px;
    height:8px;
    overflow:hidden;
    /*Esto es para el posicionamiento de la música gif:: */
    margin-top:14px;
    margin-left:5px;
}
#music{
    margin-top:-6px;
    margin-left:-35px;
}
</style>
<div id="box"><div id="icon">
<img src="http://media.tumblr.com/tumblr_m7w2o3N94I1r6o8v2.gif"/>
</div>
<div id="musicbox"><div id="music">
<!-- CODIGO DE TU REPRODUCTOR -->
</div></div></div>

 Edita:
Rojo: El código de tu reproductor
Si no sabes buscar la url de tu musica, te dejo los tutoriales


CRÉDITOS A: Lee Rae Mi

1 comentario: