Membuat Tombol Fullscreen di Blog dengan mudah - Susah Tidur

Membuat Tombol Fullscreen di Blog dengan mudah

Membuat Tombol Fullscreen di Blog dengan mudah - SusahTidur - Pada kesempatan kali ini saya akan membagikan sebuah tutorial tentang Cara Membuat Tombol Fullscreen di Blog dengan mudah. Yap tombol Fullscreen atau layar penuh, kini telah menjadi trend pada blog - blog sekarang.

Kenapa bisa begitu? menurut saya dengan adanya tombol Fullscreen atau layar penuh pada suatu blog akan memberikan kesan peduli terhadap visitor yang ingin fokus pada suatu artikel.

Tombol Fullscreen ini akan bekerja setelah di tekan, lalu mulai dari Status Bar, Address Bar ( Bar URL Browser ) dan Toolbar yang ada di Browser akan di sembunyikan. Untuk cara pengembalian kesemula ya tinggal di tekan lagi tombol Fullscreen nya, untuk PC bisa tekan tombol "ESC".

Pada umumnya Fullscreen ini biasa digunakan dalam embeb video dan foto. namun telah sobat sudah ketahui sekarang kita bisa terapkan Fullscreen ini pada blog. Berikut ini Cara Membuat Tombol Fullscreen di Blog dengan mudah.

Membuat Tombol Fullscreen di Blog dengan mudah

  1. Langkah pertama, silahkan masuk dashboard blogger sobat dulu
  2. Masuk menu Tema > Edit HTML > Cari kode ]]></b:skin>
  3. Kemudian masukkan CSS berikut tepat di atas kode yang kita cari barusan ]]></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;
    }
  4. Lalu Tambahkan Script dibawah ini tepat di atas </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>
  5. Kemudian di bawah ini adalah kode pemanggil Tombol Fullscreen nya, jadi sesuai selera sobat mau ditaruh dimana
    <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>
    Attention
    Kode yang saya blok biru, itu adalah warna icon svg Fullscreen silahkan ganti sesuai selera. Warna default nya putih
  6. Kemudian Simpan Tema

Demo nya disini sob ( ga pake tombol demo ribet, sorry hihi )

Baiklah selesai sudah tutorial Cara Membuat Tombol Fullscreen di Blog dengan mudah, jika sobat masih bingung dengan tutorial diatas silahkan bertanya di kolom komentar. Sekian dan terimakasih telah berkunjung ke SusahTidur.
"Membuat Tombol Fullscreen di Blog dengan mudah"
Tampilkan Komentar
Sembunyikan Komentar

Belum ada Komentar untuk "Membuat Tombol Fullscreen di Blog dengan mudah"

Posting Komentar

Jangan malu bertanya!

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel