How to Display "Website Under Maintenance" Notification on Your Blog

Having a "Website Under Maintenance" notification can greatly improve the user experience on your blog by informing visitors about ongoing updates or issues. In this article, we'll guide you through adding a maintenance notification to your Blogger site.

1. Access Your Blogger Dashboard:
   • Log in to your Blogger account.
   • Select the blog where you want to add the maintenance notification.
2. Go to Layout:
   • Navigate to the "Layout" section from the left sidebar.
3. Add a Gadget:
   • Click on "Add a Gadget" where you want the notification to appear (usually in the header or sidebar).
   • Choose the "HTML/JavaScript" gadget.
4. Insert the Code:
   • Scroll down and copy the codes below and paste them into the gadget content box.
5. Save and Arrange:
   • Save the gadget and arrange it to your preferred location.
   • Preview your blog to ensure the notification appears as expected.

<div id="maintenance-notification" style="display: none;">

<div style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,1); z-index: 9999; color: white; text-align: center; padding-top: 20%;">
    <h2>Website Under Maintenance</h2>
        <p>We will be back soon!</p>
        <h2 id="timer"></h2>
    </div>
</div>
<!--[ Website Under Maintenance by BlogSeba ]-->

<style>
    #maintenance-notification {
        display: none;
    }
</style>

<script>
    // Set the end time for the maintenance
    var endTime = new Date("Jul 7, 2025 12:00:00").getTime();

    var maintenanceNotification = document.getElementById("maintenance-notification");
    maintenanceNotification.style.display = "block"; // Show the maintenance notification

    // Update the count down every 1 second
    var x = setInterval(function() {
        var now = new Date().getTime();
        var distance = endTime - now;

// Website Under Maintenance by BlogSeba

        var days = Math.floor(distance / (1000 * 60 * 60 * 24));
        var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
        var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
        var seconds = Math.floor((distance % (1000 * 60)) / 1000);

        document.getElementById("timer").innerHTML = days + "d " + hours + "h "
        + minutes + "m " + seconds + "s ";

        if (distance < 0) {
            clearInterval(x);
            maintenanceNotification.style.display = "none"; // Hide the maintenance notification
        }
    }, 1000);
</script>

Conclusion

By following these simple steps, you can keep your visitors informed about your site's status. This proactive approach helps maintain a good user experience even during downtime.

Copyright Warning!
Reproduction, duplication, or distribution of any part of this blog is strictly prohibited without permission. Legal action may be taken for any unauthorized use or reproduction.

Go to Link