Cara Menambahkan Full Screen Button di Blog

Kali ini saya akan menjelaskan tutorial bagaimana caranya menambahkan Full Screen Button di Blogger / Blogspot.

Buat yang belum ngeh, Full Screen Button ini adalah sebuah tombol yang berfungsi memperbesar layar Browser menjadi "Full Screen" atau penuh sebesar layar Desktop.

Bagi yang ingin membuat atau memasang Full Screen Button di blog sebagaimana artikel ini, kita membutuhkan bahasa pemrograman seperti HTML, CSS, JavaScript (Js) dan jQuery.

Cara Menambahkan Full Screen Button di Blog

Login ke Blogger > Tema > Edit HTML

Simpan CSS di bawah ini, di atas kode </head> atau </b:skin>

.fullscreen, .fullscreenExit{background:#000;color:#fff;text-decoration:none;padding:10px 20px;border-radius:3px}

Simpan jQuery dan JavaScript (Js) di bawah ini, di atas kode </head> atau kode </body>

<script type='text/javascript'>
//<![CDATA[
$(function() {
//Fullscreen
$('a.fullscreenExit').hide();
$('a.fullscreen').on('click', function() {var docElement, request;docElement = document.documentElement;request = docElement.requestFullScreen || docElement.webkitRequestFullScreen || docElement.mozRequestFullScreen || docElement.msRequestFullScreen;if(typeof request!='undefined' && request){request.call(docElement);}$(this).hide();$('a.fullscreenExit').show();return false;});
$('a.fullscreenExit').on('click', function() {var docElement, request;docElement = document;request = docElement.cancelFullScreen|| docElement.webkitCancelFullScreen || docElement.mozCancelFullScreen || docElement.msCancelFullScreen || docElement.exitFullscreen;if(typeof request!='undefined' && request){request.call(docElement);}
$(this).hide();$('a.fullscreen').show();return false;});
});
//]]>
</script>

Nah! Guna memanggil atau mengaktifkan tombol Full Screen Button, kita membutuhkan yang namanya HTML. HTML yang digunakan:

<a class='fullscreen' href='#' title='Layar Penuh'>Click Me!</a>
<a class='fullscreenExit' href='#' style='display:none;' title='Keluar Layar Penuh'>Keluar dari Layar Penuh</a>

Letakkan kode HTML di atas di mana saja, - yang menurut kalian cocok ditempatkan di tempat tersebut. Contohnya, di element Footer misalnya.

Simpan Tema! Selesai!

Jika tutorial di atas gagal, barangkali kalian perlu menambahkan jQuery Library di bawah ini:

<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>

Simpan jQuery Library di atas, tepat di atas kode </head> lalu Simpan Tema.

Itulah tutorial bagaimana caranya menambahkan Full Screen Button di Blogger / Blogspot. Good luck!