How to add Maintenance mode on Blogger

in this article I am going to give you Maintenance codes for Blogger. So let's check.

Make an Beautiful Under Construction Widget for your blogger website.

Creating Maintenance mode for Blog Posts will not require much knowledge about HTML, CSS because I have already designed it for you. What you need to do is to implement the codes at right place in your Blogger Theme XML.

How to add a Maintenance codes in Blogger?

Important!Before we start adding codes in XML, I will recommend you to take a Backup of your current theme. By chance if any problem occurs, you can restore it later.

Step 1: First of all Login to your Blogger Dashboard.

Step 2: On Blogger Dashboard, click Theme.

Step 3: Click the arrow down icon next to 'customize' button.

Step 4: Click Edit HTML, you will be redirected to editing page.

Step 5: Now search the code ]]><b:skin> and paste the following CSS Codes just below to it.

/* Maintenance Mode by (T_MK) */ .mtm{position:fixed;left:0;right:0;top:-35%;bottom:-35%;display:flex;align-items:center;justify-content:center;background:var(--bodyB);transition:all .5s ease;-webkit-transition:all .5s ease;visibility:visible;opacity:1;z-index:499} .mtm.hdn{visibility:hidden;opacity:0} .mtmC{max-width:450px;padding:20px;text-align:center} .mtmH{font-weight:700;font-size:1.5rem;font-family:var(--fontBa);margin-bottom:10px} .mtmD{margin-bottom:10px} .mtm .clock{width:100%;font-size:25px;text-align:center;font-family:var(--fontBa);font-weight:400;position:relative;left:0;right:0} .mtm .tBox{width:65px;height:65px;margin:3px;padding-top:8px;background-color:#f4efff;border-radius:20px;display:inline-block} .mtm .unit{display:block;font-size:10px;margin:auto;font-family:var(--fontB);opacity:0.8} .drK .mtm{background:var(--darkB)} .drK .mtm .tBox{background:var(--darkBa)}

---

Step 6: Now search the code <header class='header' id='header'>  or  <!--[ Header section ]--> and paste the following Codes just below to it.

<b:tag class='mntnM' name='div'> 
  <!--[ Maintenance Mode ]--> 
 <b:section id='maintenance-mode-by-raghavendratechnic' maxwidgets='1' showaddelement='false'> 
  <b:widget cond='!data:view.isPreview' id='HTML108' locked='true' title='Site is Under Maintenance' type='HTML' version='2' visible='false'> <b:widget-settings> <b:widget-setting name='content'>Please come back again in...&lt;script type=&#39;text/javascript&#39;&gt;/*&lt;![CDATA[*/ const maintenanceEndOn = &#39;Sep 07 2022 00:00:00 GMT+05:30&#39;;/*]]&gt;*/&lt;/script&gt;</b:widget-setting> </b:widget-settings> 
    <b:includable id='main'> 
    <div class='mtm' id='maintainCont'> 
    <div class='mtmC'>
   <div class='mtmH'><data:title/></div> <div class='mtmD'><data:content/></div> 
 <div class='clock'> 
   <div class='tBox'> <span class='days'>00</span> <span class='unit'>Days</span> </div> 
  <div class='tBox'> <span class='hours'>00</span> <span class='unit'>Hours</span> </div> 
  <div class='tBox'> <span class='minutes'>00</span> <span class='unit'>Minutes</span> </div> 
  <div class='tBox'> <span class='seconds'>00</span><span class='unit'>Seconds</span> 
  </div></div></div></div> 
      <script>/*<![CDATA[*/ /* Maintenance Mode by (T_MK) */ if (qSel('#maintainCont')!=null){const dayDisplay=qSel('.tBox .days'),hourDisplay=qSel('.tBox .hours'),minuteDisplay=qSel('.tBox .minutes'),secondDisplay=qSel('.tBox .seconds'),maintainCont=qSel('#maintainCont'),maintainEndDate=new Date(maintenanceEndOn);let maintenanceDone=!1;const updateTimer=()=>{let e=new Date;var t=maintainEndDate.getTime()-e.getTime();t<=1e3&&(maintenanceDone=!0);var n=36e5,a=Math.floor(t/864e5),o=Math.floor(t%864e5/n),n=Math.floor(t%n/6e4),t=Math.floor(t%6e4/1e3);dayDisplay.innerText=a<10?'0'+a:a,hourDisplay.innerText=o<10?'0'+o:o,minuteDisplay.innerText=n<10?'0'+n:n,secondDisplay.innerText=t<10?'0'+t:t};setInterval(()=>{maintenanceDone?addCt(maintainCont,'hdn'):updateTimer()},1000);}; /*]]>*/</script> 
          </b:includable>
        </b:widget> 
      </b:section>
      </b:tag>

---

Step 7: Now click on Save by clicking this icon

Step 8: That's done!

Conclusion

In this article I have made a tutorial on How to add Maintenance mode on Blogger. I hope you have liked it and Please do share with your friends and follow our blog for more