Today, we will make an "Under Maintenance" or "Under Construction" website page for Blogger blogspot. By default, other CMS like the WordPress, Joomla, etc has this feature. But Blogger do not have one.


I decided to make a simple tutorial to be able to do the stuff using the Blogger platform. Just follow the tutorial below.

1. First, you need to make a blogspot and name it as Under Maintenance.
2. After making step 1, go to the Theme of your Under Maintenance blog and press EDIT HTML. Remove all the html code inside your theme and replace it with the given code below.

<?xml version="1.0" encoding="UTF-8" ?>
<html xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
 <head>
  <meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'/> 
  <b:if cond='data:blog.isMobile'> 
   <meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/> 
  <b:else/> 
   <meta content='width=1100' name='viewport'/> 
  </b:if> 
  <b:include data='blog' name='all-head-content'/>
  <title><data:blog.pageTitle/></title>
  <b:skin><![CDATA[
   /* 
    body { 
     font: $(body.font); 
     color: $(body.text.color); 
     background: $(body.background); 
     padding: 0 $(content.shadow.spread) $(content.shadow.spread) $(content.shadow.spread); 
     $(body.background.override) margin: 0; 
     padding: 0; 
    }
   
  ]]></b:skin>
 </head>
 <body>
  <b:section class='main' id='main' showaddelement='yes'/>
  <!-- Please Keep The Credits -->
   <center><h1>Sharingthat.xyz is Under Maintenance.</h1><img src='https://groceryzone.ca/wp-content/uploads/2018/12/index.png'/></center>
 </body>
</html> 2. Just replace the Sharingthat.xyz with your own website URL. And you can also replace the image source for the "Under Maintenance" logo.

3. After doing the changes, save your Theme.

4. Now, go to the website or blog that you want to put under maintenance.

5. Click Theme > Edit HTML.

6. Press Ctrl + F and type <meta

7. Just copy the given code below just above or below the other meta tags that you have in your template.

  <meta content='0; url = https://www.Sharingthat.xyz' http-equiv='refresh'/> You can replace the value 0 with 1 or more. It is the number of second that dictates how fast your page will redirect to the maintenance page. You can also leave it as it is. Also replace "https://www.Sharingthat.xyz" with your own website/blog URL.

8. When done, save your template.

9. You can now, do all the maintenance that needed to be done on your blog or website now.

10. Done

NOTE:
a. When your blog is already done with the maintenance, just remove the meta tag given at step No.7 and then save your template.

SEE LIVE DEMO HERE