Cara Memasang Tombol Fullscreen di Blog

Cara Memasang Tombol Fullscreen di Blog - Pada kesempatan kali ini saya akan membahas seputar desain belog atau Tutorial Blogger yaitu cara membuat tombol fullscren di blog dengan javascript.

Membuat dan memasang tombol fullscreen dengan javascript di blog sangatlah mudah, dengan adanya fitur full screen di blog maka anda maupun pengunjung tidak lagi melihat addresbar pada browser dan hanya kan menampilkan blog anda secara full.

Memasang fullscren di blog pada dasarnya adalah sebuah kode embed dari embed video yang biasanya juga ada kaitan dengan iframe pada media player video.

Fitur tombol fullscreen kali ini sama dengan fitur yang ada pada media player video maupun foto yakni untuk menjadikan full screen bisa menggunakan shortcut F11 dan untuk keluar tombol esc di keyboard.

Baiklah tidak perlu berlama-lama lagi mari kita langsung saja masuk ke tutorial membuat tombol fullscren pada blog dengan mudah.

Cara Membuat Tombol Fullscreen di Blog Menggunakan Javascript

1. Login ke Blogger.com kemudian pilih Tema > Edit HTML.
2. Cari kode ]]></b:skin> dan pastekan 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;
}

3. Selanjutnya copas kode dibawah ini dan simpan dimana anda ingin meletakkan tombol fullscreen ini saya saran di bagian heading.

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

4. Berikutnya copy dan paste kode dibawah ini tepat diatas 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>

5. Langkah terakhir klim simpan template dan lihat hasilnya!!

Itulah cara membuat dan memasang tombol fullscreen di blog dengan mudah. Menurut anda bagaimana mudah atau tidak? Dengan memasang tombol fullscreen pada blog anda akan sangat berbeda dengan blog lainnya.

Baca Juga: Cara Membuat Pesan Popup Melayang di Blog

Baiklah sampai disini saja artikel kali ini dan apabila ada yang ingin anda tanyakan silahkan komentar saja dibawah dan nanti akan saya respon komentar anda! Sekian dan terima kasih!