How To Make A Fullscreen Button On Blogger

Hello Blogmate's How are you ? I hope you are doing great. Most of you somehow will have noticed on many of blogs they have full screen option on their blogs in blogger.In this article, I will show you how to add full screen functionality to Blogger.

What Is Full Screen Mode ?

Full screen mode is a mode that can display the entire screen. In general, this function is often used not only for photos but also for videos.

In Fact, this feature already exists on your laptop or computer by simply pressing the F11 key on the laptop keyboard or on the computer keyboard of friends. Unfortunately visitors who use smartphones, they can't make the browser page that is being opened full screen. 

Even though smartphones are now sophisticated and can make the browser page full screen, but not all smartphones are capable, so the full screen feature installed on your blog will make it easier for your visitors to switch the browser page to full screen mode.  

So, if you add this function, you can use it on your smartphone or computer. Well, for that matter, let me briefly explain how to set up this full screen feature in Blogger.

How to install fullscreen button on blogger

• Login to your respective blogger account 
• Then select  Edit HTML 
• Copy the css code below and place it above the code ]]></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}

• If you have put the javascript code below and place it above the code </body> Or <!--</body>--></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 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>

• And put this safelink icon code where you want, you can group it in the icon header section

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

That's all the tutorial in this article, hopefully it will be useful and see you in the next article

Conclusion

So today we have discussed about how to add full screen mode on blogger. I hope you like this post kindly do give a comment below. If you are having problem implementing this kindly contact me. Do visit regularly for getting more updates like this.