Cara Membuat Fitur Fullscreen dengan CSS di Blogger

Cara Membuat Fitur Fullscreen dengan CSS di Blogger - Fitur Fullscreen atau Layar Penuh yang umumnya hanya terdapat pada video saja. Tapi, tau gak sih, kalo fitur ini juga bisa di pasang di situ Blog kamu, Loh! Penarasan,'kan? Yuk! Simak di bawah ini.

Di kesempatan kali ini Chilogger akan memberikan satu artikel berjudul Cara Membuat Fitur Fullscreen dengan CSS di Blogger.

Cara Memasang Fitur Fullscreen di Blogger

1. Masuk ke akun Blogger kamu.

2. Klik menu Tema -> Edit Html.

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

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

4. Masukan kode JavaScript di bawah ini 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>

5. Terakhir,  masukan markup kode pemanggil di bawah ini. Untuk penempatannya bisa kamu sesuaikan.

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

6. Simpan Tema.

Sekian artikel Cara Membuat Fitur Fullscreen dengan CSS di Blogger. Semoga bermanfaat.