Jesus Player de Web Radio fixo no topo do Blog ~ ...::: Rádio Atos2fm Transmitindo o Poder de Deus Através da Internet :::...

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 "..." conforme mostra o exemplo na imagem logo abaixo:

3º Passo: Em seguida, procure por esta Tag: "]]>
", 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 "", quando encontrá-la acrescente este código logo acima da mesma:




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.

Um comentário:

  1. Fiz e refiz isso, mas elenão ficou fixo toda vez que mudo de pagina o player renicia.... caramba ja testei varias formas e nao da certo...

    ResponderExcluir