How to Add a Full Screen Button on a Blog

This time I will explain a tutorial how to add a Full Screen Button on Blogger / Blogspot.

For those who have not known, this Full Screen Button is a button that functions to enlarge the Browser screen to "Full Screen" or as large as the Desktop screen.

For those who want to create or install a Full Screen Button on a blog like this article, we need programming languages ​​like HTML, CSS, JavaScript (Js) and jQuery.

How to Add a Full Screen Button on a Blog

1) Login to Blogger > Themes > Edit HTML

2) Save CSS below, above the code </head> or </b:skin>

/* Start -  ADD Full screen in Blogger Share by Top Blog Pk • Mubassir Ali */


.fullscreen, .fullscreenExit{background:#000;color:#fff;text-decoration:none;padding:10px 20px;border-radius:3px}

/* End -  ADD Full screen in Blogger Share by Top Blog Pk • Mubassir Ali */

3) Save jQuery and JavaScript (Js) below, above the code </head> or code </body>

/* Start -  ADD Full screen in Blogger Share by Top Blog Pk • Mubassir Ali */
<script type='text/javascript'>

//<![CDATA[

$(function() {

//Fullscreen

$('a.fullscreenExit').hide();



/* Mid -  ADD Full screen in Blogger Share by Top Blog Pk • Mubassir Ali */
$('a.fullscreen').on('click', function() {var docElement, request;docElement = document.documentElement;request = docElement.requestFullScreen || docElement.webkitRequestFullScreen || docElement.mozRequestFullScreen || docElement.msRequestFullScreen;if(typeof request!='undefined' && request){request.call(docElement);}$(this).hide();$('a.fullscreenExit').show();return false;});

$('a.fullscreenExit').on('click', function() {var docElement, request;docElement = document;request = docElement.cancelFullScreen|| docElement.webkitCancelFullScreen || docElement.mozCancelFullScreen || docElement.msCancelFullScreen || docElement.exitFullscreen;if(typeof request!='undefined' && request){request.call(docElement);}

$(this).hide();$('a.fullscreen').show();return false;});

});

//]]>

</script>

/* End -  ADD Full screen in Blogger Share by Top Blog Pk • Mubassir Ali */

4) Well ! To call or activate the Full Screen Button, we need HTML. 
HTML used:

<a class='fullscreen' href='#' title='click now'>Click Me!</a>



/* In Article -  ADD Full screen in Blogger Share by Top Blog Pk • Mubassir Ali */
<a class='fullscreenExit' href='#' style='display:none;' title='Powered by Top Blog Pk'>Powered by: Top Blog Pk</a>

🔹Put the HTML code above anywhere, which you think fits in that place. 

/* Start -  ADD Full screen in Blogger Share by Top Blog Pk • Mubassir Ali */
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>

/* End -  ADD Full screen in Blogger Share by Top Blog Pk • Mubassir Ali */

Save Theme! Done!

If the above tutorial fails, maybe you need to add the jQuery Library below:
Save jQuery Library above, right above the code </head> then Save Theme .

That's a tutorial on how to add a Full Screen Button on Blogger / Blogspot. Good luck!
Don't forget to follow TopBlog Pk.

Apny Blog Mai Full Screen Button kesy Lgaye? 

See above Article!
         Thanks.