Create Custom 404 Error Page in Blogger

Today we are going to begin the helpful a part of search preferences Errors and Redirections. Each skilled website uses the custom 404 e...

Today we are going to begin the helpful a part of search preferences Errors and Redirections. Each skilled website uses the custom 404 error pages to make his web more attractive and Friendly with the search engine. We are able to add the 404 page coding into "custom page not found", In old blogger pattern we cannot be able to append the codes in this section, because this section are not available at that time, but afterwards Google and blogger introduce this section, and each blogger's start to understand about the search preferences. Here is the definition of 404 pages.

What is Custom 404 Page

404 pages are designed to show the visitors that this page are deleted or removed by his admin. Suppose we write protechnify.blogspot.com/blablabla in the address bar and press enter, the 404 error page appears and shows that this page are not present. For your satisfaction, we share the demo below.

Live Demo

Qualities

Every 404 pages are deigned with CSS, and markup language to make the web more professional. The page style that we share is fresh and beautiful. We share some qualities of this 404 page design below.

1. Colorful and large 404 logo that makes your page excellent.
2. The CSS optimized search box is nice for your web, with this user are not getting bored.
3. Fully optimized page width, hides your sidebar widgets or contents and build the page additional skilled.
4. A redirect homepage option is added which makes internal link and it's smart for search engine optimization.
5. Previous page link (Go back) option is additionally added to interact the visitors.
6. A friendly notify message is written on this page which make your page more friendly to the visitants.
7. A contact link, invite your visitors on your contact page.

Also Try: Enable custom robots.txt file.

Install Custom 404 Error Page In Blogger

For perfect coding, follow the steps as mention below.

• Go to blogger.com.
• Go to setting>> search preferences.
• Click edit on "custom page not found".
• Add the below codes with in the box.

<!-- Pro Techno 404 Page -->
  <p style='line-height: 30px'><strong>
<font color='#ff0000' size='5'>
Oops!
</font> <font color='#666666'>
Looks like you either clicked a broken link or a page that you were looking for doesn't exist. <br/> 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='CONTACT PAGE URL'>Clicking Here</a>&#160;&#160;&#160; (<em>This will help us serve you even better</em>) </li>
    <li>Go To Homepage by <a href='HOMEPAGE URL'>Clicking Here</a>
      <br/></li>
<li>Search Anything Using Below Search Box</li>
  </ol>
<br />
 <center><form _lpchecked='1' action='/search' class='search-form' id='search_mini_form' method='get'>
<input id='searchinput' name='q' onblur='if (this.value == &apos;&apos;) {this.value = &apos;Type Here & Hit Enter&apos;;}' onfocus='if (this.value == &apos;Search the site&apos;) {this.value = &apos;&apos;;}' type='text' value='Type Here & Hit Enter'/>
<input id='searchbutton' style='vertical-align: top;' type='submit' value='Search!'/>
</form></center>
  <p>
    <br/>
    <br/>
    <br/></p>
<p align='center'><font size='5'>Page Not Found!</font></p>
<br /> <br /> <br />
<p align='center'> <font style='font-size:150px; font-weight:bold;' color='red'> 404 </font></p>
<style>
.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;
}
#sidebar-wrapper, #midsidebar-wrapper, .gapad2, .blog-pager, .post-header-line-1, .post-footer , #rsidebar-wrapper { display:none !important;} #main-wrapper { width:98%!important;} .post { width:98%!important; }
#searchinput {

background: #FFF url(http://1.bp.blogspot.com/-DqsSIdDHoXE/UC7emvfWcII/AAAAAAAAAwo/X7HUuvC4oBs/s000/search.png) no-repeat 7px 8px;
background-color: #FFF;
border: 1px solid #ddd;
color: #A0A0A0;
display: inline-block;
font-family:arial;
font-size: 12px;
font-weight:bold;
height: 24px;
width:300px;
margin: 0;
margin-top: 5px;
padding: 5px 15px 5px 28px;
vertical-align: top;
}
#searchinput:hover{
border: 1px solid #bebebe;
box-shadow: 0 1px 2px rgba(5, 95, 255, .1);
padding: 5px 15px 5px 28px;
}
#searchbutton {
background:#444;
color:#fff;
height:35px;
border-radius:5px 5px 5px 5px;
box-shadow:1px 2px 1px 1px #ABABAB;
border:1px solid #fff;
margin-top:3px;
padding:8px;
}
#searchbutton:hover{background:#555;}
</style>

• Change 'CONTACT PAGE URL' with your contact page link.
• Change 'HOME PAGE URL' with your homepage link.
• Click on save changes and check your 404 error page.

What's Next?

You can also perform editing on these pages such as you can change the color of the big 404 logo, search box, text color etc. For any help asks in the comments. In the next we publish the article about how to installing SEO in the blogger template. Cheers! And enjoying our articles.