Cara Membuat Halaman Fullscreen di Blogger dengan Mudah

Mas Azer
Sep 1, 2026

Fullscreen bisa membuat halaman Blogger terasa seperti sebuah aplikasi tersendiri. Teknik ini cocok digunakan untuk membuat landing page, katalog ebook, galeri, halaman membaca, dashboard, portofolio, maupun halaman khusus yang membutuhkan ruang layar lebih luas.

Menariknya, ada dua cara berbeda yang perlu dibedakan:

  1. Fullscreen dengan tombol — pengguna menekan tombol untuk masuk fullscreen browser.

  2. Langsung memenuhi layar — halaman dibuat memenuhi viewport sejak pertama dibuka.

Keduanya terlihat mirip, tetapi secara teknis berbeda.

📌 Daftar Isi


Apa Itu Fullscreen di Blogger?

Sebelum membuatnya, kita perlu memahami bahwa istilah fullscreen dapat merujuk pada dua hal.

Fullscreen Browser

Fullscreen browser adalah kondisi ketika sebuah elemen benar-benar masuk ke mode fullscreen menggunakan fitur bawaan browser.

Contohnya:

┌──────────────────────────────────────────┐
│                                          │
│              WEBSITE                     │
│                                          │
│              FULLSCREEN                  │
│                                          │
└──────────────────────────────────────────┘

Untuk melakukan ini, JavaScript menggunakan:

element.requestFullscreen();

Browser biasanya mengharuskan tindakan tersebut dipicu oleh interaksi pengguna seperti klik tombol.

Memenuhi Tinggi Layar

Cara kedua bukan fullscreen browser sebenarnya.

Kita hanya membuat elemen memiliki tinggi minimal sebesar viewport:

min-height: 100vh;

Hasilnya halaman dapat memenuhi area layar yang tersedia, tetapi address bar browser tetap ada.

Cara ini justru sering lebih cocok untuk halaman Blogger karena lebih sederhana.

1. Fullscreen dengan Tombol

Metode pertama cocok jika kita ingin memberikan pilihan kepada pengunjung.

Misalnya kita memiliki tombol:

⛶ Fullscreen

Ketika tombol diklik, container halaman akan masuk ke mode fullscreen.

HTML

Buat container utama:

<div id="fullscreenPage">

  <h1>
    Halaman Fullscreen Blogger
  </h1>

  <p>
    Klik tombol berikut untuk masuk ke mode fullscreen.
  </p>

  <button id="fullscreenBtn">
    ⛶ Fullscreen
  </button>

</div>

CSS

Tambahkan CSS:

#fullscreenPage {

  width: 100%;

  min-height: 100vh;

  padding: 50px 20px;

  background: #ffffff;

  text-align: center;

  font-family:
    Arial,
    Helvetica,
    sans-serif;

}


#fullscreenBtn {

  border: 0;

  padding: 12px 20px;

  border-radius: 8px;

  background: #10aaa1;

  color: #ffffff;

  font-weight: 700;

  cursor: pointer;

}

JavaScript

Kemudian tambahkan:

<script>

(function () {

  const page =
    document.getElementById(
      "fullscreenPage"
    );

  const button =
    document.getElementById(
      "fullscreenBtn"
    );


  button.addEventListener(
    "click",
    function () {

      if (
        document.fullscreenElement ||
        document.webkitFullscreenElement
      ) {

        if (
          document.exitFullscreen
        ) {

          document.exitFullscreen();

        } else if (
          document.webkitExitFullscreen
        ) {

          document.webkitExitFullscreen();

        }

        return;

      }


      if (
        page.requestFullscreen
      ) {

        page.requestFullscreen();

      } else if (
        page.webkitRequestFullscreen
      ) {

        page.webkitRequestFullscreen();

      }

    }
  );

})();

</script>

Bagaimana Cara Kerjanya?

Alurnya sederhana:

Pengunjung
    │
    ▼
Klik tombol Fullscreen
    │
    ▼
requestFullscreen()
    │
    ▼
Browser mengaktifkan fullscreen
    │
    ▼
Halaman memenuhi layar

Untuk keluar dari fullscreen, pengguna dapat menekan tombol Esc pada keyboard.

⚠️ Catatan Penting

Jangan berharap fullscreen browser bisa dijalankan otomatis ketika halaman baru dibuka.

Misalnya:

window.onload = function () {
  document.documentElement.requestFullscreen();
};

Pada browser modern, pendekatan seperti ini umumnya akan ditolak karena fullscreen membutuhkan user gesture, seperti klik atau interaksi pengguna lainnya.

Jadi jika ingin fullscreen browser sebenarnya, tombol adalah pilihan yang paling aman.

2. Halaman Langsung Memenuhi Layar

Jika tujuan kita hanya ingin halaman terlihat memenuhi area layar sejak awal, sebenarnya kita tidak membutuhkan JavaScript sama sekali.

Ini adalah metode yang lebih sederhana.

HTML

<div id="fullscreenPage">

  <h1>
    Halaman Blogger
  </h1>

  <p>
    Halaman ini langsung memenuhi area layar.
  </p>

</div>

CSS

#fullscreenPage {

  width: 100%;

  min-height: 100vh;

  margin: 0;

  padding: 50px 20px;

  background: #ffffff;

  font-family:
    Arial,
    Helvetica,
    sans-serif;

}

Selesai.

Tidak diperlukan JavaScript.

Mengapa Menggunakan 100vh?

vh berarti viewport height.

Sedangkan:

100vh

berarti kurang lebih:

100% dari tinggi viewport.

Jadi:

min-height: 100vh;

membuat halaman memiliki tinggi minimal sebesar layar yang tersedia.

Perbedaan Kedua Metode

Fitur Dengan Tombol Langsung
Membutuhkan JavaScript ✅ ❌
Membutuhkan tombol ✅ ❌
Browser fullscreen sebenarnya ✅ ❌
Address bar dapat disembunyikan ✅ ❌
Langsung aktif saat halaman dibuka ❌ ✅
Lebih sederhana ❌ ✅
Cocok untuk katalog Bisa Sangat cocok
Cocok untuk landing page Bisa Sangat cocok

Mana yang Sebaiknya Digunakan?

Sebenarnya tergantung kebutuhan.

Gunakan Metode 1 jika:

Anda ingin pengunjung bisa memilih:

"Saya ingin melihat halaman ini dalam fullscreen."

Contohnya:

  • aplikasi web

  • game browser

  • presentasi

  • pembaca dokumen

  • dashboard

Gunakan Metode 2 jika:

Anda hanya ingin desain halaman memenuhi ruang yang tersedia.

Contohnya:

  • katalog ebook

  • landing page

  • halaman puisi

  • galeri foto

  • halaman profil

  • portofolio

  • halaman membaca

  • halaman khusus Blogger

Untuk kebutuhan seperti ini, metode kedua biasanya lebih ringan dan stabil.

Contoh: Membuat Katalog Ebook Fullscreen

Misalnya kita sedang membuat katalog ebook.

Struktur HTML sederhananya:

<div id="ebookCatalog">

  <section class="ebook-header">

    <div class="ebook-badge">
      📖 KOLEKSI EBOOK PREMIUM
    </div>

    <h1>
      Koleksi <span>Ebook Premium</span>
    </h1>

    <p>
      Temukan ebook pilihan
      dari berbagai penulis.
    </p>

  </section>


  <div class="ebook-grid">

    <!-- Ebook 1 -->

    <!-- Ebook 2 -->

    <!-- Ebook 3 -->

  </div>

</div>

Kemudian CSS utamanya:

#ebookCatalog {

  width: 100%;

  min-height: 100vh;

  margin: 0;

  padding:
    45px 25px 70px;

  background: #ffffff;

}

Dengan begitu katalog akan menggunakan seluruh tinggi layar yang tersedia.

Tidak Perlu Tombol Fullscreen

Untuk model katalog seperti ini, kita tidak perlu:

<button>
  ⛶ Fullscreen
</button>

dan tidak perlu:

requestFullscreen();

Cukup:

min-height: 100vh;

Ini membuat struktur halaman menjadi lebih sederhana.

💡 Tips Penting untuk Blogger

Saat membuat halaman khusus di Blogger, sebaiknya gunakan ID unik untuk membungkus seluruh komponen.

Misalnya:

<div id="ebookCatalog">

Kemudian CSS ditulis:

#ebookCatalog h1 { }

#ebookCatalog p { }

#ebookCatalog button { }

#ebookCatalog .ebook-card { }

Jangan terlalu banyak menggunakan selector global seperti:

h1 { }

p { }

button { }

.card { }

Karena CSS tersebut dapat berbenturan dengan CSS dari template Blogger.

Dengan menggunakan:

#ebookCatalog .ebook-card

aturan tersebut hanya berlaku untuk katalog ebook.

Ini sangat penting terutama ketika halaman menggunakan template Blogger yang sudah memiliki CSS dan JavaScript sendiri.

⚠️ Fullscreen dan Popup

Ada satu hal lagi yang perlu diperhatikan jika menggunakan metode fullscreen browser.

Misalnya kita mempunyai:

<div id="ebookCatalog">

  <!-- katalog -->

</div>

<div id="ebookModal">

  <!-- popup detail -->

</div>

Jika hanya:

ebookCatalog.requestFullscreen();

maka elemen yang berada di luar ebookCatalog tidak otomatis menjadi bagian dari fullscreen.

Akibatnya popup seperti:

Katalog
   ↓
Fullscreen
   ↓
Klik Detail
   ↓
Popup tidak terlihat ❌

Untuk menghindari masalah tersebut, elemen popup sebaiknya berada di dalam container fullscreen: 

<div id="ebookCatalog">

  <!-- katalog -->

  <div id="ebookModal">

    <!-- popup detail -->

  </div>

</div>

Strukturnya menjadi:

#ebookCatalog
│
├── Header
├── Filter
├── Ebook Grid
├── Footer
│
└── #ebookModal

Dengan demikian seluruh komponen menjadi bagian dari area fullscreen.

Kesimpulan

Ada dua cara utama membuat halaman fullscreen di Blogger.

1. Fullscreen dengan tombol

Menggunakan Fullscreen API:

element.requestFullscreen();

Kelebihan:

  • benar-benar masuk fullscreen browser

  • address bar dapat disembunyikan

  • pengguna dapat mengaktifkannya ketika diperlukan

Kekurangan:

  • membutuhkan interaksi pengguna

  • membutuhkan JavaScript

  • struktur popup harus diperhatikan

2. Langsung memenuhi layar

Menggunakan:

min-height: 100vh;

Kelebihan:

  • sangat sederhana

  • tidak membutuhkan JavaScript

  • langsung aktif

  • lebih stabil

  • cocok untuk halaman khusus Blogger

Kekurangan:

  • bukan fullscreen browser sebenarnya

  • address bar browser tetap terlihat

Rekomendasi

Untuk katalog ebook, landing page, galeri, halaman puisi, dan halaman membaca di Blogger, gunakan metode kedua: 

#halamanAnda {
  width: 100%;
  min-height: 100vh;
}

Sedangkan jika Anda sedang membuat aplikasi web, game, presentasi, atau pembaca dokumen yang memang membutuhkan fullscreen browser, gunakan metode pertama dengan tombol.

Yang terpenting adalah memahami bahwa:

100vh membuat halaman memenuhi viewport, sedangkan requestFullscreen() membuat elemen masuk ke mode fullscreen browser.

Keduanya sama-sama terlihat seperti fullscreen, tetapi cara kerjanya berbeda.


Blog ini tidak memasang iklan. Jika Tuan dan Nona berkenan, bisa dukung blog ini dengan menraktir kopi. Terima kasih. ^_^


Mas Azer

Mas Azer

Blogger Pelukis kata ...

Baca Sebelumnya
Komentar Netizen
Tulis Komentarmu
comment url