Memposting Media Pembelajaran berbasis HTML di Blogger

Menyimpan media pembelajaran secara online lebih memudahkan guru saat ingin menampilkannya kepada para peserta didik. Hal tersebut karena dengan menggunakan jaringan internet kita cukup menyimpan file media pembelajaran 1 kali dan menampilkannya berkali-kali di perangkat apa pun.

Salah satu jenis media yang digunakan dalam kegiatan ini adalah media hasil generate dari AI, baik itu Canva, Gemini, ChatGPT, dsb. dalam format atau ekstensi *.html.

Sebelumnya saya menggunakan CMS custom dari hasil vibe coding dan menambahkan fitur pengelolaan media pembelajaran dan generator perangkat pembelajaran di inibudi.or.id. Namun, sehubungan ada yang bertanya terkait pemanfaatan Blogger gratis untuk menyimpan file HTML. Berikut hasil eksperimen saya yang berhasil menyisipkan kode HTML media pembelajaran ke dalam blogger.

<!--==========================================================-->
<!--WIDGET APLIKASI HTML BLOGGER (AUTO-FULLSCREEN)-->
<!--==========================================================-->
<div class="aplikasi-html-blogger" style="margin: 20px 0px; position: relative;">
  
  <!--1. IFRAME UTAMA-->
  <iframe allow="fullscreen" style="background-color: white; border-radius: 12px; border: 2px solid #e2e8f0; box-shadow: 0 4px 12px rgba(0,0,0,0.1); height: 750px; width: 100%;"></iframe>

  <!--2. TEMPAT KODE SUMBER (Hanya paste HTML Anda di sini)-->
  <textarea style="display: none;">
  <!-- ↓↓↓ PASTE KODE HTML APLIKASI ANDA DI BAWAH BARIS INI ↓↓↓ -->



<!-- ↑↑↑ PASTE KODE HTML APLIKASI ANDA DI ATAS BARIS INI ↑↑↑ -->

  </textarea>
</div>

<!--3. MESIN INJEKTOR PINTAR (Sistem Otomatis)-->
<script>
  document.querySelectorAll('.aplikasi-html-blogger').forEach(function(wadah) {
    var iframe = wadah.querySelector('iframe');
    var textarea = wadah.querySelector('textarea');
    
    if (iframe && textarea && !iframe.getAttribute('data-tersuntik')) {
      
      // Script dan UI Tombol Fullscreen Otomatis (Ikon SVG)
      var btnSVGEnter = '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3"></path></svg>';
      var btnSVGExit = '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M8 3v3a2 2 0 0 1-2 2H3m18 0h-3a2 2 0 0 1-2-2V3m0 18v-3a2 2 0 0 1 2-2h3M3 16h3a2 2 0 0 1 2 2v3"></path></svg>';
      
      var autoFsScript = `
        <style>
          .btn-fs-blogger { position: fixed; bottom: 20px; right: 20px; z-index: 99999; background: #0ea5e9; color: white; border: none; border-radius: 50%; width: 50px; height: 50px; cursor: pointer; box-shadow: 0 4px 10px rgba(0,0,0,0.2); display: flex; justify-content: center; align-items: center; transition: all 0.2s; }
          .btn-fs-blogger:hover { background: #0284c7; transform: scale(1.1); }
        </style>
        <button id="btn-fs-otomatis" class="btn-fs-blogger" title="Layar Penuh">${btnSVGEnter}</button>
        <script>
          document.getElementById('btn-fs-otomatis').addEventListener('click', function() {
            var doc = window.document;
            var docEl = doc.documentElement;
            var requestFullScreen = docEl.requestFullscreen || docEl.mozRequestFullScreen || docEl.webkitRequestFullScreen || docEl.msRequestFullscreen;
            var cancelFullScreen = doc.exitFullscreen || doc.mozCancelFullScreen || doc.webkitExitFullscreen || doc.msExitFullscreen;
            
            if(!doc.fullscreenElement && !doc.mozFullScreenElement && !doc.webkitFullscreenElement && !doc.msFullscreenElement) {
              requestFullScreen.call(docEl).catch(function(err){ console.log("Fullscreen Error: ", err); });
              this.innerHTML = '${btnSVGExit}';
            } else {
              cancelFullScreen.call(doc);
              this.innerHTML = '${btnSVGEnter}';
            }
          });
        <\/script>
      `;

      // Gabungkan kode sumber HTML dengan tombol otomatis sebelum tag penutup </body>
      var sourceHTML = textarea.value;
      if (sourceHTML.includes('</body>')) {
        sourceHTML = sourceHTML.replace('</body>', autoFsScript + '</body>');
      } else {
        sourceHTML += autoFsScript;
      }

      // Delay 100ms untuk mencegah error MutationObserver dari Ekstensi Browser
      setTimeout(function() {
        iframe.srcdoc = sourceHTML;
        iframe.setAttribute('data-tersuntik', 'true');
      }, 100);
    }
  });
</script>
<!--==========================================================-->

Langkah Implementasi

1. Copy kode HTML di atas
2. Buka blogger.com dan masuk ke mode editor kode HTML untuk penulisannya
3. Paste potongan kode di atas
4. Ambil kode HTML dari AI yang anda gunakan seperti Gemini, Canva.com/ai, ChatGPT, dsb.
5. Kembali ke blogger.com
6. Paste di baris ke 13
7. Simpan / Terbitkan