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
Estou sempre conferindo teu Blog, e ai esta mais um tutorial Bem Legal para os novatos :-)
ResponderExcluircara não consigo colocar o player no meu blog o que faço
ResponderExcluirOlá Fagner!
ExcluirÉ 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
Aqui funcionou já, mas tive de tirar.
ResponderExcluirFalta-me links dos radios.
http://streaming13.hstbr.net/player/festasebaladas pode colocar
Excluircara 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
ResponderExcluirObrigado! Fico grato pela sua participação.
ExcluirParabéns
ResponderExcluirvlw :)
ResponderExcluirNum está dando certo não, fik aparecendo somente uma carinha triste...
ResponderExcluirO q eu faço??
Acho que você errou na hora de editar o o Iframe (segundo código), tem que colocar o Link do player.
ExcluirTenta fazer novamente, se conseguiu ou não deixa comentário. Obrigado!
O meu está acontecendo a mesma coisa, só essa cara de triste. coloquei dessa forma:
Excluir"http://50.22.217.113:35467/"
O Que há de errado?
Olá Lucas Ferreira!
ExcluirObserve 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.
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.
ResponderExcluirOlá Allexandre!
ResponderExcluirPara 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!
como deixar nao fixo ??
ResponderExcluirOlá, no meu bloguer não aparece ...
ResponderExcluirOlá!
ExcluirSe 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!!!!
Olá Israel!
ResponderExcluirEditei 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
amigo obrigado pela dica me ajudo muito mas o meu não ficou na parte do topo como faço ?
ResponderExcluirBoa 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 ?
ResponderExcluirAI 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 ?
ResponderExcluirKelven 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
ResponderExcluirnao estava consegindo coloquei abaixo do tag body e deu certo .
ResponderExcluirFiz 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...
ResponderExcluirseguindo 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
Link já coloquei de onde o Play esta hospedado e ele aparece noramal no topo do site ate ai tranquilo.
ResponderExcluirMas 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 ?
Galera blz?
ResponderExcluirNo 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.
nao consegui fazer nada , será o meu templete q nao da certo?
ResponderExcluirMuito bem explicado parabéns pelo post! visite: http://www.alternativarj.com
ResponderExcluirValeu cara, deu certo pra mim!!!
ResponderExcluirqueria pedir uma ajuda - qual o codigo que faz o player ficar parado no topo e nao mover com a pagina? Parabens pelas dicas!!!
ResponderExcluirMuito obrigado pelas informações me ajudou muito.
ResponderExcluirNota 10.
Que Deus sempre o abençoe.
Parabéns nota 1.000!
ResponderExcluirhttp://www.radioweb7.com.br
Você é 10! Explicação simples e objetiva.
ResponderExcluirObrigado!!!
Olá preciso colocar o player no no blog uso wordpress mas não entendo nada você instalar qual o valor?
ResponderExcluirfiz tudo que o tutorial manda mas não rola ! aparece a escrita do primeiro codigo no topo e o player não aparece ! oq faço?
ResponderExcluirBoa tarde,
ResponderExcluirPara rodar a rádio eu preciso do Stream do Rádio?
Eu colei o link porem não funcionou, não apareceu a radio no topo.
Aguardo.
Sim, obg!
Excluir1º - Gostaria de agradecer pelo código amigo, me ajudou muito. Muito obrigado!
ResponderExcluirOlha o player é bom e funciona sim porém só funcionou aqui na versão desktop. Ele não é responsivo!
Fiz uns testes aqui, na versão celular não deu certo não, ele até aparece, mas fico bem pequeno.
Eu tenho um HTML de um blog que já vem com um player de rádio embutido no topo mas, eu não gostei pq ele também não é responsivo. Mas funciona de boas!
Obs: é possível modificar este código, adicionando, mudar o volume, baixar ele pra quantos % eu quiser? Porque quando ele abre, já abre em 100% ou seja, volume máximo!