Beranda
Blogger

Cara Mudah Membuat Tombol Full Screen diBlogger

Dengan adanya fitur ini, pengunjung blog kamu bisa dengan mudah mengubah tampilan layar menjadi penuh, baik mereka menggunakan komputer atau smartphon
Cara Mudah Membuat Tombol Full Screen diBlogger

Pernah nggak sih kamu merasa kalau konten yang kamu lihat di layar terasa kurang maksimal karena terbagi oleh menu browser, notifikasi, atau elemen-elemen lain yang mengganggu? Nah, fitur Mode Fullscreen ini hadir untuk mengatasi masalah tersebut. Dengan mode ini, tampilan layar jadi penuh tanpa ada gangguan, sehingga kamu bisa menikmati video, foto, atau artikel dengan lebih maksimal.

Meskipun di komputer atau laptop fitur ini sudah mudah diakses hanya dengan menekan tombol F11, sayangnya bagi teman-teman yang browsing lewat smartphone, cara itu nggak bisa dilakukan. Kebanyakan smartphone nggak punya tombol F11 di keyboard virtual, sehingga pengunjung yang menggunakan gadget kesulitan untuk mengaktifkan mode layar penuh. Makanya, dengan menambahkan tombol fullscreen di blog, pengunjung bisa dengan mudah beralih ke tampilan penuh, baik mereka menggunakan smartphone maupun komputer.

Apa Itu Mode Fullscreen?

Mode Fullscreen adalah fitur yang membuat tampilan layar browser kamu menjadi penuh, sehingga semua elemen seperti header, address bar, atau menu browser lainnya hilang sementara. Fitur ini sering dipakai untuk menonton video atau melihat foto dengan detail yang lebih besar dan tanpa gangguan.

Pada dasarnya, di komputer kita bisa masuk ke mode fullscreen dengan menekan tombol F11. Tapi untuk smartphone, cara ini nggak bisa dilakukan begitu saja. Itulah kenapa kita butuh solusi tambahan berupa tombol khusus yang bisa di-klik untuk mengaktifkan mode fullscreen secara manual.

Kenapa Fitur Ini Penting?

Menambah Kenyamanan Pengunjung

Bayangin, kamu lagi asyik membaca artikel atau menonton video di blog, tiba-tiba layar terpecah karena tampilan browser yang menampilkan banyak elemen lain. Hal ini bisa bikin pengalaman membaca jadi kurang maksimal, bahkan bisa bikin pengunjung jadi nggak betah. Dengan mode fullscreen, mereka bisa fokus sepenuhnya pada konten yang ada tanpa terganggu elemen-elemen lain.

Memudahkan Penggunaan di Smartphone

Kebanyakan pengguna smartphone tidak memiliki opsi mudah untuk membuat halaman browser menjadi penuh layaknya di komputer. Dengan adanya tombol fullscreen di blog, pengunjung yang pakai smartphone bisa dengan mudah masuk ke mode layar penuh. Jadi, mereka nggak perlu repot-repot mencari cara lain atau merasa terbatas dengan tampilan kecil di layar gadget.

Tampilan yang Lebih Profesional

Selain menambah kenyamanan, dengan menyediakan fitur mode fullscreen, tampilan blog kamu juga akan terlihat lebih modern dan profesional. Fitur ini memberikan kesan bahwa blog kamu diperhatikan dengan baik, mulai dari sisi desain hingga pengalaman pengguna.

Langkah-langkah Memasang Fitur Mode Fullscreen di Blogger

Berikut adalah langkah-langkah praktis untuk memasang tombol fullscreen di blog Blogger kamu. Saya akan jelaskan secara rinci dan dengan bahasa yang mudah dipahami.

Langkah 1: Login dan Buka Menu Tema

  1. Login ke Akun Blogger
    Pertama-tama, buka browser dan masuk ke akun Blogger kamu. Pastikan kamu sudah login dengan akun yang benar.

  2. Pilih Blog dan Masuk ke Menu Tema
    Di dashboard Blogger, pilih blog yang ingin kamu modifikasi. Setelah itu, klik menu Tema yang biasanya ada di sebelah kiri.

  3. Klik Edit HTML
    Di halaman Tema, cari tombol Edit HTML. Klik tombol tersebut untuk membuka editor kode HTML dari template blog kamu. Di sinilah kamu akan menambahkan beberapa kode agar fitur fullscreen bisa bekerja.

Langkah 2: Menambahkan Kode CSS

Kode CSS ini berfungsi untuk mengatur tampilan tombol fullscreen di blog. Kamu perlu menyalin kode berikut dan menempelkannya di atas tag ]]></b:skin> (atau sebelum tag </style>) pada template HTML kamu.

#exitfull, #openfull {
  background: 0 0;
  border: none;
  cursor: pointer;
  padding: 0;
  margin: 0;
  text-align: center;
}
#exitfull:active, #exitfull:focus, #openfull:active, #openfull:focus {
  outline: 0;
}
#exitfull svg, #openfull svg {
  vertical-align: middle;
}
#exitfull {
  display: none;
}
Penjelasan singkat kode di atas:
  • #exitfull dan #openfull: Mengatur tampilan dasar tombol, seperti menghilangkan background dan border, serta memastikan kursor berubah jadi pointer saat di-hover.
  • :active dan :focus: Menghilangkan outline pada tombol saat tombol tersebut di-klik atau sedang difokuskan.
  • Vertical-align: Mengatur agar ikon di dalam tombol tetap berada di tengah.
  • #exitfull { display: none; }: Secara default, tombol untuk keluar dari mode fullscreen (exitfull) disembunyikan. Nantinya, tombol ini akan muncul ketika mode fullscreen sudah aktif.

Langkah 3: Menambahkan Kode JavaScript

Selanjutnya, kamu perlu menambahkan kode JavaScript untuk mengatur fungsi masuk dan keluar dari mode fullscreen. Salin kode di bawah ini dan tempelkan tepat di atas tag </body> atau sebelum penutup tag </body> pada template blog kamu.

<script>
//<![CDATA[
var elem = document.documentElement; 
function openFullscreen() { 
  if (elem.requestFullscreen) { 
    elem.requestFullscreen(); 
  } else if (elem.mozRequestFullScreen) { /* Firefox */ 
    elem.mozRequestFullScreen(); 
  } else if (elem.webkitRequestFullscreen) { /* Chrome, Safari dan Opera */ 
    elem.webkitRequestFullscreen(); 
  } else if (elem.msRequestFullscreen) { /* IE atau Edge */ 
    elem.msRequestFullscreen(); 
  } 
  document.getElementById("openfull").style.display = "none"; 
  document.getElementById("exitfull").style.display = "block"; 
}
function closeFullscreen() { 
  if (document.exitFullscreen) { 
    document.exitFullscreen(); 
  } else if (document.mozCancelFullScreen) { 
    document.mozCancelFullScreen(); 
  } else if (document.webkitExitFullscreen) { 
    document.webkitExitFullscreen(); 
  } else if (document.msExitFullscreen) { 
    document.msExitFullscreen(); 
  } 
  document.getElementById("openfull").style.display = "block"; 
  document.getElementById("exitfull").style.display = "none"; 
}
//]]>
</script>

Penjelasan singkat kode JavaScript di atas:

  • Variabel elem: Merujuk pada elemen dokumen utama, sehingga saat tombol di-klik, seluruh halaman akan berubah ke mode fullscreen.
  • Fungsi openFullscreen(): Fungsi ini memeriksa apakah browser mendukung metode fullscreen, dan jika ya, akan mengaktifkan mode fullscreen. Setelah mode fullscreen aktif, tombol "openfull" disembunyikan dan tombol "exitfull" muncul.
  • Fungsi closeFullscreen(): Fungsi untuk keluar dari mode fullscreen. Ketika dipanggil, akan mengembalikan tampilan ke mode biasa, serta tombol "exitfull" disembunyikan dan tombol "openfull" ditampilkan kembali.

Langkah 4: Menambahkan Tombol Fullscreen di Template

Terakhir, kamu perlu menempatkan kode HTML tombol fullscreen di bagian yang kamu inginkan di blog. Kamu bisa meletakkannya di header atau di mana pun yang strategis. Jika kamu menggunakan template median-ui v1.5, kamu bisa meletakkannya setelah kode <!--[ Profile button ]--> dan melewati tag </b:if> pertama supaya tidak mengganggu tampilan homepage.

Salin dan tempel kode berikut:

<span>
  <button aria-label="Mode Fullscreen" id="openfull" onclick="openFullscreen();">
    <svg height="24" viewBox="0 0 24 24" width="24">
      <path d="M5,5H10V7H7V10H5V5M14,5H19V10H17V7H14V5M17,14H19V19H14V17H17V14M10,17V19H5V14H7V17H10Z" fill="#000000"/>
    </svg>
  </button>
  <button aria-label="Mode Tidak Fullscreen" id="exitfull" onclick="closeFullscreen();">
    <svg height="24" viewBox="0 0 24 24" width="24">
      <path d="M14,14H19V16H16V19H14V14M5,14H10V19H8V16H5V14M8,5H10V10H5V8H8V5M19,8V10H14V5H16V8H19Z" fill="#000000"/>
    </svg>
  </button>
</span>

Kode di atas menghasilkan dua tombol:

  • Tombol Mode Fullscreen (openfull): Ketika diklik, akan memanggil fungsi openFullscreen() untuk membuat tampilan layar menjadi penuh.
  • Tombol Mode Tidak Fullscreen (exitfull): Ketika mode fullscreen sudah aktif, tombol ini akan muncul dan bisa diklik untuk keluar dari mode fullscreen dengan memanggil fungsi closeFullscreen().

Kesimpulan

Nah, itu dia tutorial lengkap cara menambahkan fitur Mode Fullscreen di Blogger dengan bahasa yang santai dan mudah dipahami. Dengan adanya fitur ini, pengunjung blog kamu bisa dengan mudah mengubah tampilan layar menjadi penuh, baik mereka menggunakan komputer atau smartphone. Ini pastinya akan meningkatkan kenyamanan dan pengalaman membaca, terutama saat menikmati video atau foto yang membutuhkan tampilan layar lebar.

Jadi, bagi kamu yang merasa tampilan blog masih kurang maksimal atau ingin memberikan kemudahan tambahan bagi pengunjung, jangan ragu untuk mengikuti langkah-langkah di atas. Selamat mencoba, dan semoga blog kamu makin keren dengan fitur fullscreen ini!

Jika ada pertanyaan atau butuh bantuan, jangan sungkan untuk bertanya di kolom komentar. Sampai jumpa di tutorial selanjutnya dan semoga bermanfaat!

Blogger Enthusiast.

Anda mungkin menyukai postingan ini