How to Make a Fullscreen Button on a Blog with JavaScript

On this occasion TopBlog Pk will share a tutorial on Making a Fullscreen Button on a Blog , before I have posted a tutorial on Making a Scrollbar Presentation . With this feature visitors no longer see the address bar and browser tabs, so that it will add to the focus of the visitors when they are reading our content.

This mode is usually used on an embed, such as on embed videos and photos. But this time I will make this mode on the blog page.

Wow, can that be?

Very able, even create a unique blog that we manage, but it depends on taste. If you don't like it, don't be forced to fear making friends expressions ... 

🔹If any of you who are interested in this tutorial, please refer to the following steps that I will explain.

How to Make a FullScreen Button on a Blog

1. Open your Blogger dashboard.
2. Select the Themes menu > Edit HTML .
3. Then find the code

]]></b:skin> and paste the code below right ABOVE the code.

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

}

For the red code, you can change it according to the blog or according to the code placement".

4. Next, copy the code below and paste it wherever you want.

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

5. Copy the code below and paste ABOVE

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

Finally, don't forget to Save .

How easy is it not for a tutorial How to Make Fullscreen Buttons on a Blog with JavaScript . Until here first, if there are questions please comment in the comments column.

 Hopefully useful, that's all and thank you.