14 de setembro de 2013

36

Player de Web Radio fixo no topo do Blog



Olá pessoal! Neste tutorial irei ensinar como colocar o player de web rádio fixo no topo do Blog, simples e prático.


Creio que você já deve ter visto em alguns Blogs ou sites um player fixo posicionado no topo, conforme você rola a barra de rolagem para cima ou para baixo, o player desliza acompanhado a página sem sair de sua posição, então, é deste mesmo modo que vamos aprender a fazer.
> Veja uma Demonstração

Veja como colocar o player no topo do blog

1º Passo: Abra o Painel de Edição do seu Blog:
Vá em >> Modelo >> Editar HTML
 

2º Passo: Agora você vai expandir a seguinte linha de código "<b:skin>...</b:skin>" conforme mostra o exemplo na imagem logo abaixo:

3º Passo: Em seguida, procure por esta Tag: "]]></b:skin>", utilize as teclas de atalho (Ctrl+F) para localizar mais rápido. E após ter encontrado a Tag, logo acima dela acrescente este seguinte código CSS:

/*Player de Radio*/
ul#Player-fixed {
position:fixed; width:100%;
margin:0;
padding:0;
top:0px;
left:0px;;
list-style:none;
z-index:9999;
}


4º Passo: Depois do CSS, vamos agora, colocar o código Iframe do player.
Ainda no HTML do seu blog, procure por esta segunda Tag "</body>", quando encontrá-la acrescente este código logo acima da mesma:

<ul id='Player-fixed'>
<iframe src=" http://link do Player da radio" frameborder="0" scrolling="no" width="100%" height="40"></iframe> </ul>


Agora você vai editar esse segundo código
Vamos entender:
  • A parte que esta destacado em cor AZUL você vai substituí-lo pelo endereço do player da sua web rádio, somente isso.
  • Agora, a parte que eu destaquei em cor Vermelho, se trata do código "Iframe" que todo player tem, que em nosso caso não será preciso alterá-lo.
  • Se for preciso alterar a Altura do player, é só você alterar o valor da seguinte parte: " height="40"".
  • Em relação a Largura do player, o código está configurado para o player ficar ajustável a qual quer tipo de resolução de Tela, ou seja, ele ficará com a largura 100%.


 5º Passo: Agora é só você clicar em visualizar Modelo para conferir se tudo ocorreu bem, e depois,  só salvar modelo.
 
Prontinho pessoal, espero ter ajudado.
Queria pedir que ajudasse nosso Blog, clicando no botão curtir no facebook ou Seguir o blog. obrigado

36 comentários:

  1. Estou sempre conferindo teu Blog, e ai esta mais um tutorial Bem Legal para os novatos :-)

    ResponderExcluir
  2. cara não consigo colocar o player no meu blog o que faço

    ResponderExcluir
    Respostas
    1. Olá Fagner!
      É bastante fácil, basta você localizar a Tag "...body..." que ta sendo mostrada no tutorial, em seguida, acrescentar o código logo acima da Tag e depois editá-lo. Para finalizar clique em visualizar, se estiver tudo certo só salvar modelo.
      Obrigado

      Excluir
  3. Aqui funcionou já, mas tive de tirar.

    Falta-me links dos radios.

    ResponderExcluir
    Respostas
    1. http://streaming13.hstbr.net/player/festasebaladas pode colocar

      Excluir
  4. cara muito obrigado vinha procurando esse tuto a muito tempo, ñ sou de ficar comentando e quando eu comento é pq o negocio é bom msm, muito bom cara parabéns, funciona direitinho e muito simples de fazer... vlw um abraço

    ResponderExcluir
    Respostas
    1. Obrigado! Fico grato pela sua participação.

      Excluir
  5. Num está dando certo não, fik aparecendo somente uma carinha triste...
    O q eu faço??

    ResponderExcluir
    Respostas
    1. Acho que você errou na hora de editar o o Iframe (segundo código), tem que colocar o Link do player.
      Tenta fazer novamente, se conseguiu ou não deixa comentário. Obrigado!

      Excluir
    2. O meu está acontecendo a mesma coisa, só essa cara de triste. coloquei dessa forma:
      "http://50.22.217.113:35467/"

      O Que há de errado?

      Excluir
    3. Olá Lucas Ferreira!
      Observe bem, este link "http://50.22.217.113:35467/" ele é para acessar o painel ShoutCast da radio, e não representa o player, sendo assim, você tem que ter um player de radio hospedado para poder ter um link e colocá-lo no codigo.
      você precisa fazer um player de radio e hospedá-lo na internet ou então procurar um player editavel para por o código.

      Excluir
  6. Muito Obrigado ja coloquei o player e mais o torpedao kkkk show de bola e seu baner ja esta no meu blogger blz eu vou so terminar e passarei o linque abraços.

    ResponderExcluir
  7. Como faço para por na parte de Debaixo do blog?

    ResponderExcluir
    Respostas
    1. Olá Allexandre!
      Para colocar o player fixo na parte de baixo é fácil, basta você substituir a palavra "Top" no primeiro código CSS por esta palavra "bottom", em seguida visualize e depois Salve. O player aparecerá na parte de baixo do Blog. Obrigado!

      Excluir
  8. Respostas
    1. Olá!
      Se o player não apareceu no blog, acho que você não editor corretamente...
      Lembrando que no "4º Passo " do tutorial, você tem que EDITAR o Iframe do Player colocando o "Link" do player já hospedado.
      qualquer coisa deixa comentário. obrigado!!!!

      Excluir
  9. Kelven quero por esse player no Wordpress como faço? eu já tenho os códigos só não sei onde inserir.! :/

    ResponderExcluir
    Respostas
    1. Olá Israel!
      Editei este código, porém, ainda não utilizei na plataforma Wordpress, por isto não sei se funciona mas creio que deve servir. Então, se você de alguma forma conseguir colocar o codigo pra funcionar, e poder repassar isso pra mim ficarei no aguardo.
      Obrigado

      Excluir
  10. amigo obrigado pela dica me ajudo muito mas o meu não ficou na parte do topo como faço ?

    ResponderExcluir
  11. Boa noite, utilizo esse esquema do player no meu blog, mas tenho uma duvida quando clico para ver as postagens mais antigas (ir para a outra pagina) o player para e começa de novo...teria como resolver isso...tipo nao atualizar o player ?

    ResponderExcluir
  12. AI ADM COMO EU COLOCA NUMEROS NA PAGINA DO BLOG FIXA, POR QUE TIPO QUANDO EU CLICO EM COMEDIA SOME OS NUMEROS E APARECE NOME COM (PROXIMO E ANTERIOR) COMO EU FAÇO PARA DEIXAR O BOTÃO FIXO DIRETO, ESPERANDO RESPOSTA ?

    ResponderExcluir
  13. Kelven pedro boa noite, gosto muito de está aqui sempre coisas novas, bem meu objetivo agora sou radioamador e tenho um radio vhf e gostaria de colocar o audio que sai no auto falante do radio para o blog teria jeito? meu email deosilva1@yahoo.com.br

    ResponderExcluir
  14. nao estava consegindo coloquei abaixo do tag body e deu certo .

    ResponderExcluir
  15. Fiz o passo a passo mas parece que faltam alguns passos... Explo... foto ou melhor explicação de onde colar ou ESCREVE CSS: ? onde,,, ou só cola o código acima da linha ]]> ? Pois quando copia tudo em vermelho no 3º passo. pelo menos na visualização aparece lá em cima da page o que foi colocado...
    seguindo os passos como estão, fazendo exatamente o que manda e localizando tudo no Ctrl+F, a pege blog aparece normal, sem qualquer erro o player,, Qual será o problema ?
    outra, o link Rádio substituido, deve ter streaming ou strean no final do endereço, ou pode ser o link html da page radio player ? orbigado e continuamos tentando.. Em caso de sucesso relato aqui. abçs

    ResponderExcluir
  16. Link já coloquei de onde o Play esta hospedado e ele aparece noramal no topo do site ate ai tranquilo.
    Mas não achei como add o IP e porta para tocar a programação de minha radio.

    Onde no codigo add meu ip e porta ?

    ResponderExcluir
  17. Galera blz?
    No nosso blog funciona bem, porém toda vez que mudamos a página o player para e começa a tocar de novo. Gostaria de saber se tem como manter o player funcionando fixamente.
    Obrigado.

    ResponderExcluir
  18. nao consegui fazer nada , será o meu templete q nao da certo?

    ResponderExcluir
  19. Muito bem explicado parabéns pelo post! visite: http://www.alternativarj.com

    ResponderExcluir
  20. Valeu cara, deu certo pra mim!!!

    ResponderExcluir
  21. queria pedir uma ajuda - qual o codigo que faz o player ficar parado no topo e nao mover com a pagina? Parabens pelas dicas!!!

    ResponderExcluir
  22. Muito obrigado pelas informações me ajudou muito.

    Nota 10.

    Que Deus sempre o abençoe.

    ResponderExcluir
  23. Parabéns nota 1.000!
    http://www.radioweb7.com.br

    ResponderExcluir
  24. Você é 10! Explicação simples e objetiva.
    Obrigado!!!

    ResponderExcluir

Observe:
Faça seu comentário dentro do assunto tratado na postagem.
Não pode divulgar endereço de Sites ou Blog.
Comentário que conterem divulgação serão moderados, somente serão aceitos links caso necessite de informar alguma fonte.


Copyright © - Todos os Direitos Reservados: Várias Dicas para Blogs |
Design by Kelven Pedro | Tecnologia do Blogger - É Proibido a copia do conteúdo deste blog sem autorização
    Twitter Facebook