Music Box Efecto deslizante By Annyz Blog

Hace tiempo que vi este efecto pero solo era para plantillas blogskin trate de hacer mi version para blog con plantillas normales y no me salia x_x paso un ratito hasta que por fin lo logre =D *aplausos* hahahah, y bueno como siempre me piden el nombre de las canciones que pongo en el reproductor *v* tambien le adicione un marque para el titulo de la cancion xD

espero les guste este efecto:

nos vamos a Diseno >> Edicion de html >> Editar plantilla ok?

Pulsamos ctrl + F y buscamos ]]></b:skin>

Copiamos este codigo y lo pegamos justo arriba de ]]></b:skin>

#music {
border-radius: 8px;
margin-bottom: 8px;
width: 210px;
text-align: center;
font-size: 10px;
background: url(URL DEL FONDO);
border: 1px solid #eee;
}
#here {
position:fixed;
left: 0px;
top:-80px;
text-align: center;
-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
z-index:999;
}
#here:hover {
top:8px;
}

Da clic en guardar y luego ve a Diseno >> Elementos de pagina >> Anadir gadget html/Javascript

Y pegas este codigo:

<div id="here">
<div id="music">
<div style="border:1px solid #eee; width:210px;height:65px;overflow:auto; "><br />
<center><center><object type="application/x-shockwave-flash" data="http://flash-mp3-player.net/medias/player_mp3_maxi.swf" height="20" width="200">
<param name="movie" value="http://flash-mp3-player.net/medias/player_mp3_maxi.swf" />
<param name="bgcolor" value="#ffffff" />
<param name="FlashVars" value="mp3=URL DE TU MP3&width=240&loop=1&autoplay=1&showloading=always&sliderwidth=7&sliderheight=7&volumewidth=10&volumeheight=10&loadingcolor=ffe3e3&bgcolor1=fdfdfd&bgcolor2=ffffff&slidercolor1=ffafbe&slidercolor2=ffafbe&sliderovercolor=ffafbe&buttoncolor=ffafbe&buttonovercolor=ffafbe" /></object></center><marquee behavior="scroll" direction="left">AQUI EL NOMBRE DE TU CANCION</marquee><center>
<br />
</center></center></div></div>
<img src="URL DE TU GIF O IMAGEN"/></div>

** Para editar el Pequeno reproductor visita este tutorial **

cute-mp3-player

y Aqui algunas imagenes:

http://sl.glitter-graphics.net/pub/738/738304r69e6gwna9.gif


http://sl.glitter-graphics.net/pub/776/776330gvfhqvip6d.gif

http://sl.glitter-graphics.net/pub/819/819969k0mjuqhbad.gif


http://sl.glitter-graphics.net/pub/1595/1595964muboxz6znj.gif


http://sl.glitter-graphics.net/pub/1626/1626857owzkk2y6eh.gif

No copiar tutorial :)