Kenapa dikatakan lebih nyaman?, karena dengan blog kita ditampilkan secara full screen maka tampilan blog kita akan terlihat lebih elegan dan halaman blog terlihat dengan jelas.
Sebenarnya untuk pengunjung blog yang menggunakan laptop atau komputer bisa menekan tombol F11 untuk membuat halaman browser yang sedang dibuka menjadi full screen.
Dan untuk mengembalikan halaman browser yang full screen menjadi normal kembali pada komputer atau laptop caranya sama yaitu dengan menekan tombol F11.
Nah yang jadi masalah utamanya yaitu pengunjung yang menggunakan smartphone, mereka tidak bisa membuat halaman browser yang sedang dibuka menjadi full screen.
Walaupun smartphone sekarang sudah bisa membuat halaman browser menjadi full screen, tapikan tidak semua smartphone bisa, nah oleh sebab itu dengan adanya fitur full screen ini terpasang di blog akan mempermudah pengunjung untuk membuat halaman browsernya menjadi full screen.
Selain itu ada sedikit fungsi lain dari fitur full screen ini yaitu sebagai pelengkap atau pemanis agar blog kita terlihat lebih profesional.
Bagaimana apakah kalian tertarik untuk membuat fitur full screen di blog?, jika ya ikuti panduan membuat dan cara pasang fitur full screen di blog berikut ini.
Cara Membuat Fitur Full Screen Di Blog
Untuk cara membuat fitur full screen di blog kalian cukup mengikuti panduan yang saya bagikan pada kali ini, dan tentunya saya juga menggunakan fitur ini namun pada blog lain yaitu pada bloh www.panduancode.com.
Cara pemasangan fitur full screen di blog sangatlah mudah hanya ada 3 bagian kode yang harus kalian tambahkan ke template blog, yaitu kode CSS-nya untuk mengatur tampilan, kode Javascript untuk membuat fungsi full screen-nya, dan kode untuk tombol full screen dan tombol kembali normal.
1. Buka Edit HTML Template kemudian cari kode </style>, jika sudah ketemu maka tambahkan kode CSS dibawah ini tepat diatas kode </style>.
#exitfull,#openfull{background:0 0;border:none;cursor:pointer;padding:0;margin:0;text-align:center}#exitfull:active,#exitfull:focus,#openfull:active,#openfull:focus{outline:0}#exitfull svg,#openfull svg{vertical-align:middle}#exitfull{display:none}
Jika sudah mari kita lanjut ke tahap kedua yaitu pemasangan Javascript fungsi untuk full screen-nya.
2. Cari kode </body>, jika sudah ketemu maka tambahkan kode Javascript dibawah ini tempat 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>
Jika sudah yuk lanjut ke tahap terakir yaitu tahap pemasangan tombol full screen-nya di blog.
3. Untuk pemasangan tombol full screen di blog sebenarnya bebas-bebas saja paling harus edit sedikit CSS-nya agar tampilannya cocok.
Namun pada panduan kali ini saya menyimpan tombol full screen-nya di navbar (navigasi blog), dan untuk contoh silakan saja buka www.panduancode.com lalu cek menu tools kemudian klik tombol full screen-nya.
Oke langsung saja berikut ini kode tombol fitur full screen di blog.
<li><span><button aria-label='Open Fullscreen' id='openfull' onclick='openFullscreen();'><svg height='24' viewBox='0 0 24 24' width='24'><path d='M5,5H10V7H7V10H5V5M14,5H19V10H17V7H14V5M17,14H19V19H14V17H17V14M10,17V19H5V14H7V17H10Z' fill='#000000'/></svg></button><button aria-label='Exit Fullscreen' id='exitfull' onclick='closeFullscreen();'><svg height='24' viewBox='0 0 24 24' width='24'><path d='M14,14H19V16H16V19H14V14M5,14H10V19H8V16H5V14M8,5H10V10H5V8H8V5M19,8V10H14V5H16V8H19Z' fill='#000000'/></svg></button></span></li><li><span class='money'><svg class='iconsocial' viewBox='0 0 24 24'><path d='M5,6H23V18H5V6M14,9A3,3 0 0,1 17,12A3,3 0 0,1 14,15A3,3 0 0,1 11,12A3,3 0 0,1 14,9M9,8A2,2 0 0,1 7,10V14A2,2 0 0,1 9,16H19A2,2 0 0,1 21,14V10A2,2 0 0,1 19,8H9M1,10H3V20H19V22H1V10Z' fill='#000000'/></svg></span></li>
Nah untuk contoh pemasangannya coba kalian lihat pada gambar dibawah ini.
Atau kalian mau pasang ditempat lain juga bisa cuma hapus saja kode <li> dan </li> nya saja, untuk kode yang ditegahnya jangan dihapus tapi dipindahkan ke tempat yang kamu inginkan.
Sekian saja panduan singkat saya mengenai cara membuat fitur full screen di blog terbaru, semoga panduan ini bermanfaat untuk kalian aamiin.
Dan jika ada pertanyaan mengenai pembahasan atau yang berkaitan dengan blog ini silahkan hubungi adminnya langsung lewat widget WhatsApp.
