miércoles, 1 de agosto de 2012

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 **

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 :)

15 comentarios:

  1. annyz ! que lindo te quedo el disño o.o tu lo hiciste solita o bajaste alguna plantilla? esta hermoso,gracias por el tuto es super lindo ñ.ñ espero que pases por mi blog (:

    http://www.tuuuespacio.blogspot.com

    ResponderEliminar
  2. T_T Casi me largo a llorar cuando escuche la cancion de Dango *se seca lagrimas invisibles*
    :D Me encanta el reproductor mini!
    Un beso y felices vacaciones! (^o^)/

    ResponderEliminar
  3. que lindo pues claro que se lo ponbre ami blog.gracias

    ResponderEliminar
  4. oo que buen tutorial aunque no entendi mucho :(
    es que yo tengo el nuevo blogger

    ResponderEliminar
  5. Annyz, amo tu blog y tus publicaciones. Una pregunta tonta (?) de dónde sacas la URL de mp3 >n< ~With love... I.

    ResponderEliminar
  6. emm tengo una duda , yo voy a diseño y no me aparece elementos de pagina :( me ayudarias xfa?

    ResponderEliminar
  7. como siempre
    tu te la ingenias verdad *oo*
    esta divino el trucooo
    buenisimo saluditos

    ResponderEliminar
  8. lo ame ! Lo voy a probar.
    Gracias por compartirlo ! ♥ (○^ω^○)

    ResponderEliminar
  9. Annyz no se que hice T_T arriba de mi blog dice #music { border-radius: 8px; margin-bottom: 8px; width: 210px; text-align: center; font-size: 10px; background: url(http://4.bp.blogspot.com/-GcLxioV8ihU/TelROCudUYI/AAAAAAAAN_s/7Vf3qLch_hA/s200/Clipart+4+By+Dulces+Momentos.png); 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; } --> Porfavor ayudame!! :'c

    ResponderEliminar
    Respuestas
    1. okkii ya te he contestado en tu blog.. suerte

      Eliminar
  10. Hola ñ_ñ me encantan tus tutoriales pero mira yo pongo el mp3 (la verdad tembien quiero que me ayudes si puedo poner una playlist de mixpod) y no suena ni da play AYUDAME PORFAVOR ^^ ARIGATO!! :D

    ResponderEliminar
  11. hii !! annyz-chan a mi tampoko me suena la musica ;-; le pongo el url de yotube ? o de donde saco el url para q se escuche mi musica u..u gracias por la respuesta q puedas darme :3

    ResponderEliminar
  12. nop, no se puede poner la url de youtube porque se pondria tambien el reproductor de video o.o mmmm yo te recomiendo google.sites

    mira te paso el link de una amiga mia que explica omo subir un mp3 ahi

    http://aitokawaii.blogspot.mx/2012/08/tutorial-como-subir-una-cancion-o-mp3.html

    espero te sea de ayuda.. besos

    ResponderEliminar
  13. si quiero poner mas canciones en el reproductor, como le hago?

    ResponderEliminar

Nota: solo los miembros de este blog pueden publicar comentarios.