✔ Cara Menciptakan Halaman Blog 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 goresan pena pada website kamu.

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

Sayangnya mode fullscreen ini tidak dapat dibentuk secara otomatis dikala halaman dibuka. Kaprikornus supaya mode fullscreen blog ini bekerja pengunjung harus mengklik sebuah tombol fullscreen supaya tampilan halaman website menjadi full.

Cara menciptakan halaman web fullscreen

Untuk antsipasi kalau terjadi kesalahan dikala mengedit template blog sebaiknya backup terlebih dahulu supaya kalau terjadi kesalahan kita dapat mengembalikannya lagi.

1. Kode CSS tombol fullscreen dan exit fullscreen

Pertama, untuk mengatur tombol fullscreen dan tombol exit kau 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 bab css yang aku warnai diatas silahkan kau ubah dengan menyesuaikan tampilan blog kau dimana kau akan menempatkan tombol fullscreen dan exit fullscreen blog.

2. Kode HTML tombol fullscreen dan exit fullscreen

Berikutnya silahkan kau copy isyarat HTML dibawah ini dan pastekan dimana kau 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 kau copy paste isyarat dibawah ini dan simpan diatas isyarat </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 menciptakan tampilan blog atau website menjadi fullscreen.
Sumber http://www.masigun.com

Share this post

Berlangganan update artikel terbaru via email: