Image Map

01/11/2012

Tutorial: Playlist para Tumblr!

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! ^^
Certo, ocorreram alguns problemas devido uma queda de energia em Manaus (por causa de um temporal maldito) e eu fiquei sem net... u.u Desculpe por estar postando tarde hoje! T-T'
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 próximo post será feito totalmente 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; } /
#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; } /
#player .mainImage{ background:url(URL_DA_IMAGEM); } /*Imagem de fundo*/#player #baseLeft{ width:TAMANHOpx; } /*Tamanho do lado esquerdo*/
#player #baseRight{ width:TAMANHOpx;} /
#player #baseRight{ width:TAMANHOpx;} /*Tamanho do lado direito*/
#player .button{ width:TAMANHOpx; } /
#player .button{ width:TAMANHOpx; } /*Tamanho dos botões*/
#player #play{ background:url(URL_DA_IMAGEM); } /
#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; } /
#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; } /
#player #seekerBuffered{ background-color:#COR; } /*Cor da área da música que já carregou*/
#player #seekerSliderBase{ background-color:#COR; } /
#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); } /
#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; } /
#playlist,#playlist .module,#playlist h3{ border-color:#COR_DA_BORDA; color:#COR_DA_LETRA; } /*Itens da playlist*/
#playlist h3{ background-color:#COR; } /
#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;} 
#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*/
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! ^^ (Espero que gostem! T-T)


Beijos, Paulina.

36 comentários:

  1. adorei esse tutorial :O
    me inspira a ter um tumblr ahuashuashus
    Beiijos \õ

    s2vivih.blogspot.com

    ResponderExcluir
  2. ótimo tutorial pra quem tem tumblr.. eu tenho mas nunca uso desde muuuito tempo kkkkk
    bjs
    http://martinanasviagens.blogspot.com

    ResponderExcluir
  3. Tumblr <3
    Já tentei colocar a playlist maldita,mas nem quero mais por ><

    ResponderExcluir
  4. O único problema é que eu, infelizmente, não tenho tumblr =/ Mas, mesmo assim o tutorial faz bastante sucesso, porque a maioria das blogueiras tem tumblr, amei de qualquer jeito o tuto *-*

    Sweet Teen

    ResponderExcluir
  5. LOL' Lê mentes? Estava precisando desse tutorial! Vou botar no meu tumblr quando tiver tempo. =X

    ResponderExcluir
  6. Adoro tumblr, um menina aí que criou para mim, mais nem uso mais, haha'
    Gosto de ler algumas coisas, são realmente inspiradoras, e fala sério, o que é mais inspirador que: músicas legais na playlist + textos divos + imagens divas?
    Aaah, amei esse tuto, deixa o tumblr mais completo, acho eu, haha'
    Awwn, gosti, Paulina, hhaha'
    Beijoos <3

    summer-bomb.blogspot.com

    ResponderExcluir
  7. Adorei o tutorial e como a Tamara Teixeira eu tbm não tenho tumblr, mas pode ter certeza que o tuto será útil para muita gente!

    naidadeteen.blogspot.com.br

    ResponderExcluir
    Respostas
    1. Aaah, que pena, mas que bom que acha isso :3

      Excluir
  8. Amei o tutorial, só não colo no meu porque sou traumatizada com playlist uma vez fui colocar no meu tumblr ai sei lá o que aconteceu e o theme ficou todo desconfigurado...
    beijos

    ResponderExcluir
  9. Que legal esse tutorial.
    Eu colocaria no meu Tumblr, seu eu não tivesse feito o favor de excluir ele kkkkkk,

    Beijos,
    modicesdemenina.blogspot.com

    ResponderExcluir
  10. É legal o tutorial, pena que não tenho tumblr kkk
    NaFlordaiidade (.blogspot.com) é sem o parênteses Amore *3*

    ResponderExcluir
  11. adorei o tutorial , mas n tenho tumblr :(
    bjks

    ResponderExcluir
  12. Ameii a tuto, super útil, tenho um tumblr e vou colocar agora ;D

    Cliques no Capricho xoxo!

    ResponderExcluir
  13. Eu adorei o tuto eu estava procurando um dia pra colocar no meu tumblr ♥
    bjinhos
    conversando-com-a-lua.blogspot.com.br

    ResponderExcluir
  14. Como não tenho tumblr, esse tutorial não foi útil pra mim. ♥

    - xoxo -

    ResponderExcluir
  15. Eu acho legal mas não colocaria no meu tumblr, sei la.
    - Cherr em Crise

    ResponderExcluir
  16. Adorei o tuto,nem uso mais meu tumblr e tinha até esquecido que eu tinha um :p

    Beijos
    Amora Ruffles

    ResponderExcluir
  17. gostei do tutorial
    pena q nao tenho mais tumblr

    ResponderExcluir
  18. Adorei o tutorial, sei que vai ajudar muitas pessoas! Eu não coloco musica no meu tumblr pq acho que atrapalha a leitura, sei lá. Pelo menos eu, odeio quando entro num tumblr, quero ler um post e tem uma musica tocando e me atrapalhando a ler D: Eu sei, devo ser a unica pessoa que pensa assim D:

    http://rascunhosdasuuka.com/

    ResponderExcluir
    Respostas
    1. Bom quegostou, Suuka! Aaah, eu odeio também! Mas esse (eu acho) que dá pra colocar sem sem automático ^^

      Excluir
    2. Oiii! ^^ Esse não dá, mas o outro negócio de playlit, pode programar para só tocar a música quando a pessoa que estiver lendo apertar play! ^^

      Tipo o meu tumblr: http://sebby-wa-ciel-yori-kawaii-desuka.tumblr.com/ - :D

      Se quiser, eu passo! o/

      Excluir