Membuat dan memasang tombol fullscreen dengan javascript di blog sangatlah mudah, dengan adanya fitur full screen di blog maka anda maupun pengunjung tidak lagi melihat addresbar pada browser dan hanya kan menampilkan blog anda secara full.
Memasang fullscren di blog pada dasarnya adalah sebuah kode embed dari embed video yang biasanya juga ada kaitan dengan iframe pada media player video.
Fitur tombol fullscreen kali ini sama dengan fitur yang ada pada media player video maupun foto yakni untuk menjadikan full screen bisa menggunakan shortcut F11 dan untuk keluar tombol esc di keyboard.
Baiklah tidak perlu berlama-lama lagi mari kita langsung saja masuk ke tutorial membuat tombol fullscren pada blog dengan mudah.
Cara Membuat Tombol Fullscreen di Blog Menggunakan Javascript
1. Login ke Blogger.com kemudian pilih Tema > Edit HTML.
2. Cari kode ]]></b:skin> dan pastekan kode dibawah ini tepat diatas kode tersebut.
2. Cari kode ]]></b:skin> dan pastekan kode dibawah ini tepat diatas kode tersebut.
3. Selanjutnya copas kode dibawah ini dan simpan dimana anda ingin meletakkan tombol fullscreen ini saya saran di bagian heading.#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;
}
<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>
<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>
Itulah cara membuat dan memasang tombol fullscreen di blog dengan mudah. Menurut anda bagaimana mudah atau tidak? Dengan memasang tombol fullscreen pada blog anda akan sangat berbeda dengan blog lainnya.
Baca Juga: Cara Membuat Pesan Popup Melayang di Blog
Baiklah sampai disini saja artikel kali ini dan apabila ada yang ingin anda tanyakan silahkan komentar saja dibawah dan nanti akan saya respon komentar anda! Sekian dan terima kasih!
