Both Of Us
{ Tutorial } Dos reproductores de Música + Cajas
28.2.15 • 17:26 • 2 comments


Hola nuevamente ヽ( ´ ▽ ` )ノ ,les traigo dos reproductores de música kawaii ^ω^
   la verdad es que me parecieron muy lindos ⊙ω⊙, sin más rodeos empecemos:

PLANTILLAS BLOGGER

Nos dirigimos a :

Diseño  Añadir un gadgetHTML/JAVASCRIPT

1er Reproductor:

El primer reproductor es el que yo utilizo en mi blog, como pueden ver es estático, al mover tu cursor hacia el gif se abre el pequeño circulo la verdad a mi me ha encantado  ^ω^


Solo pegan el siguiente código 

<!------------------------ MUSIC PLAYER ------------------------!><style>#music{position:fixed; top:90px; left:10px;padding-top:10px;padding-bottom:17px;text-align:center;height:10px; width:34px;overflow:hidden;border:3px solid #FFF1C6;color:#888;border-radius:40px;-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 #FFF1C6; padding:5px; height:65px; width:65px;border-radius:70px;}</style><div id="music"><center><img src="http://media.tumblr.com/tumblr_m9sq8vPdF31qdlkyg.gif" style="background:none;border:none;padding-top:0px;" /></center><div id="musicplayer">
<center><param name="allowFullScreen" value="true" /><param name="allowscriptaccess" value="always" /><embed src="http://www.youtube.com/v/
<center><param name="allowFullScreen" value="true" /><param name="allowscriptaccess" value="always" /><embed src="http://www.youtube.com/v/qtZNzWTOV6E?version=2&autoplay=1&hl=en_US&color1=E4E1FF&color2=F3E1FF" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="30" height="25"></embed></center></div></div>
Ahí tienen lo que representa cada color

Tipo de borde;el primer verde es cuando no pasas el cursor; el segundo sí.
Esto indica el color del borde cuando no pasar el cursor.
Color de borde al pasar el cursor
El fondo del reproductor al no pasar el cursor
Link del gif
Código del vídeo
Color de borde del botón | | 
Color de fondo del botón | |  

Nota para los dos últimos:
Normalmente los colores se colocan con # 
pero esta vez solo tienes que colocarlo sin #

Si usas plantilla blogskin pegalo antes de </body>


2do Reproductor




Se trata de un reproductor flotante que se ubica en la esquina de tu blog y a diferencia del anterior reproduce el vídeo con imagen en una pequeña caja;en lo personal me ha parecido muy lindo al igual que el anterior ^ω^

<div style=" position:fixed; top:0px; left:100px;"><img src="
http://2.bp.blogspot.com/-O8FP9AI3ipw/VPJTk9HSNJI/AAAAAAAAE9Q/vI3UP39xbo4/s1600/byyane.png" /></div><div style=" position:fixed; top:60px; left:122px;"><center><object height="25" width="300"><param name="movie" value="color1=0xffffff&amp;color2=0xfffffffs&amp;autoplay=1&amp;hl=en_US&amp;rel=0&quot;" /><param name="allowFullScreen" value="true" /><param name="allowscriptaccess" value="always" /><embed src="http://www.youtube.com/v/uWyFXe8tXBQ?color1=0xffffff&amp;color2=0xfffffffs&amp;autoplay=1&loop=1&amp;hl=en_US&amp;rel=0" type="application/x-shockwave-flash" width="180" height="110" allowscriptaccess="always" allowfullscreen="true"></embed></object></center></div>
Ancho del vídeo,esto va según el tamaño de tu caja. 
Largo del vídeo,según el tamaño de tu caja. (si vas a utilizar unas 
de las cajitas que les presentaré a continuación recomiendo dejarlo así;esto 
va para la altura y la anchura)
Código del vídeo /les mostraré al final/
Url de tu caja
Altura de la caja (recomiendo dejarlo en 0px)
Altura del video 
Normalmente la caja esta en la izquierda si lo que deseas es
ponerlo a la derecha tendrías que ponerle un numero mayor;
yo probé poniéndole 750 y va perfecto.
Esto es para mover el video si lo pusiste a la derecha y probaste
con 750 te recomiendo que pongas 772;es decir; aunque hayas 
puesto otro número le aumentas 22px más;para que así quede centrado.

De hecho hay una pagina de la cual pueden sacar sus códigos para los colores.

Clic aquí

 ¿Como saco el código de un vídeo?

El código de un vídeo es para la música que quieres que reproduzca,solo para youtube;en fin;
me tome el tiempo de averiguar como hacerlo ya que no sabía como.

1.- Vamos a youtube y buscamos la música que queremos que reproduzca.
2.- Arriba en el buscador;donde se encuentra el link;tenemos un código.



Me refiero a U6H-UI7mvt0 es según el código que les aparezca a ustedes ^.^

CAJAS










Con fondo














No son muchas ,pero pronto publicaré más,espero que el les haya servido
si tienen alguna duda no duden en comentar,hasta la próxima entrada n.n




Etiquetas: ,




Welcome to my blog . Please navigate around happily. And follow me if you like to ;> Don't forget to leave your footsteps so I can visit you back ;3 bold italic underline strike

Diary About Link Stuff


Put your cbox code here ! :)


Template By: Umi Humaira
Big helped: Wana
Owner: YOUR NAME