Music Player fofo e Diferente

by - julho 06, 2014


   Olá amados e amadas, tudo bem com vocês queridos? Gente do céu, o que é isso hein? Vocês não tem ideia das perguntas anonimas que tem lá na minha ask, fico até com raiva de responder, respondi uma e parai, não irei responder, só estarei perdendo tempo, e quem pergunta também!
   Mas então fofuras, me pediram para trazer esse "Player" que eu uso aqui no blog, mas a parte de personalizar o vídeo iria requerer um tutorial separado, por ser bem complicadinho, então eu criei outro modelo, achei uma fofurinha, e bem simples de usar, e o melhor de tudo: ficou diferente!
Espero que vocês olhem no live preview, por que na imagem não dá para ver a transição em hover. Para utilizar eu tentei deixar o mais simples possível, e ficou bem fácil mesmo.

  • Adicione um novo gadget/HTML e cole o código abaixo:

<style type="text/css">
#music-player-rounded {
  position:fixed;
  left:10px;
  top:7px;
  width:20px;
  height:20px;
padding:2px;
padding-left:4px;
  background: #fee;
-webkit-box-shadow: inset 0px 0px 10px #ffbed2;
-moz-box-shadow: inset 0px 0px 10px #ffbed2;
-o-box-shadow: inset 0px 0px 10px #ffbed2;
-webkit-transition: 0.4s;
-moz-transition: 0.4s;
-o-transition: 0.4s;
  -moz-border-radius:100px;
  -webkit-border-radius:100px;
  border-radius:100px;
  border:3px double #fee;
  opacity:1;
  -webkit-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  transition: all 0.4s ease;
}
#music-player-rounded:hover {
  -webkit-transform:rotate(360deg);
  -moz-transform:rotate(360deg);
  -o-transform: rotate(360deg);
  left:50px;
  top:30px;
}
.music-player {
  margin-top:-7px;
  margin-left:-55px;
  width:250px;
  height:25px;
  padding-left:10px;
  padding-top:10px;
  color:#fff;
  opacity:0;
  overflow:hidden;
  font:12px Arial, Calibri, Cambria, sans-serif;
  -webkit-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  transition: all 0.4s ease;
  }
#music-player-rounded:hover .music-player {
  opacity:1;
}
.music-player-embed {
  margin-left:-115px;
  margin-top:3px;
}
</style>
<div id="music-player-rounded"><center>
<img src="http://lh5.ggpht.com/_NZJzdRm10Y0/TUbcwrYURII/AAAAAAAAAeA/N_CGXqzkOWM/marcadores59.gif" />
<br />
<div class="music-player">
<div class="music-player-embed">
<embed src="http://www.sheepproductions.com/billy/billy.swf?autoplay=false&f0=http://dc239.4shared.com/img/755357078/38653788/dlink__2Fdownload_2FEWqJKH4n_3Ftsid_3D20140705-211730-32d7aba5_26lgfp_3D1000_26dsid_3D6bjmtb.00a3723442bd0683fe24ec81e674ff6b_26sbsr_3D25e142160891151e00f0ce5d71d5defb43410b0afc22975a/preview.mp3&t0=Yes, Prisioner&total=1" quality="high" wmode="transparent" width="370" height="10" name="billy" align="middle" type="application/x-shockwave-flash" /></embed>
</div></div></center></div>


  • Pronto seu Music Player já estará, novinho lindo e cheiroso, mas estará com a música que eu coloquei, troque pela sua da seguinte forma: 


 Apague o código de " <embed src= até </embed> ", apague esse código todo. Depois nesse local coloque o código da sua música, recomendo que use o mesmo site que usei, o Billy.
  Então, esse é o que todo mundo usa hoje em dia, eu ainda prefiro usar o YouTube para "fazer meu Player", mas acho que ninguém lembraria de como se usa. 

Enfim, espero que tenham gostado chuchus, beijos >3<.

Share
Tweet
Pin
Share
Tags :

You May Also Like

6 Comentários

  1. Ali ~6 de julho de 2014 às 04:20

    Oe ! *3*
    Tudo bem, e com você? O modelo ficou lindo demais, acho que irei usar no meu próximo layout =3 Ficou bem diferente e adorei o efeito quando nós passamos o mouse *w* Kissus ~
    s-alad.blogspot.com

    ResponderExcluir
  2. Camila6 de julho de 2014 às 07:07

    oie achei muito fofo o player ah tem mais tutoriais do player billy?? difícil de achar uns tutorial desse player :/ nossa achei o lay muito lindo ^^
    kissus You Like?

    ResponderExcluir
  3. Nana ᄀᄀ6 de julho de 2014 às 09:07

    Oii Gaby-chan!
    O modelo ficou muito fofo, acho que vou usar em um próximo layout do blog. Obrigada pelo tutorial.
    Bjs http://wh-graymoon.blogspot.com.br/

    ResponderExcluir
  4. Ayako Tenshi6 de julho de 2014 às 09:34

    Yo marida! Estou bem, e você?
    Essas perguntas anônimas realmente irritam.
    O player ficou muito fofo, eu vivo vendo em blogs e sempre tive vontade de saber como se fazia, muito útil <3

    ResponderExcluir
  5. Jamilly6 de julho de 2014 às 10:20

    Oiiie Gaby *33* Sim eu dei uma desaparecida mais voltei :3 estava com preguiça de comentar usahuashuash' mais emfim voltei >< Eu tbm sofria com as perguntas Ask tinha cada uma mais faz um tempinho que não entro lá. Estou fazendo um novo layout do meu blog e vou usar esse Music Player e vou creditar claro :3
    foconamisao.blogspot.com.br (não ouse entrar esta em reforma u-u)

    ResponderExcluir
  6. Luciana Felix6 de julho de 2014 às 14:58

    Ohayoo Misaki-sama ;3
    Tão aparecendo um monte de perguntas bestas na minha ask, tenho vontade de mandar a pessoa ir se f***, mas simplesmente excluo ¬.¬.
    Que modelinho kawaii ;3, o tutorial ta bem explicadinho, e o player é rosinha ;3 amo amo amo ♥ xoneii
    Kissus!

    ResponderExcluir

Muito obrigada por seu comentário e por sua presença!
Ambos são super importantes para mim.

Kaomojis:
(*´∀｀*) (*≧∀≦*) (=´∀｀)人(´∀｀=) ( ･ ▽ ･)
ヾ(*^▽^*)o, ｡･ﾟﾟ･(>_<)･ﾟﾟ･｡ (＞ω＜；)＊(´∀`)ﾉﾉ＊
（。ゝω・）～♡ ﾍ(´∀｀ﾍ)ﾍ (╯°□°）╯•ᴥ• (´･ω･`)