-->

20 mayo 2014

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

2 comentarios:

  1. Hola, me parecio muy mono tu reproductor, tengo unas dudas:
    1: se podria que en lugar de una sola cancion fuera una lista de reproduccion?
    2: Que medidas puedo usar para las imagenes del circulito?

    Y y y...ya XD
    Saludos
    Yuki Fuera!

    ResponderEliminar
    Respuestas
    1. No,el reproductor es sólo para una canción,y las medidas exactas no las sé,pero en engrampixel puedes conseguir las url's.

      Eliminar

Hola :)
Antes que nada,quería deciros que no insulteis ni causeis spam,hay que ser respetuoso,amigos :)