How To Make A Custom 404 Error Page In Blogger

Views:

What is 404 error in Blogger? It is a HTTP standard response code from server, It indicates, when we are trying to open a page from a website, You can able to communicate with server but the server not that page or request you searched. It helps to redirect visitors to home page or other pages. Blogger also use default 404 error page for all template. If you are a template designer, It helps you to make attractive 404 error page. You may seen many 404 error page, when you are browsing on internet. It is made by some special codes. Now i share 2 custom 404 error pages for your blogger. If you want to add this pages to your Blogger. Please follow this post carefully.

Blogger default 404 error message

Default Blogger 404 Error page (www.masterhacksindia.blogspot.com)

Select Settings option.

Click on Search Preferences.

Click on Errors and redirections option, Then select first sub option “Custom Page Not Found”.

Custom Page Not Found (www.masterhacksindia.blogspot.com)

Now a box will appear. Please paste below code to that box. (Select Error Page 1 code or Error Page 2 code from below.)

Save it.

1. Error Page Without Search Box

How To Make a custom 404 Error Page In Blogger optional (www.masterhacksindia.blogspot.com)

Copy below code for Error Page Without Search Box :

<!—Master Hacks404 Page –>
<style type="text/css"> #error-404 { border: 20px solid #1B1B1B; border-radius: 240px 240px 240px 240px; height: 240px; margin: 0 auto 40px; text-align: center; transition: all 0.8s ease 0s; width: 240px; } #error-404:hover { border-color: #333; } #error-404 span { color: #FA4C29; font-size: 100px; font-weight: bold; line-height: 240px; } .large-heading { font-size: 48px; line-height: 1.2em; } .light-heading { font-weight: 400; } .status-msg-bg { background-color: transparent; } .sidebar-wrapper, .page-header { display: none; } .main-wrapper { margin-right: 0; } .outer-wrapper { min-height: 0; } .status-msg-border { border: 0 none; } </style> <div id="error-404"> <span>404</span>
</div> <h1 class="large-heading" style="text-align: center;">Page not found.</h1> <h2 class="light-heading" style="text-align: center;">Please check that there isn’t a typo in your URL.</h2>
<!—Master Hacks404 Page –>

2. Error Page With Search Box

How To Make a custom 404 Error Page In Blogger (www.masterhacksindia.blogspot.com)

Copy below code for Error Page With Search Box:

<!—Master hacks 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)'>« Go Back</a> </li>
    <li>Report a Problem:<a href=' CONTACT PAGE URL '>Click Here</a>    (<em>This will help us serve you even better</em>) </li>
    <li>Go To Homepage:<a href=' HOMEPAGE URL '>Click 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 == '') {this.value = 'Type Here & Hit Enter';}' onfocus='if (this.value == 'Search the site') {this.value = '';}' type='text' value='Search'/>
<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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhD-AwsdS-8f5M1YhgqjmyqY_BuWgTxDqsNcOvkAiS6u1xAOjmHLUs1bSqAiaunpWfVR1n3YWh2jDC-caFd2AfwSeQRhEK9kKjPhQFtVwPGISqvyAWlE39jxhXCmH03dcbTtdjBykm4wgyu/s0/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>
<!—Master hacks404 Page end –>

Change RED color with your Home Page URL and Contact URL.

Features

Full Page Width : Second option 404 error page has full width It help to hide your sidebar widgets and make your blogger as more professional.
User Friendly Message With Redirection : It help to redirect error page to home page with user friendly interface.
Previous Page Link :JavaScript help to redirect you to previous page.
Report Problem : Report directly to Blog admin.
Stylish Advanced Search Box : Inbuilt stylish search box help to search wanted content without leaving 404 error page.
Big 404 Logo : Quick attention to peoples.

Leave a comment below … You have any problem with this 404 error page…