Skip to main content

Cara Membuat Halaman Blog Jadi Fullscreen

Cara Membuat Web Jadi Fullscreen

Membuat tampilan halaman blog menjadi fullscreen - Dengan menerapkan fullscreen pada blog maka tampilannya akan terlihat penuh dengan menyembunyikan tab browser dan bilah addres bar, dengan begitu pengunjung akan lebih fokus pada isi tulisan pada website kamu.

Biasanya mode fullscreen ini sering kita temukan pada sebuah video seperti di youtube. Namun pada kesempatan kali ini saya akan menerapkan mode fullscreen pada sebuah halaman website.

Sayangnya mode fullscreen ini tidak bisa dibuat secara otomatis ketika halaman dibuka. Jadi agar mode fullscreen blog ini bekerja pengunjung harus mengklik sebuah tombol fullscreen agar tampilan halaman website menjadi full.

Cara membuat halaman web fullscreen


Untuk antsipasi jika terjadi kesalahan ketika mengedit template blog sebaiknya backup terlebih dahulu agar jika terjadi kesalahan kita bisa mengembalikannya lagi.

1. Kode CSS tombol fullscreen dan exit fullscreen


Pertama, untuk mengatur tombol fullscreen dan tombol exit kamu copy code CSS dibawah ini.

#openfull,
#exitfull {
    background: 0 0;
    border: none;
    cursor: pointer;
    padding: 0;
    margin: 0;
    text-align: center;
    width: 30px;
    height: 55px;
    line-height: 55px;
    float: left;
}
#openfull:active,
#exitfull:active,
#openfull:focus,
#exitfull:focus {
    outline: 0;
}
#openfull svg,
#exitfull svg {
    vertical-align: middle;
}
#exitfull {
    display: none;
}


Lihat pada bagian css yang saya warnai diatas silahkan kamu ubah dengan menyesuaikan tampilan blog kamu dimana kamu akan menempatkan tombol fullscreen dan exit fullscreen blog.

2. Kode HTML tombol fullscreen dan exit fullscreen


Berikutnya silahkan kamu copy kode HTML dibawah ini dan pastekan dimana kamu akan meletakan tombolnya.

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


3. Kode Javascript Fullscreen dan Exit Fullscreen


Langkah selanjutnya silahkan kamu copy paste kode dibawah ini dan simpan diatas kode </body>.

<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 & Opera */
    elem.webkitRequestFullscreen();
  } else if (elem.msRequestFullscreen) { /* IE/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>


Selesai sudah cara membuat tampilan blog atau website menjadi fullscreen.
Comment Policy: Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui. Jika postingan ini bermanfaat silahkan bagikan postingan ini ke teman kamu atau dengan mengklik tombol bagikan di atas. Berkomentar di blog ini gratis..!!!
Buka Komentar
Tutup Komentar