18/10/2012

Ohayou, minna-san! o/ Ogenki desuka? x3


Espero que esteja tudo ótimo, pois hoje irei ensinar a pôr playlist no Tumblr de suas pessoas! ^^

Estou com muito pouco tempo para preparar um bom post para vocês, mas vou deixar aqui um tutorial retirado do site "tumbletricks.com" para vocês! Espero que gostem e prometo que o post de amanhã será feito por mim! T.T'
Enfim, aqui está o tuto:



"Atualmente recebi alguns pedidos para que eu fizesse um tutorial ensinando a personalizar o SCM Music Player.

Portanto neste tutorial ensinarei como fazer isso, porém, para este tutorial é necessário que se tenha umconhecimento, no mínimo, básico de CSS para conseguir personalizar como você quer =)
Antes de usar alguma modificação no seu código, eu recomendo que você guarde uma cópia do código do seu theme no seu computador.

Após isso isso, você deve editar o código CSS abaixo, personalizando as propriedades abaixo (as explicações do que faz cada seletor está ao lado, entre /* e */). Abaixo do código haverá um exemplo de cada imagem a ser usada neste player.
#player,#player a{ color:#5cd700; } /*Cor dos links*/

#player{ background:url(URL_DA_IMAGEM); background-position:bottom; } /
*Imagem do volume*/

#player .mainImage{ background:url(URL_DA_IMAGEM); } /*Imagem de fundo*/

#player #baseLeft{ width:TAMANHOpx; } /
*Tamanho do lado esquerdo*/
#player #baseRight{ width:TAMANHOpx;} /
*Tamanho do lado direito*/
#player .button{ width:TAMANHOpx; } /
*Tamanho dos botões*/
#player #play{ background:url(URL_DA_IMAGEM); } /
*Botão de Play*/
#player #play,#player #pause{ left:26px; }
#player #previous{ left:0px; }
#player #next{ left:52px; }
#player #title{ left:90px; }
#player #tooltip{ right:196px; }
#player #timer{ right:120px; }
#player #list{ right:0px; }

#player #seeker{ right:320px; }
#player #seekerBase{ border-color:#COR; } /
*Cor da área que procura a parte da música*/
#player #seekerBuffered{ background-color:#COR; } /
*Cor da área da música que já carregou*/
#player #seekerSliderBase{ background-color:#COR; } /
*Cor do quadradinho de ir pra parte da música*/

#player #volume{ width:65px; right:39px; }
#player #volumeSlider{ width:8px; background:url(URL_DA_IMAGEM); } /
*Controlador do volume*/

#playlist,#playlist .module,#playlist h3{ border-color:#COR_DA_BORDA; color:#COR_DA_LETRA; } /
*Itens da playlist*/
#playlist h3{ background-color:#COR; } /
*Cabeçalho da playlist*/
#playlist .even{background-color:#COR;} /*Cor de fundo dos itens pares da playlist*/
#playlist .odd{ background-color:#COR;} 
/*Cor de fundo dos itens ímpares da playlist*/
#playlist .focus{ background-color:#COR_DE_FUNDO; color:#COR_DA_LETRA;} /*Cor do ítem em foco na playlist*/

Imagens de exemplo:

Imagem do volume:http://scmplayer.net/skins/tunes/sizerAndVol.png
Imagem de fundo: http://scmplayer.net/skins/tunes/main.png
Botão de play: http://scmplayer.net/skins/tunes/playBtn.png
Controlador do volume:http://scmplayer.net/skins/tunes/sizerAndVol.png

Depois disso, você deve hospedar este arquivo com a extensão “.css” em algum site de hospedagem (recomendo o Webs  e XPG ), e usar o endereço que você hospedou ele quando for configurar o SCM lá no site, veja abaixo onde colar:


O resto é normal, basta escolher sua playlist normalmente como já fazia no SCM mesmo sem ser personalizado com CSS =)

Não se se ficou meio confuso para quem não entende (ou entende pouco) de CSS, mas este foi o modo mais simples que encontrei para explicar. Espero que tenha ajudado =)"

Certo! Está tudo aí para vocês! Qualquer dúvida, comentem! ^^

Beijos, Paulina.

4 comentários:

  1. Adoreii o tutorial no inicio não conseguir colocar no meu blog mais agora você explicou tudo direitinho e eu já conseguir adorei o resultado Beijinhos*_*

    ResponderExcluir
  2. Adorei o tutorial segue meu blog!

    de-sakura-blog.blogspot.com

    ResponderExcluir