3 Reproductores Player Blog

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

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

Nos vemos

!