Cara Membuat Tombol Fullscreen Blog Dengan Javascript

Jagoandzgn.com - Pada kesempatan kali ini saya akan memberikan sebuah tutorial mengenai bagaimana Cara Membuat Tombol Fullscreen Blog Dengan Javascript dengan mudah, Dengan adanya fitur ini kamu tidak lagi melihat bilah address bar dan tab browser sehingga anda hanya fokus pada artikel tersebut pastinya.

Mode ini biasanya di gunakan pada sebuah embed, misalnya pada embed sebuah video maupun foto. Namun kali ini kita akan membuat mode tersebut pada sebuah halaman website/blog. Nah untuk kamu pengguna desktep tombol untuk muncul pada blog dengan menggunakan javascript dan untuk keluat dari mode itu kamu bisa menggunakan tombol esc pada keyboard.

Cara Membuat Tombol Fullscreen Blog Dengan Javascript

1. Silahkan kamu login ke blogger.com dengan menggunakan akun Gmail kamu.
2. Masuk ke menu TEMA > klik Edit HTML
3. Silahkan kamu cari kode ]]></b:skin> dan Paste kode dibawah ini tepat DIATAS kode tersebut.

#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;
}

4. Untuk kode yang saya warnai kamu bisa mengubahnya sesuai dengan blog kamu atau sesuai dengan penempatan kode anda.
5. Selanjutnya paste kode dibawah ini dan paste dimana anda meletakannya.

<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>

6. Kemudian paste kode javascript ini dan paste tepat 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>

7. Kalau sudah silahkan klik SIMPAN dan Selesai.

Bagaimana mudah bukan untuk tutorial Cara Membuat Tombol Fullscreen Blog Dengan Javascript, apabila kamu memiliki pertanyaan seputar blogger silahkan komen dikolom komentar dibawah artikel ini.