Annyz-BlOg : 3 Reproductores Player Blog
para COPIAR los codigos usa la tecla Ctrl + C y para PEGAR usa la tecla Ctrl + V gracias :) El Blog Se visualiza mejor con Google Chrome..

14 noviembre 2012

3 Reproductores Player Blog



Les traigo unos reproductores muy monos con efecto hover para sus blogs.. espero les gusten y me den un coment >.< besos

empezemos con el primero:

Reproductor Cute Bear player





abres un gadget html/javascript y pegas este codigo:
<Div id = " musicplayer ' >
    <Div id = ' música ' > music
    </ Div>
<Div id = " music1 ' > <img src="http://media.tumblr.com/tumblr_lm6prnRzP61qfoi4t.gif">

    </Div>
    <Div id ='musik'><center>
     
        <Embed quality = "high" style= " Ancho: 50px; visibility: visible; altura: 15px; "type ="application/x-shockwave-flash" height= "15" width= "50" pluginspage= "http:// www.macromedia.com/go/getflashplayer "border ="0" src=" http://www.hypster.com/flash/player.swf?id=2842603:3333255:1&autoplay=false"/>
       
    </Center></div>
    </Div>

das guardar.

NOTA:  Aqui por defecto ya esta puesto un reproductor pero donde esta de color rosa palido debes de poner tu reproductor... se recomienda usar hypster.com ( ahi tienes que registrarte) pero tambien puedes probar El reproductor Billy solo tienes que poner los mp3 que quieres que se escuchen y dar la opcion "Generar Codigo" se te generara un codigo y ese lo pegas en donde esta el color rosa palido.


Luego copiamos este codigo y lo pegamos antes de ]]></b:skin>
#musicplayer {
text-align:center;
font-size:9px;
color:#000;
background-color:#fff;
width:80px;
position:fixed;
bottom:-60px;
left:10px;
height:60px;
opacity:1;
padding-top:5px;
padding-right:5px;
padding-left:5px;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
z-index:9999;
-webkit-border-radius: 80px;
border-radius: 80px;
}
#musicplayer:hover {
bottom:0px;
}
#musicplayer:hover #music {
margin-left:50px;
opacity:1;
}
#musicplayer:hover #music1 {
margin-left:-10px;
opacity:1;
}
#music {
padding-top:8px;
background-color:#fff;
height:32px;
width:40px;
text-align:center;
font-family:consolas;
text-transform:uppercase;
font-size:8px;
opacity:1;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
margin-top:-20px;
margin-left:5px;
-webkit-border-radius: 40px ;
border-radius: 40px;
}
#music1 {
padding-top:8px;
background-color:#fff;
height:32px;
width:40px;
text-align:center;
font-family:consolas;
text-transform:uppercase;
font-size:8px;
opacity:1;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
margin-top:-40px;
margin-left:35px;
-webkit-border-radius: 40px;
border-radius: 40px;
}
#musik {
overflow:hidden;
padding:6px;
width:70px;margin-top:0px;
z-index:9999;}

das vista previa  y guardar

credito:


Music Player Deslizante


Vamos a diseño >> Abrimos un gadget html/javascript, copiamos este codigo y pegamos:

<div id="Music">
<span class="description">
<img src="http://media.tumblr.com/tumblr_lkl685lsDq1qfamg6.gif">
</span>
<div id="Music_inner">
AQUI TU REPRODUCTOR DE MUSICA!!!
</div>
</div>


Despues copiamos este codigo y lo pegamos antes de ]]></b:skin>

#Music {
/* For IE 8 */
z-index:1000;
position: fixed;
bottom: 3px;
left: -40px;
width: 88px;
padding: 10px 0;
text-align: center;
background: #000;
-webkit-transition: opacity 0.9s linear;
-webkit-transition: all 0.9s ease-in-out;
-moz-transition: all 0.9s ease-in-out;
-o-transition: all 0.9s ease-in-out;
opacity:1;}
#Music_inner {
position: fixed;
bottom: 3px;
right: -250px;
background: #FAAFBE;
width: 180px;
padding: 3px;
height: 14px;
-webkit-transition: opacity 0.9s linear;
-webkit-transition: all 0.9s ease-in-out;
-moz-transition: all 0.9s ease-in-out;
-o-transition: all 0.9s ease-in-out;
opacity:1;
text-align: center;
-webkit-border-radius: 0 50px 0px 0;
-moz-border-radius: 0 50px 0px 0;
border-radius: 0 50px 0px 0;
}
#Music:hover {
z-index:1000;
left: -20px;
background: #000;
}
#Music:hover #Music_inner {
z-index:1000;
left: 68px;
}
.description {
display: block;
writing-mode: lr-tb;
-webkit-transform: rotate(-360deg);
-moz-transform: rotate(-360deg);
-ms-transform: rotate(-360deg);
-o-transform: rotate(-360deg);
transform: rotate(-360deg);
position: absolute;
left: 54px;
top: 4px;
font-family:"georgia";
font-size: 11px;
text-transform: lowercase;
letter-spacing: -1px;}

Das vista previa y guardar:)

Reproductor Slideup



Vamos a diseño >> Abrimos un gadget html/javascript, copiamos este codigo y pegamos:

<div id="Musicplayer">
<img src="http://i12.photobucket.com/albums/a213/superkate_2468/favicon-2ico.gif">
<br>
REPRODUCTOR MUSICA AQUI!!
</div>


Igual que arriba  copiamos este codigo y lo pegamos antes de ]]></b:skin>

div#Musicplayer{
width:21px;
position:fixed;
height:20px;
padding:3px;
padding-bottom:0px;
bottom:-1px;
left:0px;
background-color:#000;
-webkit-border-radius: 0 50px 0px 0;
-moz-border-radius: 0 50px 0px 0;
border-radius: 0 50px 0px 0;
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
}
div#Musicplayer:hover{
width:180px;
position:fixed;
height:33px;
padding:3px;
padding-bottom:0px;
bottom:0px;
background-color:#000;
-webkit-border-radius: 0 250px 0px 0;
-moz-border-radius: 0 250px 0px 0;
border-radius: 0 250px 0px 0;
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
}
Das vista previa y guardar

Notita: Para estos 2 ultimos reproductores se recomienda El reproductor Billy.. besos

credito: 


11 comentarios:

  1. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  2. Tan Lindosssszz! Annyz tengo una pregunta, en Bill sirve los link de You tube? o me recomiendas una pagina O.o? Espero tu respuesta, gracias :D
    Kisus :D

    ResponderEliminar
    Respuestas
    1. mm no sabria decirte shigatsu sobre lo de youtube.. porque no lo he probado..pero anduve investigando y creo que no es posible.. ya que youtube por defecto de pondra el video y no solo la cancion o.o

      Eliminar
  3. me podrias explicar mejor :3 no entiendo

    ResponderEliminar
  4. olis annyz-chan una consulta como saco el codigo en Hypster??

    ResponderEliminar
    Respuestas
    1. no lo se nena, no me registre para investigar.. tome el del billy es muy bueno tambien.

      Eliminar
  5. nu me sale ponerlo u.u nuse porq probe con billy pero me sale cargando u.u volvere a intentar TwT

    ResponderEliminar