Cara Membuat Tombol Fullscreen Di blogger

Mode Fullscreen merupakan mode untuk membuat tampilan layar menjadi penuh umumnya fitur ini sering digunakan di vidio,dan adapun foto.

Jadi di artikel kaliini saya akan membuat cara menambahkan fitur Mode Fullscreen di Blogger.

Sebenarnya fitur ini sudah ada di laptop maupun komputer kalian dengan cara hanya menekan tombol F11 di keyboard laptop ataupun di keyboard komputer teman teman.

Sayangnya pengunjung yang menggunakan smartphone, mereka tidak bisa membuat halaman browser yang sedang dibuka menjadi full screen.

Walaupun smartphone sekarang sudah canggih-canggih dan 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.

jadi dengan menambahkan hitur ini teman teman bisa menggunakanya di smartphone maupun di komputer teman-teman.

Nah,dikesempatan kaliini saya akan menjelaskan secara singkat bagaimana cara memasang fitur Mode Fullscreen ini di Blogger.

Demo

cara Memasang tombol Fullscreen di blogger

login ke akun belogger temen-temen masing masing

kemudian pilih Tema > Edit HTML

Salin kode css dibawah ini dan letakkan di atas kode ]]></b:skin>

#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 letakkan kode javascript di bawah ini dan letakkan di atas kode </body> Atau &lt;!--</body>--&gt;&lt;/body&gt;

<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 dan Opera */ elem.webkitRequestFullscreen(); } else if (elem.msRequestFullscreen) { /* IE Atau 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>

dan letakkan kode icon safelink ini di tempat yang kalian inginkan, kalian bisa kelompokkan di bagian icon header.

jika menggunakan template median-ui v1.5 bisa meletakkannya setelah kode <!--[ Profile button ]--> lewati kode </b:if> pertama agar tidak tergapit tag conditional homepage.

<span><button aria-label='Mode 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='Mode Tidak 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>
 

itu saja tutorial di artikel kalini semoga bermanfaat dan sampai jumpa di artikel selanjutnay