7 de dez de 2012

Criando uma Skin para SCM Music Player para Tumblr


Yoo *w*
Eu já ensinei a colocar o SCM Music Player no Blog e até comentei de poder colocar uns personalizados, lembram?
Então, hoje eu vim ensinar vocês a criar um SCM Music Player.
Desde já, agradeço o "Tumblr Brasil" pelo ótimo Tutorial!


Bem, como eu disse no post do SCM Music Player ele é feito para Tumblr's mais pega no Blogger também.
Por isso esse tutorial é mais para as pessoas com Tumblr.

De acordo com o "Tumblr Brasil" é fácil..A base do Skin é o próprio SCM.

#player,#player a{ color:#COR DO TEXTO; }
#player{ background:url(CAIXINHA DE VOLUME); background-position:bottom; background-color: #BACKGROUND DO PLAYER }
#player .mainImage{ background:url(IMAGEM DO PLAYER); }
#player #baseLeft{ width:93px; }
#player #baseRight{ width:145px;}
#player .button{  width:26px; }
#player #play{ background:url(IMAGEM DE PAUSA); }
#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 DA BORDA;  }
#player #seekerBuffered{ background-color:#COR DA BARRA QUE CARREGA A MÚSICA; }
#player #seekerSliderBase{ background-color:#94A9EA; }
#player #volume{ width:65px; right:39px; }
#player #volumeSlider{ width:8px; background:url(CAIXINHA DE VOLUME); }
#playlist,#playlist .module,#playlist h3{ border-color:#333;}
#playlist .module{ color:#COR DO TEXTO DA PLAYLIST; background-color:#BACKGROUND DA PLAYLIST; }
#playlist h3{ background:url(BACKGROUND DA BARRA DE PLAYLIST); color:#COR DO TEXTO DA PLAYLIST; background-color:#BACKGROUND DA PLAYLIST; }
#playlist .even{background-color:#BACKGROUND DA PLAYLIST;}
#playlist .odd{ background-color:#BACKGROUND DA PLAYLIST;}
#playlist .focus{ background-color:#BACKGROUND DA PLAYLIST; color:#COR DO TEXTO DA PLAYLIST;}


Copie e cole o código acima no seu bloco de notas, pegue as bases e modifique, hospede imagens e vá editando o que está em NEGRITO.


-> Caixinha de volume: Base aqui.
-> Imagem do player: Base aqui.
-> Imagem de pausa: Base aqui.
-> Background da barra de playlist: Base aqui.

Depois de ter editado tudo, de já ter terminado, salve como Skin.css e depois hospedo aqui.
Depois que fizer isso entre no SCM  Music Player e abaixo das Skins vai ter um espaço em branco escrito
 "CUSTOM SKIN CSS (Optional) 
If you have got a custom skin, fill in the URL of custom skin CSS (e.g. http://example.com/skin/skin.css).".
Marque a caixa e cole o URL da skin que você hospedou anteriormente.


Depois monte a playlist e coloque no seu Tumblr (ou blog).
Novamente os créditos ao Tumblr Brasil (onde eu peguei as informações e imagens)
É isso, espero que tenham gostado :*

Um comentário: