How Add Or Install Fullscreen Button IN Blogger Website

Hello Friends, Welcome to the Mironiyar Blogger tutorial. If you want to know, How Add Or Install Fullscreen Button IN Blogger Blog Website... Then you have come to the right place.
Today I will show you How Add Or Install Fullscreen Button IN Blogger Website?

Add Or Install Fullscreen Button, Android Chrome full screen web app, Full screen button on keyboard, Full screen button laptop, HTML code for full screen web page

How Add Or Install Fullscreen Button IN Blogger Website

Read more :

How Add Or Install Fullscreen Button IN Blogger Blog Website in 9 steps

Step 1: First, login to your Blogger website.

Step 2: Then enter 'Edit Html' in the 'Theme' option on the Blogger website's desboard.

Add Or Install Fullscreen Button, Android Chrome full screen web app, Full screen button on keyboard, Full screen button laptop, HTML code for full screen web page

Step 3: After going to 'Edit Html', click anywhere and search for '</head>' by clicking 'Ctrl + F' on the keyboard.

Step 4: Copy the complete code from the first code box below and paste it over '</head>'.

Step 5: Click anywhere and search for '</body>' by clicking 'Ctrl + F' on the keyboard.

Step 6: Then again copy the complete code from the second code box below and paste it over '</body>'.

Step 7: Click on the Save button to finish the process.

Add Or Install Fullscreen Button, Android Chrome full screen web app, Full screen button on keyboard, Full screen button laptop, HTML code for full screen web page

Add Or Install Fullscreen Button IN Blogger Website: Code-1

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

<style>

#openfull, #exitfull { background: 0 0; border: none; cursor: pointer; padding: 0; margin: 0; text-align: center; top: 12px; position: absolute; right: 50px; } #openfull:active, #exitfull:active, #openfull:focus, #exitfull:focus { outline: 0; } #openfull svg, #exitfull svg { vertical-align: middle; } #exitfull { display: none; }

</style>

Add Or Install Fullscreen Button IN Blogger Website: Code-2

<script>

//<![CDATA[

var elem = document.documentElement; function openFullscreen() { if (elem.requestFullscreen) { elem.requestFullscreen(); } else if (elem.mozRequestFullScreen) { elem.mozRequestFullScreen(); } else if (elem.webkitRequestFullscreen) { elem.webkitRequestFullscreen(); } else if (elem.msRequestFullscreen) { 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>

FAQ

FAQ 1 : How to make a website full screen Android?

Today I will show you How to make a website full screen Android. More...

FAQ 2 : How to make a website full screen ios?

First, login to your Blogger website More...

FAQ 3 : How to make a website full screen Windows 10?

Then again copy the complete code from the second code box below and More...

We hope you enjoy this tutorial. If you have any problems with this tutorial, please comment.

1 Comments

Hay, Please do not enter any spam link in the Comment Box...

Post a Comment
Previous Post Next Post