How to Create a Professional and Attractive 404 Error Page on Blogger Blogs

   Last year (2012), Google upgraded the Blogger Blogging platform by introducing some search preferences which includes "Errors and Redirections" thereby making Blogger more optimized. Briefly, the "404 Error" is an error page that appears when a broken link is clicked and the error page tells the visitor that the page clicked no longer exist or is deleted. This error page loads inside the post body and it displays an unattractive page like the one in the screenshot below – 

   As you can see in the screenshot, the page is not really professional so now I will be teaching you how to make your blog’s error page attractive and not only that, it will also redirect your readers to go for something else since the page they are looking for is not found or deleted. Now, have it in mind that The 404 error page will prompt your readers that they have landed in a wrong page thereby providing them with three options which are:

1. Go back to the previous page (Readers will be redirected to the page they were viewing before) 
2. Report this problem to us (Readers will be redirected to the Contact page on your Blog so they can let you know about the broken link)
3. Go to homepage (Readers will be redirected to the Homepage) 

   

The 404 Error page on Stevenbergy.Com.Ng

 How will I add this 404 Error page to my Blog?

1. Log in to Blogger > Settings > Search Preferences.
2. Scroll down to the Errors and Redirections Category.
3. Click on Edit in front of Custom Page Not Found.
4.  Now, Paste the code below inside the text box -
   <!-- MBT Default Template -->
   <div class='MBT-404-box'>
     <p style='line-height: 30px'><strong>
   <font color='#ff0000' size='5'>
   Oops!!!
   </font> <font color='#666666'>
   It seems like you have clicked a broken link or a Page that no longer exist. Kindly do one of the followings:
   </font></strong></p>
     <ol style='line-height: 25px'>
       <li><a href='javascript:history.go(-1)'>&#171; Go back</a> </li>
       <li>Report the Problem to us by <a href='http://www.stevenbergy.com.ng/p/contact-us.html'>Clicking Here</a>&#160;&#160;&#160; </li>
       <li>Go to Homepage by<a href='http://www.stevenbergy.com.ng'>Clicking Here</a>
         <br/></li>
     </ol>
     <p>
       <br/>
       <br/>
       <br/></p>
     <p align='center'><font color='#0080ff' style='font-size: 150px'><strong>404</strong></font></p>
     <p>&#160;</p>
     <p align='center'/>
     <p align='center'><font size='7'>Page Not Found!!!</font></p>
   </div>
5.  You should make the following changes to make the 404 page match your blog perfectly -  

•  Replace http://www.stevenbergy.com.ng/p/contact-us.html with your Blog's Contact Us or Contact Me page link.
• Replace  http://www.stevenbergy.com.ng with your Blog's Homepage link.
•  And you can change the text highlighted in red to whatever that suits you most.

     6. After adjusting and customizing this text to your satisfaction, click on Save.

____________________________________________________________________________

1. Now, Go to Template > Edit HTML.
2. Search for ]]></b:skin> .
3. Then, paste the code highlighted below (4); immediately below ]]></b:skin>.
4.  <b:if cond='data:blog.pageType == &quot;error_page&quot;'>
   <style type='text/css'>
   .status-msg-wrap {
       font-size: 100%;
       margin: none;
       position: static;
       width: 100%;
   }
   .status-msg-border {
       display:none
   }
   .status-msg-body {
       padding: none;
       position: static;
       text-align: inherit;
       width: 100%;
       z-index: auto;
   }
   .status-msg-wrap a {
       padding: none;
       text-decoration: inherit;
   }
   .MBT-404-box {
     background:#FFFFFF;
     width:98%;
     margin:10px 0px;
     padding:20px 10px;
     border:1px solid #ddd;
     -moz-border-radius:6px;
     -webkit-border-radius:6px;
     border-radius:6px;
     box-shadow: 5px 5px 5px #CCCCCC;
   }
   </style>
   </b:if>
5.  Save, Now you are done.

   To view your new 404 Error page and to check if its working perfectly, just type any invalid link of your blog in your browser and hit ENTER. For example, www.yourblog.com/blahblahblah or yourblog.blogspot.com/ofeuvshfeo. What do you think about this 404 Error Page ? Do you have any problem while adding it to your blog ? Feel free to use the comment box provided below in case you have any question, suggestion, contribution or opinion about it and don't forget to share this post with your friends using the share button below.

 

Hope This Helps!!!