Join Our Community Join!

Add Stylish Maintenence Mode In Your Blogger Theme !

Please wait 0 seconds...
Scroll Down and click on Go to Link for destination
Congrats! Link is Generated
Make an Beautiful Under Construction Widget for your blogger website.

Creating Under Construction 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.

codebox for blogger with click to copy



Let's look at this demo.

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 into your Blogger Dashboard.

Step 2: On Blogger Dashboard, click Theme.

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

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

Adding Under Construction Widget Css

Related Posts

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

*/ Under Construction By Techly420 */ .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: Paste the following HTML just below to /header:section

Get HTML

That's done! Now use the following Click Layout And Enable Under Construction widget Now Check Demo Your Site.

You Need A Video Tutorial? Than See This Video.

Do Not Try To Copy Our Site Post Our Site And All Post A DMCA Protection

Related Posts
Hi I am Samir From Bangladesh. I Will Create A Ui/Ux Website And Blogger Theme. I like to playing to code.

Post a Comment

Cookies Consent

This website uses cookies to ensure you get the best experience on our website.