Music Player em hover!

Boa noite meus quindins, tudo bem? Como é bom estar aqui novamente, mesmo sabendo que muitos me abandonaram, muitos deixaram de comentar e interagir, mas tudo bem, mesmo acontecendo isso eu voltei e não larguei aqui justamente por aqueles que ainda comentam e seguem o meu trabalho. Sei que também dei motivos para pararem de acompanhar por eu estar muito ausente e por falta de posts, me desculpem por isso queridos leitores. Prometo estar mais presente!

Agora falando sobre os seguidores, falta somente um para atingir minha meta, a próxima será de 300 seguidores, obrigada de coração a todos que me seguem, espero sempre poder estar postando coisas legais para todos vocês!! Bem hoje estou trazendo um tuto bem fácil e muito útil, e além de útil deixa o blog com um ar diferente e mais original afinal quando um tira pra usar um modelo de algo, meio milhão copia atrás! Então ainda conseguem lembrar do tema da Ellie Goulding?

Até hoje foi o tema que menos ficou no blog, apenas 2 semanas, mas não por culpa minha e sim do blogger u.u! Eu amava também o tema dela, mas não estava fechando então saiu este, agora voltando ao player hover, eu peguei ele aqui neste tumblr, então créditos á ele. E se alguém lembra eu tinha o modelo desse player no blog, lá no canto esquerdo é um modelo que fica escondido quando você passa o mouse ele aparece!Então ao tuto?

Entre em layout e vá em editar modelo  html, dentro dê um F3 e procure por ]]/skin, acima dele cole o seguinte código:

#player

{position:fixed;z-index:999;

top:0px;

left:-202px;

height:auto;

padding:4px 8px 3px 2px;

letter-spacing:2px;

background-color: #COR DO FUNDO;

-moz-border-radius:0px 0px 10px 0px;

border-radius:0px 0px 10px 0px;

-webkit-transition: opacity 1s linear;

-webkit-transition: all 1s ease-in-out;

-moz-transition: all 1s ease-in-out;

-o-transition: all 1s ease-in-out;

border-bottom: 1px solid #COR DA BORDA DE BAIXO;

border-right: 1px solid #COR DA BORDA DIREITA;}

 #mus

{float:left;

color: #COR DA LETRA;

padding-left:120px;

-webkit-transition: opacity 1s linear;

-webkit-transition: all 1s ease-in-out;

-moz-transition: all 1s ease-in-out;

-o-transition: all 1s ease-in-out;}

 #player:hover #mus

{padding-left:0px;

opacity:0;}

 #player:hover

{left:0px;

Coloque as cores que você quer onde se pede e onde fica left:-202px; mude até ficar no lugar desejado!

Salve e vá até layout, adicione um html java script e dentro cole este código:

<div id="player">

<div style="float:left;width:150px">CÓDIGO DO PLAYER</div>

<div id="mus">music ~ <img src="http://media.tumblr.com/tumblr_lkl75i7xUz1qfamg6.gif"></div>

</div>

Se quiser trocar a imagem, coloque o link da imagem desejada no lugar de 

http://media.tumblr.com/tumblr_lkl75i7xUz1qfamg6.gif 

Salve, veja se está tudo certo, fica super fofo, você pode escolher uns minis gifs bem fofos.

É isso pessoal espero que tenham gostado do tuto de hoje... ~ Chu