Tutorial:Cómo poner el reproductor de Youtube en miniatura cómo el mío.

Holas,bueno,hacía cómo 8328493589043485098 años que Carla(yo) no publicaba un tutorial,pero bueno
,hoy os diré cómo poner el reproductor cómo lo tengo yo ahora.

 Así es cómo se vería abierto.

Y así cerrado.
Bueno,dale a seguir leyendo y comencemos con el tutorial...

Vas a Diseño/Gadget/HTML Javascript y pegas el siguiente código:

<style>

#music{

position:fixed; top:90px; left:10px;/*90 Aumentas y se va mas abajo left izquierda */

padding-top:10px;padding-bottom:17px;

text-align:center;/*Letra centrada*/

height:10px; width:34px;

overflow:hidden;

border:3px solid #B49A9A;/*Border 3 Tamaño solid Tipo B49A9A Color*/

color:#888;/*Color de la Letra*/

border-radius:40px;/*Border Redondeados*/

-webkit-transition: opacity 0.7s linear;

-webkit-transition: all 0.7s ease-in-out;

-moz-transition: all 0.7s ease-in-out;

-o-transition: all 0.7s ease-in-out;

background-color:#FFFFFF;

z-index:999;

}

#musicplayer{

padding-top:10px;

-moz-transition: all 0.5s ease-in-out;

-o-transition: all 0.5s ease-in-out;

-ms-transition: all 0.5s ease-in-out;

transition: all 0.5s ease-in-out;

}

#music:hover {

border:3px dotted #febdbd; /*Border 3 Tamaño dotted Tipo febdbd Color*/

padding:5px; height:65px; width:65px;

border-radius:70px;/*Border Redondeados*/

}

</style>

<div id="music">

<center>

<img src="URL DE TU MINI GIF" style="background:none;border:none;padding-top:0px;" /></center>

<div id="musicplayer">

<center><object width="30" height="25"><param name="movie" value="http://www.youtube.com/v/U7mPqycQ0tQ?version=2&amp;autoplay=1&amp;hl=en_US&amp;color1=DACDBE&amp;color2=DACDBE" /><param name="allowFullScreen" value="true" /><param name="allowscriptaccess" value="always" /><embed src="http://www.youtube.com/v/U7mPqycQ0tQ?version=2&amp;autoplay=1&amp;hl=en_US&amp;color1=C9B29F&amp;color2=DACDBE" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="30" height="25"></embed></object></center>

</div>

</div>

Editemos...
Código en verde:es la url del mini-gif que decorará tu reproductor.
Algunos aquí:Engrampixel

Código en Azul:Es la URL de la canción de tu reproductor,yo ahora tengo Gee de Girls' Generation,pero tú lo puedes cambiar por el que quieras cogiendo el código que dejo marcado en rojo en la imágen de abajo:

Ese código(o el de tu vídeo favorito) lo cambias por los códigos que dejé en azul.

Si no quieres los bordes redondos sólo borra:

border-radius:70px;/*Border Redondeados*/

Y se te quedaría cuadrado.
Cambia los colores de los bordes si quieres,pero a mi me gustó así :P,se cambia yendo a Photoshop o a Color Exa,escogiendo un color,copias y reemplazas el código.

También puedes cambiar el tipo de bordes consultando aquí:Annyz

También quería deciros que siento mucho el estar ausente,intentaré postear más...

Bueno,eso ha sido todo XD,espero que os sirva :3

Créditos:Luna