Cara Terbaru Membuat Tombol Full Screen Yang Responsive Di Blogger

Demo    Mei 22, 2020    Blogger , CSS , HTML , JS    Comment   

Lapakinfo.net - Di kesempatan ini ,saya akan membagikan tutorial tentang Cara Terbaru Membuat Tombol Full Screen Yang Responsive Di Blogger dengan mudah, dengan menggunakan fitur ini kalian tidak bisa melihat adress bar dan tab browser, jadi kalian akan fokus pada artikel tersebut. Dan cara ini bekerja dengan baik pada perangkat mobile dan perangkat dekstop.

Mungkin kalian pernah lihat mode ini di Youtube, di Youtube ada salah satu tombol untuk melihat video dengan layar penuh atau full screen, namun pada kesempatan kali ini saya akan membuat mode tersebut pada halaman blogger. Tombol ini sudah banyak di gunakan oleh kalangan blogger, salah satunya mbak igniel. Tujuan memasang mode ini tidak lain untuk mempermudah pengunjung ketika ingin membaca suatu artikel dengan fokus.

Cara Terbaru Membuat Tombol Full Screen Yang Responsive Di blogger

1. Buka Blog kalian.
2. Pilih Tema lalu pilih Edit HTML.
3. Salin kode di bawah ini dan pastekan tepat di atas kode ]]></b:skin>.

#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 saya tandi dengan warna Merah kalian bisa mengubahnya sesuai blog atau penempatan kode kalian.
4. Lanjut, silahkan kalian salin kode di bawah ini dan letakan sesuai keinginan kalian.

<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. Langkah terahir silahkan kalian salin Javascript di bawah ini dan letakan tepat di atas 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>

6. Simpan template kalian dan selesai.

Bagaimana sangat mudah bukan untuk tutorial Cara Terbaru Membuat Tombol Full Screen Yang Responsive Di blogger, jika kalian mempunyai pertanyaan seputar postingan di atas silahkan kalian bertanya melalui kolom komentar di bawah ini. Terimakasih sudah berkunjung dan semoga bermanfaat buat kalian semua.