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
- Langkah pertama, silahkan masuk dashboard blogger sobat dulu
- Masuk menu Tema > Edit HTML > Cari kode ]]></b:skin>
- 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; }
- 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>
- 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 - 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.
Belum ada Komentar untuk "Membuat Tombol Fullscreen di Blog dengan mudah"
Posting Komentar
Jangan malu bertanya!