How to Make Full Screen Features with JavaScript on Blogger

Fullscreen mode is a mode or display that displays the entire screen on the device. Generally this mode is often used in the video or photo features.



However, this time we will install and use it on a blog or website, so that it no longer displays the Address Bar or Menu Tab in the browser. So we are more focused on the contents of the article or the content of the website.



Well, on this occasion the author will give a short tutorial on How to Make Fullscreen Features with JavaScript on Blogger.



Fullscreen feature that we will use using CSS and JavaScript, but take it easy, this feature will not be too burdensome for web loading. If you are interested in making it, you can see in the following tutorial.

How to Make Fullscreen Mode on Blogger

1. Log in to your Blogger account → Themes → Edit HTML.

2. Copy below code and paste the CSS Style code before the code]]> </ b: skin> or </style>

<style type='text/css'>
<!-- Css Code Fullscreen by Meeran24x7.com -->
#fullopen,
#exitclose {
    background: 0 0;
    border: none;
    cursor: pointer;
    padding: 0;
    margin: 0;
    text-align: center;
    width: 30px;
    height: 55px;
    line-height: 55px;
    float: left;
}
#fullopen:active,
#exitclose:active,
#fullopen:focus,
#exitclose:focus {
    outline: 0;
}
#fullopen svg,
#exitclose svg {
    vertical-align: middle;
}
#exitclose {
    display: none;
}
</style>

3. Copy below code and Enter the JavaScript code before the code </body>

<script>
//<![CDATA[
var elem = document.documentElement;
function fullopenscreen() {
  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("fullopen").style.display = "none";
  document.getElementById("exitclose").style.display = "block";
}

function closeFullscreen() {
  if (document.exitclosescreen) {
    document.exitclosescreen();
  } else if (document.mozCancelFullScreen) {
    document.mozCancelFullScreen();
  } else if (document.webkitexitclosescreen) {
    document.webkitexitclosescreen();
  } else if (document.msexitclosescreen) {
    document.msexitclosescreen();
  }
  document.getElementById("fullopen").style.display = "block";
  document.getElementById("exitclose").style.display = "none";
}
//]]>
</script>

4. Finally, paste the caller code markup below. For placement, you can adjust each other's desires. For example, here I put it in the Header section.

<div><button aria-label="Open Fullscreen" id="fullopen" onclick="fullopenscreen();"><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="fullexit" onclick="closeFullscreen();"><svg width="24" height="24" viewBox="0 0 24 24"><path fill="#fff" d="M14,14H19V16H16V19H14V14M5,14H10V19H8V16H5V14M8,5H10V10H5V8H8V5M19,8V10H14V5H16V8H19Z" /></svg></button></div>

5. Save the Theme.



Here is a display of Fullscreen Features that have been installed on Blogger.



That's the tutorial on How to Make Fullscreen Features with JavaScript on Blogger that I have shared with you. If you have questions about this article, don't hesitate to comment below. Good luck.