Bienvenido a mi blog. Aquí encontrarás todas las cosas que he creado e ido aprendiendo con el tiempo, útiles para ti y tu sitio web.

Reproductor de mp3 con efecto deslizante (modificado)

HELLO EVERYBODY!! ( ̄▽ ̄)ノ Hoy vengo a cumplir con otro tutorial a pedido, aunque la verdad ya me lo habían pedido antes jejeje. Fue solicitado por Maggie y también, con anterioridad, por Yuki-chan de yukishoyaoi.blogspot.com.

Antes que nada debo aclarar que este tutorial lo aprendí de Annyz-kawaii, pero lo modifiqué tantito (siempre me gusta dar mi propio aporte) ya que no quería repetir un tuto ya publicado.

Entonces iniciemos con el tutorial. 3... 2... 1 ....GO!
IMAGEN GUÍA
 COLOCANDO EL REPRODUCTOR MP3 
PASO 1: Antes de empezar con el tutorial has de contar con un reproductor mp3 de singingbox, si no tienes uno visita este tutorial Ponle algo de música a tu Blog y sigue los pasos. Si ya tienes un Reproducto mp3 de singingbox omite este paso y ve al sgte.

PASO 2: Vamos a 'Diseño → Añadir un gadget → HTML/Javascrit'

PASO 3: Pega el sgte. código...
<!--MUSIC-->
<div id="here">
<img src="http://img441.imageshack.us/img441/9008/musickuma.gif"/>
<div id="music">
<div style="border:none; width:210px;height:65px;overflow:auto; "><br />
CÓDIGO DE TU REPRODUCTOR MP3
</div></div>
</div>
<!--END MUSIC-->
PASO 4: Guardar. Lee nota, hay info muy importante.

 Nota:  El código de color Rojo es el URL del gif, puedes usar el mismo o ponerle cualquier otro que mejor creas. Lo del color púrpura es donde debes pegar el código de tu reproductor mp3. No te preocupes de que aún no se vea algunas cosas, con el siguiente paso todo estará completo. Ah! también les dejo unos GIF si es que se les antoja cambiar el que yo dejé predeterminado (cambia lo de color Rojo por cualquiera de los sgtes.).

 COLOCANDO EL EFECTO 
PASO 1: Clic en 'Plantilla → Edición de HTML → Continuar'

PASO 2: Busca  ]]></b:skin>  (Control+G, para una busqueda rápida)
/* Music
----------------------------------------------- */
#music {
border-radius: 30px;
margin-top: -6px;
width: 210px;
text-align: center;
font-size: 10px;
background: url(http://imageshack.us/a/img825/1373/other1j.png);
border: #ffffff 4pt solid;
}
#here {
position:fixed;
right: 0px;
bottom:-75px;
text-align: right;
-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 {
bottom:8px;
}
PASO 3: Clic en vista previa, se ve bien verdad? Bueno entonces ahora clic en 'Guardar plantilla'.

 Nota:  Lo resaltado en color azúl, es la url del fondo (el fondo que envuelve el reproductor). Puedes dejarlo así o modificarlo. Queda a su decisión.

Bien eso es todo, me voy a descansar. ε-(´・`) SI! a descansar, y es que esta es un publicación programada y la estoy escribiendo de noche madrugada (no podía dormir jejeje) y ya me entró el sueño (¬ ¬). Una cosa más, si gustas puedes modificar donde ya había mencionado (que son el GIF y el FONDO) pero sino déjalo igual.  Hasta más tarde y espero que este tuto les haya servido.

3 comentarios:

  1. hey!!que buena tutorial....quizas use este efcto para mi otro blog!!
    gracias!!

    ResponderEliminar
    Respuestas
    1. Si es muy lindo y no ocupa espacio (*-*).

      Eliminar
  2. ke chulo me encanta este tuto lo havia visto pero los aportes estan genial n.n

    ResponderEliminar

HOME STAFF AFILIATE FOLLOW CONTACT
HOME STAFF AFILIATE FOLLOW CONTACT
Copyright© Nemuri Kuma | Powered by Blogger.
Design n' Blogger template by Kuma.