Tutorial | Player na imagen do post

   Konnichiwa! (Boa tarde!), ninguém me pediu, mas eu vou vos deixar um tutorial de como colocarem um mini player nas imagens dos posts, como mostra o exemplo em cima ^^
   Este tutorial é a minha conclusão no final de ter andado a pesquisar como é que se fazia. Sabem é que eu ontem andei em vários sites a ver, e a minha conclusão foi: - o quê? não dá!
como é que é? mas isto é igual ao anterior?, ou seja todos os sites independente se funciona ou não, fazem apenas "copie e paste", não estou a culpar todos, claro, mas muitos sim, mesmo que coloquem os créditos é chato andar de blog em blog e ver o mesmo, pelo menos poderiam experimentar para ver se funciona, ou colocarem uma explicação feita por vocês né!, por isso é que decidi vir e explicar como fazer, mas pelas minhas palavras e pela minha conclusão. Mas antes de começares a colocar o tutorial eu recomendo que primeiro termines o post todo para depois não te enganares e não fazeres asneira.(o_O)

   Então 1º para fazer a mini playlist eu fui a um site mesmo em fez de andar a copiar código ao calhas, este (www).

   Quando entrares vais ver umas barrinhas, como na imagem em cima, e é aí que vais colocar o link da música em .mp3 (na barra maior), e o texto que vai aparecer (na barra menor), normalmente colocam o titulo da música, mas tu é que sabes.

   2º para os que não sabem como achar lik's com a terminação .mp3, podem fazer como eu, que coloco no google "download (o nome da música) 4shared", e escolho um link. Depois, já no 4shared clico no botão direito do rato e vou em "ver fonte da página" como mostra a imagem em cima.

   Quando o fizeres vai te abrir uma página nova com vários códigos. Aí só tens de apertar ctrl+f e procurar por "!-- file:", quando o fizeres vai te aparecer algo como mostra a imagem a cima, então copias deste "http até .mp3" isso é o link da música que colocas na barra maior no site.

   Isto foi o que eu fiz, recomendo apagares o texto que já lá estava nas barras que não vais usar senão dá asneira. Também te recomendo a tirares a opção Auto Play senão começa a tocar automático e é chato se tiveres mais do que um player no blog. 

   3º Depois clicas em Generate Code, quando o fizeres vai te aparecer uma janela com o código, aí só tens de copiá-lo e ir ao post à opção HTML e colocá-lo logo a seguir à tua imagem que provavelmente termina assim "/></a></div>". 

   4º Para finalizar só tens de colocar o código que está em baixo no HTML do post:

<div style="left: 3px; margin-top: -25px; position: absolute;"> o código anterior </div>

   Como mostra a imagem em cima, o que começa em <embed e termina em </embed> é o que fica no meio, é o código anterior.

   Este serve para alinhares o teu player na imagem explicação: onde tem 3px serve para colocares mais para a direita ou mais para a esquerda, sendo que quanto maior o número mais para a direita ele fica. O -25px serve para colocares mais para cima ou para baixo e quanto maior o número mais para cima ele fica.

   Bem é isso espero que gostes, e que eu não tenha sido muito confusa na explicação, qualquer duvida é só comentares ^^ só mais uma coisa não fale a pena estares a tentar ver na opção pré-visualizar, a player só aparece quando o post está publicado. Então Sayonara (até logo), porque ainda volto hoje.