Cara Terbaru Membuat Tombol Full Screen Yang Responsive Di Blogger

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.

Lapakinfo.net

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 Biru 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. Untuk 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.
Seseorang yang lebih suka menulis dan membagikan apa yang di tuliskan agar dunia tahu.
  • Facebook
  • WhatsApp
  • Instagram
  • Tampilkan Komentar
    Sembunyikan Komentar

    Belum ada Komentar untuk "Cara Terbaru Membuat Tombol Full Screen Yang Responsive Di Blogger"

    Posting Komentar

    Berkomentarlah dengan bahasa yang baik dan sopan

    - Promo Link
    - Berkata kasar, rasis dan provokator
    - Spaming

    Harap lapor jika ada link rusak dalam artikel

    Iklan Atas Artikel

    Iklan Tengah Artikel 1

    Iklan Tengah Artikel 2

    Iklan Bawah Artikel