Menambahkan Tombol Fitur Full Screen Pada Blog

Terkadang saat kita membuka browser dan menuju ke sebuah situs web, kita sering kali merasa terganggu dengan navigasi bar bawaan browser terutama pada browser Opera yang memiliki bar bagian atas dan bawah yang semakin mempersempit tampilan situs web jika dikunjungi melalui mobile device ditambah lagi jika yang dikunjungi adalah blog saya yang juga memiliki navigasi mengambang dibawah dan di atas,,, makin sempit lah pandangan pengunjung terhadap isi konten yang ditampilkan.

Untung saja Opera Browser memiliki fitur full screen yang bisa di gunakan ketika menemui situs web yang sempit seperti blog saya hehe... dari situlah saya terpikir untuk menerapkan fitur tersebut pada blog ini agar pengunjung bisa leluasa membaca dan saya tidak perlu menghilangkan elemen yang sudah terpasang. sebagai contoh kamu bisa lihat fitur tersebut dibagian menu samping bagian bawah, atau kamu bisa lihat demo berikut.

DEMO

Nah begitulah kurang lebih penampakan dari tombol fullscreen yang akan saya bagikan pada artikel kali ini. Jika kalian tertarik untuk menerapkannya juga ke blog / website kamu silahkan simak tutorial singkat berikut.

Skrip yang dibutuhkan

HTML / doble click to select

<div><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></div>

CSS / doble click to select

#openfull, #exitfull { background: #000; border: none; cursor: pointer; padding: 0; margin: 0; text-align: center; position: fixed; z-index: 99; left: 0; top: 200px; width: 55px; height: 55px; line-height: 55px; border-radius: 0 50px 50px 0; } #openfull:active, #exitfull:active, #openfull:focus, #exitfull:focus { outline: 0; } #openfull svg, #exitfull svg { vertical-align: middle; } #exitfull { display: none; }

JavaScript / doble click to select

<script>//<![CDATA[ var elem = document.documentElement; function openFullscreen() { if (elem.requestFullscreen) { elem.requestFullscreen(); } else if (elem.mozRequestFullScreen) { elem.mozRequestFullScreen(); } else if (elem.webkitRequestFullscreen) { elem.webkitRequestFullscreen(); } else if (elem.msRequestFullscreen) { 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>

Di atas saya siapkan 3 bagian skrip yang terdiri dari HTML CSS dan JavaScript, ada dua cara yang bisa kamu terapkan yaitu melalui edit html atau meletakkan nya didalam widget.

Menambahkan Via Widget

Untuk cara yang pertama yaitu menyimpan dalam widget kamu perlu menambahkan <style type='tex/css'> di atas skrip CSS yang saya sediakan diatas kemudian dibawahnya tambahkan penutup style </style> hingga hasilnya akan seperti pada gambar berikut.

Jika sudah sekarang masuk ke dashboard pilih tataletak kemudian tambahkan widget pilih HTML/JavaScript lalu tempel semua skrip HTML CSS dan JavaScript tersebut didalam widget tersebut lalu simpan widget dan lihat hasilnya.

Baca Juga : Cara Menambahkan Widget Baru Pada Blog

Menambahkan Via Edit HTML

Untuk menambahkan skrip via Edit html tidak perlu atribut tambahan, kamu tinggal pergi ke opsi Tema kemudian klik tanda panah kebawah disamping opsi Sesuaikan lalu pilih Edit html

Kemudian cari tag ]]></b:skin> Jika kamu menggunakan ponsel saat edit html baca dulu artikel cara Memunculkan Fitur Pencarian Saat Edit Template Blog Di HP Android lanjut jika sudah ketemu paste kan skrip CSS nya tepat di atas tag ]]></b:skin>, kemudian cari lagi tag </body> lalu paste skrip HTML dan JavaScript nya tepat di atas </body> selanjutnya simpan template dan lihat hasilnya.

Ok begilah cara menambah fitur full screen pada blog / website semoga bermanfaat buat kamu dan pembaca lainnya dan jika masih ada yang belum jelas pada artikel di atas silahkan tanyakan di kolom komentar. Terimakasih.