CÓDIGO HTML PARA COLOCAR RÁDIO NO BLOGGER

Passo 1: Onde colocar o código?

Você tem duas opções, escolha a que preferir:

Em um Widget na Barra Lateral/Rodapé

1. No menu esquerdo do Blogger, clique em Layout
2. Vá na área onde quer colocar a rádio e clique em Adicionar um Gadget
3. Na lista, escolha HTML/JavaScript
4. No campo "Conteúdo", cole o código já editado
5. O campo "Título" pode deixar em branco ou colocar algo como "Ouça Nossa Rádio"
6. Clique em Salvar e depois em Salvar alterações no final da página

Passo 2: Teste para confirmar

Abra o seu blog e veja se o player apareceu com o nome certo. Clique no botão de ▶ para conferir se a transmissão toca normalmente.

Código Pronto para Editar

Onde está escrito 'nomedaradio', deve permanecer em minúsculo, sem acentos e sem espaços entre as palavras. Onde está 'url da stream da rádio', deve ser inserido o link da stream online de preferência, e em 'NOME RADIO', o nome de exibição da rádio.

Copie esse código abaixo e faça as alterações que explicamos acima:

<div class="radio-player-container nomedaradio" id="nomedaradio">

  <style>

    #nomedaradio.radio-player-container {

      width: 200px; height: 200px;

      margin: 10px; padding: 15px; box-sizing: border-box; display: inline-flex; flex-direction: column; justify-content: space-between; background: linear-gradient(135deg, #0a0a0a, #111); border-radius: 16px; box-shadow: 0 8px 30px rgba(0,0,0,0.6); border: 1px solid rgba(255,255,255,0.08); text-align: center; user-select: none; transition: all 0.4s ease; vertical-align: top;

      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; color: #fff;

      --accent: #ff0000; --accent-dark: #cc0000; --accent-hover: #ff3333; --accent-glow: rgba(255,0,0,0.6); --pulse-shadow: rgba(255,0,0,0.4); --pulse-shadow-strong: rgba(255,0,0,0.7);

    }

    #nomedaradio.radio-player-container:hover { transform: translateY(-4px); }

    #nomedaradio.station-name { font-size: 1.4rem; font-weight: 900; letter-spacing: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--accent); text-shadow: 0 2px 10px var(--accent-glow); }

    #nomedaradio .now-playing { font-size: 0.75rem; opacity: 0.85; color: #ddd; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

    #nomedaradio .controls { display: flex; justify-content: center; margin-top: 5px; }

    #nomedaradio .btn-circle { width: 50px; height: 50px; border-radius: 50%; background: rgba(255,255,255,0.06); border: 2px solid rgba(255,255,255,0.3); color: #fff; font-size: 1.4rem; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.3s ease; }

    #nomedaradio .btn-circle:hover { transform: scale(1.1); background: rgba(255,255,255,0.15); border-color: #fff; }

    #nomedaradio .btn-play { background: linear-gradient(145deg, var(--accent), var(--accent-dark)); border: none; color: white; box-shadow: 0 4px 15px var(--pulse-shadow); }

    #nomedaradio .btn-play:hover { background: linear-gradient(145deg, var(--accent-hover), var(--accent)); box-shadow: 0 8px 25px var(--pulse-shadow-strong); }

    @keyframes pulsePlay_nomedaradio { 0%, 100% { box-shadow: 0 4px 15px var(--pulse-shadow); } 50% { box-shadow: 0 8px 25px var(--pulse-shadow-strong); } }

    #nomedaradio.playing .btn-play { animation: pulsePlay_nomedaradio 2.2s infinite ease-in-out; }

  </style>

  <div class="station-name">NOME RADIO</div>

  <div class="now-playing">A sua dose diária de energia 🔥</div>

  <audio id="audio-nomedaradio" src="URL_DA_STREAM_DA_RADIO"></audio>

  <div class="controls">

    <button class="btn-circle btn-play" id="play-nomedaradio" title="Tocar">▶</button>

    <button class="btn-circle" id="pause-nomedaradio" title="Pausar" style="display:none;">⏸</button>

  </div>

</div>

<script>

(function() {

  const id = 'nomedaradio';

  const audio = document.getElementById(`audio-${id}`);

  const btnPlay = document.getElementById(`play-${id}`);

  const btnPause = document.getElementById(`pause-${id}`);

  const container = btnPlay.closest('.radio-player-container');

  function toggle() {

    if (audio.paused) { audio.play().catch(e => console.log(e)); btnPlay.style.display = 'none'; btnPause.style.display = 'flex'; container.classList.add('playing'); } 

    else { audio.pause(); btnPlay.style.display = 'flex'; btnPause.style.display = 'none'; container.classList.remove('playing'); }

  }

  btnPlay.addEventListener('click', toggle); btnPause.addEventListener('click', toggle);

  container.addEventListener('dblclick', () => { audio.src = audio.src; audio.play(); });

})();

</script>