Cara Menciptakan Halaman Blog Jadi Fullscreen
Membuat tampilan halaman blog menjadi fullscreen - Dengan menerapkan fullscreen pada blog maka tampilannya akan terlihat penuh dengan menyembunyikan tab browser dan bilah addres bar, dengan begitu pengunjung akan lebih fokus pada isi goresan pena pada website kamu.
Biasanya mode fullscreen ini sering kita temukan pada sebuah video menyerupai di youtube. Namun pada kesempatan kali ini aku akan menerapkan mode fullscreen pada sebuah halaman website.
Sayangnya mode fullscreen ini tidak dapat dibentuk secara otomatis saat halaman dibuka. Makara semoga mode fullscreen blog ini bekerja pengunjung harus mengklik sebuah tombol fullscreen semoga tampilan halaman website menjadi full.
Cara menciptakan halaman web fullscreen
Untuk antsipasi jikalau terjadi kesalahan saat mengedit template blog sebaiknya backup terlebih dahulu semoga jikalau terjadi kesalahan kita dapat mengembalikannya lagi.
1. Kode CSS tombol fullscreen dan exit fullscreen
Pertama, untuk mengatur tombol fullscreen dan tombol exit kau copy code CSS dibawah ini.
#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;
} Lihat pada bab css yang aku warnai diatas silahkan kau ubah dengan menyesuaikan tampilan blog kau dimana kau akan menempatkan tombol fullscreen dan exit fullscreen blog.
2. Kode HTML tombol fullscreen dan exit fullscreen
Berikutnya silahkan kau copy instruksi HTML dibawah ini dan pastekan dimana kau akan meletakan tombolnya.
<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>3. Kode Javascript Fullscreen dan Exit Fullscreen
Langkah selanjutnya silahkan kau copy paste instruksi dibawah ini dan simpan diatas instruksi </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>Selesai sudah cara menciptakan tampilan blog atau website menjadi fullscreen.
Sumber https://www.masigun.com/
