All Tutorials

Your One-Stop Destination for Learning and Growth

How to Create an "Under Construction" Sign for Your Blog: A Step-by-Step Guide

Creating an "Under Construction" sign for your blog can be a simple yet effective way to let your visitors know that you're currently working on it and to come back later. In this post, we'll walk through the process of creating an "Under Construction" sign using common blogging platforms such as Blogger, WordPress, and Wix.

Blogger

  1. Log in to your Blogger account and go to the Dashboard.
  2. Select the blog for which you want to create the "Under Construction" sign.
  3. Click on "Template" and then select "Customize".
  4. In the left-side menu, click on "Elements".
  5. Under "Layout", add a new HTML widget by clicking on the "Add" button.
  6. Replace the existing code in the Content box with the following:
<style type="text/css">
body {
height: 100%;
margin: 0;
}
.under-construction {
width: 100%;
height: 100%;
background-color: #cccccc;
display: table;
position: fixed;
z-index: 500;
}
.under-construction img {
position: absolute;
left: 50%;
top: 50%;
width: 200px;
height: 200px;
margin: -100px 0 0 -100px;
}
</style>
<div class="under-construction">
 <img src="https://www.example.com/underconstruction.gif" alt="Under Construction" title="Under Construction"/>
</div>
</body>
</html>

Replace https://www.example.com/underconstruction.gif with the URL of your "Under Construction" GIF image. Save the changes and preview your blog to see the new sign in action.

WordPress

  1. Log in to your WordPress dashboard and go to the Appearance tab.
  2. Select the theme you're using or create a child theme.
  3. Go to the functions.php file and add the following code:
function under_construction() {
?><style type="text/css">
body {
height: 100%;
margin: 0;
}
.under-construction {
width: 100%;
height: 100%;
background-color: #cccccc;
display: table;
position: fixed;
z-index: 500;
}
.under-construction img {
position: absolute;
left: 50%;
top: 50%;
width: 200px;
height: 200px;
margin: -100px 0 0 -100px;
}
</style><?php
?><div class="under-construction">
 <img src="https://www.example.com/underconstruction.gif" alt="Under Construction" title="Under Construction"/>
</div><?php
}
add_action('get_header', 'under_construction');

Replace https://www.example.com/underconstruction.gif with the URL of your "Under Construction" GIF image. Save the changes and visit your blog to see the new sign in action.

Wix

  1. Log in to your Wix account and go to the Editor for the blog you want to edit.
  2. Click on the blog to select it, then click on the "+" sign in the left panel and add a new "Image" element.
  3. Upload or use an existing "Under Construction" GIF image.
  4. Position and size the image as desired.
  5. Add some text above or below the image to inform your visitors that you're working on the blog.
  6. Publish the changes and preview your blog to see the new sign in action.

That's it! You now have an "Under Construction" sign up and running on your blog. Happy blogging!

Published July, 2015