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!
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;}
#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;}
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>
<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.
Muito bom o tutorial! =)
ResponderExcluirEstou 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
Primeira a comentar u.u ~acho~ Amei o tutorial, super fofo, vou usar no meu próximo layout *-*
ResponderExcluirEu bem que estava procurando esse tutorial >.<
ResponderExcluirObrigado por postar
http://demonicrabbit.blogspot.com.br/
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...
ResponderExcluirHey, honey, você aceita afiliação?
Bjoss
LS || blog-littlesecrets.blogspot.com.br
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!
ResponderExcluirEsse player é muito bonito (eu acho)
ResponderExcluirJá vi em vários blogs,gostei muito do tutorial,muito legal!
Sarang Cute!
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.
ResponderExcluirRealmente,às vezes entro em alguns blogs e começa a música do nada...chega travar rsrsrsr'
ResponderExcluirsonho-carolina.blogspot.com.br
Gostei do tutorial, irei usar player no meu blog em breve e seu tutorial vai ser de grande ajuda!
ResponderExcluirhttp://amaicandykawaii.blogspot.com.br/
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?
ResponderExcluir♥ Abraços | www.h-oneypie.com
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
ResponderExcluirSempre 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 ♥
Amei esse player,fica tao legal no blog =)
ResponderExcluir- Republic City || republic-city.blogspot.com.br
Wendy, achei tão fofo e prático esse player! Mas não consegui colocar :( acabei usando o SCM player
ResponderExcluirAh minha nossa adorei saber... eu realmente acho muito melhor e discreto assim... ^^
ResponderExcluirAmei o tuto, precisava muito ♥
ResponderExcluirFaz muito tempo que estou procurando este tutorial, finalmente achei, que felicidade. *w*
ResponderExcluirMuito bom, ajudou muito. ^u^
Chu ~ | | http://rainbowskyoficial.blogspot.com.br
Este comentário foi removido pelo autor.
ResponderExcluirTutoria: www.bunnycrazy.net/2013/03/tutorial-player-no-blog.html
ExcluirAcho 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
ResponderExcluir~kiss
CS ♥
Ótimo tutorial, o player escondido fica muito amorzinho, já deixei salvado aqui p proximo layout ^3^ xoxo, luce ◑△◐
ResponderExcluirignore-d.blogspot.com
Sempre procurei esse tutorial e agora achei, muito bom e bem explicadinho >3<
ResponderExcluiraceita afiliação?
The Misty Dawn :*:・゚
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*
ResponderExcluirConcordo 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 )
Gostei do tutorial.
ResponderExcluirSigo 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!
Amei o tuto, sempre me perguntava como fazer esse player e até que em fim alguém fez tutorial dele <3
ResponderExcluirChuu ~ blueberrycorderosa.blogspot.com
Adorei o tutorial!!!Bem curioso!
ResponderExcluirwww.swe-etspace.blogspot.com.br
Adorei o tutorial, mesmo já tendo visto em outro blog, rs ^^
ResponderExcluirBeijos, c-olorfulroses.blogspot.com
No meu blog apareceu tudo certinho, mas não toca a música '-'
ResponderExcluirVoce precisa hospedr a musica e colocar no player
ExcluirJá fiz de tudo, mas ele não aparece :( segui tudo sozinho, ooooh Deus pq eu? (momento drama)
ResponderExcluirDeixa o link do seu blog para que eu possa analisar
ResponderExcluirAh, você salvou minha vida ♥
ResponderExcluirEstava 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
Sim é verdade, deve ter sido um momento de distração. rs Obrigada.
Excluir