Cara Membuat Fitur Fullscreen dengan JavaScript di Blogger

Mode Fullscreen merupakan sebuah mode atau tampilan yang menampilkan seluruh layar pada perangkat. Umumnya mode ini sering kali digunakan pada fitur video atau pun foto.

Namun, kali ini kita akan memasang dan menggunakannya pada blog atau website, sehingga tidak lagi menampilkan Address Bar atau Menu Tab pada browser. Jadi kita lebih terfokus pada isi artikel atau konten dari website tersebut.

Nah, di kesempatan kali ini penulis akan memberikan tutorial singkat Cara Membuat Fitur Fullscreen dengan JavaScript di Blogger. 

Fitu Fullscreen yang akan kita buat menggunakam CSS dan juga JavaScript, tapi tenang saja, fitur ini tidak akan begitu membebani loading web. Jika kamu tertarik untuk membuatnya, kamu bisa simak dalam tutorial berikut ini.

Cara Membuat Mode Fullscreen di Blogger

1. Log in ke akun Blogger  – Tema  – Edit HTML.

masuk ke blogger min

2. Copy dan Pastekan kode Style CSS di bawah ini sebelum kode ]]></b:skin> atau </style>

css full scren min

<style type='text/css'>
#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;
}
</style>

3. Masukan kode JavaScript di bawah ini tepat sebelum kode </body>

JS kode full screen min

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

4. Terakhir, pastekan markup kode pemanggil di bawah ini. Untuk penempatannya bisa kamu sesuaikan keinginan masing-masing. Sebagai contoh, disini saya memasangnya di bagian Header.

kode pemanggil full screen min

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

5. Simpan Tema.

Berikut adalah tampilan Fitur Fullscreen yang telah terpasang di Blogger.

Tampilan fullscreen min

Sekian tutorial Cara Membuat Fitur Fullscreen dengan JavaScript di Blogger yang telah penulis bagikan untuk kamu. Jika kamu memiliki pertanyaan perihal artikel ini, jangan sungkan untuk berkomentar di bawah ya. Selamat mencoba.

Komentar

Leave a Reply

Your email address will not be published. Required fields are marked *

Leave the field below empty!

Trending Minggu Ini

Inwepo adalah media platform yang membantu setiap orang untuk belajar dan berbagi tutorial, tips dan trik cara penyelesaian suatu masalah di kehidupan sehari-hari dalam bentuk teks, gambar. dan video.

Dengan bergabung bersama kami dan membuat 1 tutorial terbaik yang kamu miliki dapat membantu jutaan orang di Indonesia untuk mendapatkan solusinya. Ayo berbagi tutorial terbaikmu.

Ikuti Kami di Sosmed

Inwepo Navigasi

Tentang Kami             Beranda

Hubungi Kami             Panduan Penulis

Kebijakan Privasi

FAQ

Partner

Copyright © 2014 - 2024 Inwepo - All Rights Reserved.

To Top