Umumnya fitur Fullscreen digunakan pada sebuah embed, misalnya embed video. Namun, kali ini anda bisa merasakannya pada blog sobat. Fitur fullscreen ini berfungsi menutup bilah address bar dan tab browser agar pengunjung terfokus pada halaman blog dan tampilan blog akan terasa seperti layaknya sebuah aplikasi.
Kekurangannya, anda tidak bisa membuat fitur fullscreen ini bekerja otomatis saat membuka blog karena browser akan mengabaikannya, fitur fullscreen ini juga tidak bisa dibuat dengan cache blog yang artinya saat anda membuka halaman baru maka anda harus mengaktifkannya kembali. Jadi, fitur fullscreen ini harus melibatkan Pengguna dengan aksi menekan tombol fullscreen pada PC atau lebih mudahnya dengan menekan tombol F11 pada keyboard PC.
Bagaimana dengan perangkat mobile? Anda bisa menggunakan fitur fullscreen ini dengan menekan tombol fullscreen yang ada pada blog. Ketika pengguna mengklik ikon fullscreen blog maka halaman akan terbuka otomatis fullscreen, artinya pengguna membuka blog seperti sebuah aplikasi, tanpa address bar browser terlihat di atas blog.
Tutorial ini terinspirasi dari suhu saya pemilik blog kompiajaib namun saya modifikasi sekian rupa agar lebih sedap dipandang, user friendly serta mudah diterpakan disegala template. Jadi, saya dapat menjamin bahwa tutorial ini mudah digunakan oleh blogger pemula sekalipun.
Perbedaan fitur fullscreen besutan kompiajaib dengan fitur fullscreen faronesia adalah pada model penempatanya, faronesia memodifikasi fitur fullscreen menjadi sebuah tombol melayang layaknya tombol back-to-top dengan tujuan memudahkan pengguna saat ingin membutuhkannya.
Apakah fitur fullscreen mempengaruhi loading blog? Jawabannya tidak, karena fitur fullscreen buatan saya ini termasuk script yang ringan dan pasti aman jika diterpakan pada blog sobat.
Sebelum mempraktekkannya, saya harap anda sudah membackup template yang akan dimodifikasi. Mengapa demikian? Sebab, jika nanti terdapat hal-hal yang tidak anda inginkan seperti kode tidak cocok, salah menempatkan kode, lupa menempatkan kode, template error, atau bahkan template rusak maka anda masih memiliki cadangannya.
Cara Membuat Fitur Fullscreen pada Blog
- Masuk ke dashboard blog
- Lalu masuk ke menu tema blog
- Kemudian klik edit HTML
- Cari kode seperti ini ]]></b:skin> atau </style>
- Tempelkan kode CSS berikut dibawah ini tepat diatas kode ]]></b:skin> atau </style>
/** FULLSCREEN BY FARONESIA.COM **/
#openfull, #exitfull {
position:fixed;
float:left;
z-index:201;
bottom:25px;
Left:20px;
color: #fff;
font-weight: bold;
font-size: 15px;
text-transform: uppercase;
padding:10px 10px 10px;
border-radius: 50px;
background: #19b5fe;
text-align: center;
width: auto;
box-shadow: 4px 4px 4px rgba(0 , 0 , 0 , 0.12) , 0 4px 4px 4px rgba(0 , 0 , 0 , 0.12);
-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none
}
#openfull:active, #exitfull:active, #openfull:focus, #exitfull:focus {
outline: 0;
}
#exitfull {
display: none;
}
- Lalu letakkan kode dibawah ini tepat dibawah kode <div id='post-wrapper'>
<div class='Open Fullscreen' id='openfull' onclick='openFullscreen();'>Fullscreen mode</div>
<div class='Exit Fullscreen' id='exitfull' onclick='closeFullscreen();'>Normal mode</div>
- Selanjutnya letaakan Js 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>
- Selanjutnya simpan dan terapkan template yang sudah anda modifikasi
- Terakhir, lihat hasilnya
Demikianlah mengenai Cara Membuat Fitur Fullscreen pada Blog semoga bermanfaat untuk para pembaca dimanapun anda berada. Jika menurut anda artikel ini bermanfaat jangan lupa share karena dengan share artikel ini sama halnya anda berpartisipasi dalam mengembangkan website faronesia.com.