How to add Maintenance mode on Blogger

© Raghavendra Technic | Maintenance mode

Hello Guys! Welcome to Raghavendra Technic 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 /*]]>*/</style> and paste the following CSS Codes just below to it.

/* Maintenance Mode by Raghavendra Technic */ .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.

<!--[ 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 */ 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>

---

Step 7: Now click on Save by clicking this icon

Step 8: That's done!

---

Credit

Created by : Fineshop.

Conclusion

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

If you face any problems in code or have any questions please feel free to ask in comments section or join our Telegram Group for discussion.

Our All Posts Are Protected By DMCA. So Don't Try To Copy Our Posts And Reproduction In Any Way Is Strictly Prohibited! Or else Legal Actions Will Be Taken. © Raghavendra TechniC | All Rights Reserved

© Copyright: Www.raghavendratechnic.blogspot.com

---

Thanks for visiting!

 

Have a nice day!