Cara Membuat Tombol Fullscreen di Blog dengan JavaScript

AmbyarBlog - Pada kesempatan kali ini saya akan berbagi tutorial Membuat Tombol Fullscreen di Blog, sebelumnya saya pernah post tutorial Membuat Presentase Scrollbar. Dengan adanya fitur ini pengunjung tidak lagi melihat address bar dan tab browser, sehingga akan menambahkan fokus para pengunjung ketika mereka sedang membaca konten kita.

Mode ini biasanya digunakan pada sebuah embed, seperti pada embed vidio dan foto. Namun kali ini saya akan membuat mode tersebut berada pada halaman blog.

Wah, Emang bisa?

Sangat bisa, malahan membuat unik blog yang kita kelola tapi itu tergantung selera saja. Bila kurang suka jangan dipaksakan takutnya membuat sobat despresi... Wkwkkwk

Apabali diantara sobat sekalian yang tertarik dengan tutorial ini, silahkan simak tahap-tahap berikut yang akan saya jelaskan.

Cara Membuat Tombol FullScreen di Blog

1. Buka dashboard Blogger sobat.
2. Pilih menu Tema > Edit HTML.
3. Kemudian 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;
}

"Untuk kode yang berwarna merah, sobat dapat merubahnya sesuai dengan blog atau sesuai dengan penempatan kodenya".
4. Selanjutnya, salin kode dibawah dan paste dimanapun yang sobat inginkin.

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

5. Salin kode dibawah dan paste DIATAS </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>

6. Terakhir jangan lupa Simpan.

Bagaimana mudah bukan untuk tutorial Cara Membuat Tombol Fullscreen di Blog dengan JavaScript. Sampai disini dulu, apabila ada pertanyaan silahkan komen di kolom komentar. Semoga bermanfaat, sekian dan terima kasih.