Colocando Rádio com Playlist no Blog

Um site que oferece rádio on-line onde você pode fazer upload (enviar) as músicas prediletas do do computador e fazer uma playlist é o Deezer. Por ser um site amplamente utilizado nas redondezas americanas, possui apenas músicas estrangeiras, mas é permitido fazer upload de músicas prediletas e criar uma playlist personalizada.

Vou ensinar neste tutorial a criar uma playlist que chamaremos de "Rádio" (termo popular) e incluiremos no blog para que o internauta ouça músicas relacionadas no seu blog.

>>> Cadastrando-se no Deezer

1 - Acesse o Deezer clicando aqui

2 - Ao lado da barra de busca, clique em "Inscreva-se gratuitamente".

3 - Preencha todos os dados do formulário para se cadastrar.

4 - Após cadastrado, clique na aba "Música". Se não estiver logado, clique em "Entrar" e faça o seu login de acesso.

>>> Hospedando suas músicas

5 - Dentro da aba "Música", clique em "Meus MP3".

6 - Clique em "Adicionar meus MP3". (só é aceito no formato mp3).

7 - Clique em "Percorrer" e procure a música que deseja fazer upload. Faça quantos uploads desejar.

(Dica: selecione várias músicas de uma vez, pressionando as teclas CTRL e A ou mantendo pressionado a tecla CTRL e clicando nas músicas desejadas com o mouse).

>>>Criando uma playlist

8 - Depois de hospedar as músicas desejadas, vamos criar uma playlist (Lista de reprodução).

9 - No menu no canto esquerdo da página, abaixo do botão "PlayList", clique em "Criar um Playlist". Coloque o nome, estilo musical e uma breve descrição da playlist.

10 - Ainda no menu esquerdo, clique em "Meus MP3".

11 - Selecione todas as músicas que deseja adicionar à playlist no canto direito da página e clique em Add to Playlist, selecionando em seguida a lista de reprodução que você criou.

>>> Colocando a rádio playlist no seu blog

12 - No menu "Playlists", clique na playlist desejada e após isso, clique em SHARE.

Será mostrada uma janela contendo as configurações do seu player. Existe cinco opções pré-definidas de cores que podem combinar com o seu blog.

Leitor automático - executa a música assim que o usuário acessa o seu blog/site.

Leitor aleatório - executa as faixas aleatoriamente.

13 - Depois de configurado, clique em COPIAR ESTE, para copiar o código que será colocado no seu blog.

No blogger, crie uma nova widget do tipo HTML e cole o código copiado. Salve e dimensione a widget onde desejar.

>>> Melhorando o player

1 - Aumentar ou diminuir a largura do player.
Dentro do código que você copiou deverá ter os seguintes parâmetros. WIDTH e HEIGHT. O parâmetro WIDTH define a largura e o HEIGTH define a altura. Se a coluna onde você colocou a rádio tiver por exemplo 200 pixels de largura, logo você deverá definir no player da rádio 200 pixels para WIDTH, ficando assim: "..WIDTH: 200PX...."

É aconselhável não mexer no HEIGHT, pois pode desformatar o player.

Mas cuidado! Perceba que existem três parâmetros WIDTH dentro do código. Mude os três da mesma forma (Se colocou 200 para um, coloque 200 para todos).

Exemplo de código:

<div style="width:200px;height:236px;"><object width="180" height="236"><param name="movie" value="http://www.deezer.com/embedded/widget.swf?path=9494092&lang=EN&colorBack=0x525252&colorVolume=0x00CCFF&colorScrollbar=0x666666&colorText=0xFFFFFF&autoplay=1&autoShuffle=0&id=1689361"></param><embed src="http://www.deezer.com/embedded/widget.swf?path=9494092&lang=EN&colorBack=0x525252&colorVolume=0x00CCFF&colorScrollbar=0x666666&colorText=0xFFFFFF&autoplay=1&autoShuffle=0&id=1689361" type="application/x-shockwave-flash" width="200" height="236"></embed></object><br><font size='1' color ='#000000' face='Arial'>Discover <a href='http://www.deezer.com/en/1472982-03-ele-vive-0-leonardo-goncalves-0-1689361-py7vzhfo-mp3-0-1-0-0-0.html'>1472982,03 Ele Vive,0,Leonardo Gonçalves,0,,1689361_PY7VZhFo.mp3,0,1,0,0,0</a>!</font></div>

2 - Abrir player em janela popup (Funciona apenas no Firefox).
Copie e cole o código abaixo ao invez do código adquirido no site Deezer.

<a href="javascript:void(tmp=open('ENDEREÇO DO PLAYER DEEZER', 'dezzer', 'toolbar=no, scrollbars=no, resizable=no, menubar=no, status=no, directories=no, location=no, width=180, height=220'))" target="_self" title="Rádio Play Góspel"><img border="0" heigth="60" width="180" src="ENDEREÇO DA SUA IMAGEM"/></a>
Substitua o que está destacado em vermelho conforme segue:
Endereço do player deezer - É o caminho que existe dentro do código adquirido no site (Etapa 12). Esse código é encontrado conforme no exemplo abaixo:

<div style="width:200px;height:236px;"><object width="180" height="236"><param name="movie" value="http://www.deezer.com/embedded/widget.swf?path=9494092&lang=EN&colorBack=0x525252&colorVolume=0x00CCFF&colorScrollbar=0x666666&colorText=0xFFFFFF&autoplay=1&autoShuffle=0&id=1689361"></param><embed src="http://www.deezer.com/embedded/widget.swf?path=9494092&lang=EN&colorBack=0x525252&colorVolume=0x00CCFF&colorScrollbar=0x666666&colorText=0xFFFFFF&autoplay=1&autoShuffle=0&id=1689361" type="application/x-shockwa.......>

Endereço de sua imagem - Execute o endereço de sua imagem hospedada na internet