1º  Descargar Plantilla DE juegos 

PLANTILLA VIEJA
PLANTILLA NUEVA

2º Plantilla para entradas de videojuegos rediseñado en Blogger. 


<!-- ==== 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>a
        <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" style="color: black; font-family: Arial, sans-serif; padding: 12px;">
      <!-- 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>

<!-- ==== ESTILOS ==== -->
<style>
  :root{
    --bg:#0a0d14; --ink:#e8f0ff; --muted:#9fb3d1;
    --primary:#00e0ff; --primary-2:#7c4dff; --accent:#14f195;
  }
  html,body{margin:0;background:radial-gradient(1200px 700px at 10% -10%,#0c1430 0%,#06090f 60%,var(--bg) 100%);color:var(--ink);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial}
  .wrap{max-width:1080px;margin:24px auto;padding:0 16px}
  .card{background:linear-gradient(135deg,#0b1222,#0a0f1d 40%,#0c162b);border:1px solid #1b2a45;border-radius:22px;box-shadow:0 12px 40px #0009, inset 0 1px 0 #ffffff0a;overflow:hidden}
  .topbar{display:flex;gap:10px;align-items:center;justify-content:flex-end;padding:14px 16px;border-bottom:1px solid #1b2a45;background:linear-gradient(135deg,#0c1426,#0a1120)}
  .controls{display:flex;gap:8px;flex-wrap:wrap}
  .btn{appearance:none;border:0;border-radius:12px;padding:10px 14px;font-weight:800;letter-spacing:.2px;cursor:pointer;display:inline-flex;align-items:center;gap:8px;color:#06101a;box-shadow:0 8px 20px #0007, inset 0 1px 0 #ffffff22}
  .btn svg{width:18px;height:18px;fill:currentColor}
  .btn-primary{background:linear-gradient(135deg,var(--primary),var(--primary-2));}
  .btn-outline{background:linear-gradient(135deg,#0d1a30,#0b1426);color:var(--ink);border:1px solid #2a3f6b}
  .frame{position:relative;margin:16px;isolation:isolate;border-radius:18px;overflow:hidden;background:radial-gradient(800px 500px at 20% 0%,#0d1a30 0%,#07101f 40%,#040a14 100%);border:1px solid #21355d;box-shadow:0 20px 60px #000c}
  .ratio{position:relative;width:100%;aspect-ratio:16/9;background:#000}
  .ratio iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
  .frame-bar{position:absolute;inset:10px 10px auto 10px;height:44px;display:flex;align-items:center;justify-content:space-between;background:linear-gradient(135deg,#0c1426,#0a1120);border:1px solid #21355d;border-radius:12px;padding:6px 8px;box-shadow:0 12px 40px #0009;z-index:3}
  .dot{width:10px;height:10px;border-radius:50%;background:var(--accent);box-shadow:0 0 14px var(--accent)}
  .mini{font-size:12px;color:var(--muted)}
  .foot{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 16px;border-top:1px solid #1b2a45;background:linear-gradient(180deg,#0c1426,#0a1020)}
  .loader{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#020911cc;color:#cfe7ff;font-weight:700;letter-spacing:.3px}
  .spinner{width:28px;height:28px;border:3px solid #214163;border-top-color:#00e0ff;border-radius:50%;animation:spin 1s linear infinite;margin-right:10px}
  @keyframes spin{to{transform:rotate(360deg)}}
</style>

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

  // Botones
  $('#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.');
    }
  };

  // Marca kirawuan.com
  const foot = document.getElementById('foot');
  const brand = document.getElementById('brand');
  const kTxt = 'www.kirawuan.com';
  const kHref = 'https://' + 'www.' + 'kirawuan' + '.com';

  function setBrand(){
    brand.innerHTML = '<a href="'+kHref+'" target="_blank" rel="noopener noreferrer" style="color:inherit;text-decoration:none;">'+kTxt+'</a>';
  }
  setBrand();
  const obs = new MutationObserver(()=>{
    if(!foot.innerHTML.toLowerCase().includes('kirawuan.com')){
      setBrand();
    }
  });
  obs.observe(foot, {childList:true, subtree:true});
})();
</script>
3º Sitios Web para obtener Videojuegos

Sitios web oficiales que si pagan por publicar sus videojuegos en nuestro blog.

  1. Game Monetize | Registro
  2. SoftGames | Registro
  3. GamePix | Registro
  4. Famobi | Registro
  5. Game Distribution | Registro
  6. Sitios web que no pagan por publicar sus videojuegos
  7. Html Games | Website
  8. Free Online Games | Website
  9. w.4j.com | Website
  10. Wanted 5 Games | Website

4º Crear páginas principales en Blogger (Monetización)

Página de información Sobre Nosotros | Ejemplo
Página de Formulario de Contactos | Como crear Formulario
Página de descargo de Responsabilidades | Disclaimer

5º Modificar Redes Sociales

Para modificar las redes sociales buscar en Editar HTML de nuestra plantilla "Like Our Facebook" y reemplazar los enlaces por nuestras redes sociales.
MIRA UN EJEMPLO DE LA PÁGINA AQUÍ ABAJO