Cómo Crear una Página de Juegos en Blogger 2026

<!-- ==== 1. IMAGEN DE PORTADA ==== -->
<div class="separator" style="clear: both;">
  <a id="cover_link" href="#" style="display:block; padding: 1em 0; text-align:center;">
    <!-- PON AQUÍ EL URL DE LA IMAGEN DE PORTADA -->
    <img id="cover_img" alt="Portada del juego" height="108" src="PON_AQUI_URL_IMAGEN_PORTADA" style="border:0; height:auto; max-width:100%;" width="640" />
  </a>
</div>

<div class="wrap">
  <div class="card">
    <!-- Botones -->
    <div class="topbar">
      <div class="controls">
        <button class="btn btn-primary" id="btnPlay" title="Cargar / Reproducir">
          <svg viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg>Jugar
        </button>
        <button class="btn btn-outline" id="btnFullscreen" title="Pantalla completa">
          <svg viewBox="0 0 24 24"><path d="M7 14H5v5h5v-2H7v-3zm12 0h-2v3h-3v2h5v-5zM7 5h3V3H5v5h2V5zm10 0v3h2V3h-5v2h3z"/></svg>Fullscreen
        </button>
        <button class="btn btn-outline" id="btnReload" title="Recargar iframe">
          <svg viewBox="0 0 24 24"><path d="M12 6V3L8 7l4 4V8c2.76 0 5 2.24 5 5a5 5 0 11-5-5z"/></svg>Recargar
        </button>
      </div>
    </div>

    <!-- ==== 2. JUEGO EN IFRAME ==== -->
    <div class="frame" id="wrapFrame">
      <div class="frame-bar">
        <div style="display:flex; align-items:center; gap:10px;">
          <span class="dot"></span>
          <span class="mini">TIP: si el juego no trae su propio fullscreen, usa el botón.</span>
        </div>
      </div>
      <div class="ratio">
        <div class="loader" id="loader"><div class="spinner"></div>Cargando…</div>
        <!-- PON AQUÍ EL URL DEL JUEGO HTML5 -->
        <iframe id="game"
          src="PON_AQUI_URL_DEL_JUEGO"
          allow="autoplay; fullscreen; microphone; clipboard-read; clipboard-write; gamepad"
          allowfullscreen
          referrerpolicy="no-referrer"
          sandbox="allow-forms allow-scripts allow-same-origin allow-pointer-lock allow-popups allow-popups-to-escape-sandbox">
        </iframe>
      </div>
    </div>

    <!-- ==== 3. DESCRIPCIÓN DEL JUEGO ==== -->
    <div class="game-desc">
      <!-- PON AQUÍ LA DESCRIPCIÓN DEL JUEGO -->
      <p><strong>DESCRIPCIÓN:</strong> Escribe aquí la descripción del juego.</p>
    </div>

    <!-- ==== 4. IMAGEN DE INSTRUCCIONES ==== -->
    <div style="margin-top: 12px; text-align: center;">
      <!-- PON AQUÍ EL URL DE LA IMAGEN DE INSTRUCCIONES -->
      <img alt="Instrucciones del juego" src="PON_AQUI_URL_IMAGEN_INSTRUCCIONES" style="border:0; height:auto; max-width:100%;" />
    </div>

    <!-- Footer con marca -->
    <div class="foot" id="foot">
      <div class="mini">Crea tu página web en:</div>
      <div class="mini" id="brand"></div>
    </div>
  </div>
</div>

<!-- ==== SCRIPT ==== -->
<script>
(function(){
  const $ = (s)=>document.querySelector(s);
  const iframe  = $('#game');
  const loader  = $('#loader');
  const wrap    = $('#wrapFrame');

  $('#btnPlay').onclick = ()=> { loader.style.display = 'flex'; iframe.src = iframe.src; iframe.focus(); };
  $('#btnReload').onclick = ()=> {
    const u = iframe.src;
    loader.style.display = 'flex';
    iframe.src = 'about:blank';
    setTimeout(()=>{ iframe.src = u; }, 90);
  };
  $('#btnFullscreen').onclick = async ()=> {
    try{
      if (iframe.requestFullscreen) { await iframe.requestFullscreen(); }
      else if (wrap.requestFullscreen) { await wrap.requestFullscreen(); }
      else { alert('Pantalla completa no soportada.'); }
    }catch(e){
      alert('El navegador bloqueó pantalla completa.');
    }
  };

  const foot = document.getElementById('foot');
  const brand = document.getElementById('brand');
  const kTxt = 'www.kirawuan.com';

  function setBrand(){ brand.innerHTML = kTxt; }
  setBrand();
  const obs = new MutationObserver(()=>{
    if(!foot.innerHTML.toLowerCase().includes('kirawuan.com')){ setBrand(); }
  });
  obs.observe(foot, {childList:true, subtree:true});
})();
</script>