03/05/2014

Player escondido no blog


Olá doçuras, após vários dias postando tutoriais mais antigos e simples trago algo um pouco mais aprimorado, irei mostrar como colocar um  player escondido no blog. Para quem nunca viu ou não esta entendendo do que estou falando, irei mostrar como colocar um player como esse aqui: Preview fica apenas uma abinha para a pessoa passar o mouse e ele descer, acho bem legal! Porém aconselho sempre; nunca coloque o player para tocar automaticamente...isso assusta, se a pessoa tiver interessada ira clicar e melhor do que clicando para desligar irritado ou fechar a pagina. Infelizmente não me lembro de onde aprendi peguei os códigos de dentro do meu template Pages, se alguém souber por favor me informem para creditar. Mas agora vamos ao tutorial!

1. Vá ate seu HTML e procure por ]]></b:skin>,assim que achar cima dele cole:

Códigos
#musicplayer {text-align: center;font-size: 11px;position:fixed;left:20px;top:-43px;-webkit-transition: all .5s ease-in-out;-moz-transition: all .5s ease-in-out;-o-transition: all .5s ease-in-out;z-index:999;}
#musicplayer:hover {top:-10px;}
#music {padding: 20px 0 5px 0;background: #fff;width:230px;border-bottom-right-radius: 5px;-moz-border-radius-bottomright: 5px;-webkit-border-bottom-right-radius: 5px;z-index: 9999;}
#musictab {font-family:century gothic;text-shadow: 0 1px 0 #FFFFFF;height:30px;padding: 0 0 8px 0;background:#fff;border-bottom-left-radius: 5px;-moz-border-radius-bottomleft: 5px;-webkit-border-bottom-left-radius: 5px;border-bottom-right-radius: 5px;-moz-border-radius-bottomright: 5px;-webkit-border-bottom-right-radius: 5px;width: 50px;}


2.Salve! E vá ate a pagina chamada Layout, lá abra um novo gadget de java/script e dentro cole:

Códigos
<div id="musicplayer">
<div id="music"> <center>SEU PLAYER</center> </div>
<div id="musictab"> <br><img src="http://media.tumblr.com/tumblr_lm6prnRzP61qfoi4t.gif"></div>
</div>

A onde esta escrito SEU PLAYER em negrito é onde coloca o código de seu player, aconselho usar o Billy que é menorzinho. Agora é só personalizar como desejar e deixa-lo bem bonito. rs E só isso por hoje amores, espero que tenham gostado ate mais tarde e beijinhos.

32 comentários:

  1. Muito bom o tutorial! =)
    Estou conhecendo seu blog agora e já segui. Seu blog é muito cute, adorei! ;3
    Queria que seguisse e visitasse meu blog. link: tudomonster-lulis.blogspot.com.br
    bjs

    ResponderExcluir
  2. Primeira a comentar u.u ~acho~ Amei o tutorial, super fofo, vou usar no meu próximo layout *-*

    ResponderExcluir
  3. Eu bem que estava procurando esse tutorial >.<
    Obrigado por postar
    http://demonicrabbit.blogspot.com.br/

    ResponderExcluir
  4. Fica realmente bem bonito e dá um toque a mais no blog. Eu sempre levo um susto e fico bem irritada quando o player começa a tocar sozinho. Eu já tinha visto o player assim em vários blogs, mas nunca vi nenhum tutorial...
    Hey, honey, você aceita afiliação?
    Bjoss

    LS || blog-littlesecrets.blogspot.com.br

    ResponderExcluir
  5. Anônimo3/5/14

    Aii nossa que legal esse tutorial, quando vi o layout free fiquei pesquisando sobre o tutorial mas não achei nada, Sorte você ter postado!

    ResponderExcluir
  6. Esse player é muito bonito (eu acho)
    Já vi em vários blogs,gostei muito do tutorial,muito legal!

    Sarang Cute!

    ResponderExcluir
  7. Bonito,bem simples,realmente irrita quando a gente entra em um blog e do nada toca música,eu pulo da cadeira toda vez que acontece isso kk.Beiijos.

    ResponderExcluir
  8. Realmente,às vezes entro em alguns blogs e começa a música do nada...chega travar rsrsrsr'
    sonho-carolina.blogspot.com.br

    ResponderExcluir
  9. Gostei do tutorial, irei usar player no meu blog em breve e seu tutorial vai ser de grande ajuda!

    http://amaicandykawaii.blogspot.com.br/

    ResponderExcluir
  10. Eu sempre quis saber como que colocava esse player, eu sei como se coloca o que aparece mas como ele fica escondido não. Talvez eu use esse tutorial, já favoritei ~ aceita afiliação?

    ♥ Abraços |  www.h-oneypie.com

    ResponderExcluir
  11. Anônimo4/5/14

    Eu SEMPRE fico irritada quando o player toca automaticamente, principalmente quando meu irmão está por perto, ai tem vezes que eu acordo ele T-T
    Sempre quis saber como fazia este tutorial *u* Vou tentar fuçar neste código ai e tentar conseguir colocar outro tipo de coisa além de um music player, quero ver eu consegui e.e

    Bjoom || Scarlet Rain ♥

    ResponderExcluir
  12. Amei esse player,fica tao legal no blog =)

    - Republic City || republic-city.blogspot.com.br

    ResponderExcluir
  13. Wendy, achei tão fofo e prático esse player! Mas não consegui colocar :( acabei usando o SCM player

    ResponderExcluir
  14. Ah minha nossa adorei saber... eu realmente acho muito melhor e discreto assim... ^^

    ResponderExcluir
  15. Amei o tuto, precisava muito ♥

    ResponderExcluir
  16. Faz muito tempo que estou procurando este tutorial, finalmente achei, que felicidade. *w*
    Muito bom, ajudou muito. ^u^

    Chu ~ | | http://rainbowskyoficial.blogspot.com.br

    ResponderExcluir
  17. Este comentário foi removido pelo autor.

    ResponderExcluir
    Respostas
    1. Tutoria: www.bunnycrazy.net/2013/03/tutorial-player-no-blog.html

      Excluir
  18. Acho muito legal o player no blog >3< Concordo com você, as vezes entro num blog e me assusto porque começa a tocar uma música do nada, a única reação que tenho é fechar a guia ! Gostei bastante do tutorial :3

    ~kiss
    CS ♥

    ResponderExcluir
  19. Ótimo tutorial, o player escondido fica muito amorzinho, já deixei salvado aqui p proximo layout ^3^ xoxo, luce ◑△◐
    ignore-d.blogspot.com

    ResponderExcluir
  20. Sempre procurei esse tutorial e agora achei, muito bom e bem explicadinho >3<

    aceita afiliação?
    The Misty Dawn :*:・゚

    ResponderExcluir
  21. Realmente o player é muito lindo *OO* Eu já tinha notado ele no seu blog ^ ^ Vou até favoritar aqui para depois eu usar em algum layout *3*

    Concordo com você! As vezes eu me assusto quando entro em um blog e do nada vem aquela música alta, é slá -w- É o bom dele é por que você que escolhe quando a música vai tocar :33

    Querendo Voar *u* || Querendo Voar ~ (Queremos a sua visita! Beijos <3 )

    ResponderExcluir
  22. Gostei do tutorial.

    Sigo seu blog a algum tempinho e gostaria de saber se você pode me colocar como afiliado..

    Link do blog: www.h-cake.blogspot.com.br

    Siga o meu também por favor!

    ResponderExcluir
  23. Amei o tuto, sempre me perguntava como fazer esse player e até que em fim alguém fez tutorial dele <3
    Chuu ~ blueberrycorderosa.blogspot.com

    ResponderExcluir
  24. Anônimo10/5/14

    Adorei o tutorial!!!Bem curioso!
    www.swe-etspace.blogspot.com.br

    ResponderExcluir
  25. Adorei o tutorial, mesmo já tendo visto em outro blog, rs ^^

    Beijos, c-olorfulroses.blogspot.com

    ResponderExcluir
  26. No meu blog apareceu tudo certinho, mas não toca a música '-'

    ResponderExcluir
    Respostas
    1. Voce precisa hospedr a musica e colocar no player

      Excluir
  27. Anônimo10/7/15

    Já fiz de tudo, mas ele não aparece :( segui tudo sozinho, ooooh Deus pq eu? (momento drama)

    ResponderExcluir
  28. Deixa o link do seu blog para que eu possa analisar

    ResponderExcluir
  29. Ah, você salvou minha vida ♥
    Estava procurando por essa coisa há dias kajdhkd moça, creio que você cometeu um errinho.. O código no html deve ser colado acima de ]]>, não? Fora isso o tutorial está ótimo!

    Kissus de menta ♥ ~ alcoolize.blogspot.com.br

    ResponderExcluir
    Respostas
    1. Sim é verdade, deve ter sido um momento de distração. rs Obrigada.

      Excluir

Bem Vindos
Hi! Meu nome é Andréa Alark, mas conhecida como Wendy dona do blog Bunny Crazy. O blog foi criado em 2010 na intenção de ajudar a criação e desenvolvimento do seu blog. Aqui encontrará tutoriais e dicas de HTML, layouts gratuitos e muito mais.
Friends
Bunny Crazy by Wendy ❀
Bunny Crazy ★
Bunny Crazy ★
12345