Create a professional quality 404 error page for blog

Today we will discuss about Blogger's Search Preference, which can be used to create a 404 error page in the professional quality. There is nothing to say before creating the page. In previous bloggers no error page could be created. But recently created the opportunity to create this error page through Blogger's Search Preference option. When the old template was not found by searching anymore, blogger showed an error page by default, which was completely different from your desired blog. But now with this option you can create a good and modern design an error page. 404 If you do not have any ideas about error pages then you can read the following lines.

What is 404 Error Page? This is an instructional page of the Wave site. When you search with any false information or link on a Wave site, this page will give you some directional instructions, which will give you the information or results you want. It is a complete guide to getting the right results.

Professional 404 Error Pages: The error page I share with you is a professional quality 404 error page. This is called Professional because it is fully designed with a variety of options with CSS3.


Here's what I have: I gave the points that I have in the form of points below.

• This is done throughout the page, ie, no type of sibling options will show up. As a result, it will show more professional.
• There are some instructional messages for the user. By doing so, he will get his desired page.
• JavaScript has been linked to the back / previous pages. As a result, if your user enters the broken link incorrectly, then through this option he will be able to return to his previous link.
• If the user fails to get his link, he will be able to send an e-mail to you via your contact page. If you have any kind of error on the link, then you can correct it.
• Linked to home page.
• A professional search box has been added, so that if the user wishes it will be able to find his desired page through this search box.
• Above all, a log of 404 error has been provided. This will make your page more attractive and the user will be able to easily understand that this is a message on the error page.

How to add it to the blog: After reading about the top quality 404 Error page, you might think that it would be a lot of trouble adding to the blog. But I'm saying there is no problem. Just following my tips below, you can easily create this page.

• First, Log in to Blogger
• After go to Settings > Search Preferences
• After that, you will see an Edit option on the right side of Custom Page Not Found under the Errors and Redirections option. If you click on it, a box will appear.
• Copy and paste the code below into this box.

<p style='line-height: 30px'><strong>
<font color='#ff0000' size='5'>Oops!</font>
<font color='#666666'>আপনি হয়তো কোন ভূল লিংকে প্রবেশ করেছেন অথবা যে পেইজটি খুজছেন সেটি এখান থেকে সরিয়ে অন্যত্র নেওয়া হয়েছে !<br/>অনুগ্রহ করে লিংকটি যাচাই করে দেখুন অথবা আমাদের অনুসরণ করুনঃ</font></strong></p>
  <ol style='line-height: 25px'>
    <li><a href='javascript:history.go(-1)'>ইচ্ছে করলে আগের পেইজে যেতে পারেন।</a></li>
    <li>সমস্যা সম্পর্কে আমাদের জানাতে পারেন<a href='Contact Page Url'>এখানে ক্লিক করে</a> (<em>এটি আমাদের আরও ভাল পরিবেশন করতে সাহায্য করবে </em>)</li>
    <li>মূল পাতা যাওয়ার জন্য<a href='Home Page Url'>এখানে ক্লিক করুন।</a><br/></li>
<li>আপনি যা খুজছেন সেটি নিচের সার্চ বক্সে খুজে দেখতে পারেন।</li>
  </ol>
<br />
 <center>
  <div id="searchbox">
   <form action="/search" autocomplete="off">
    <input id="input" name="q" type="text" size="15" placeholder="Search for...." />
    <input id="submit" type="submit" value="Search" />
   </form>
  </div>
 </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-left: 50px;
    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; }
#searchbox {
 display: block;
 clear: both;
 margin: 10px 0;
}
#searchbox #input {
 background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6cpy94Q3ELKWITuTlO1ee6Hu1yar6R-hSqJ3i9hymIX0A5lPdpmwWQWLguoppbDf2kwnn9rJBvBs0KIskYRmbxFKk6ND-ASdRfqIqQLNGSk9zTNoX2v7tdtYaohN5Th5FFfQdoFzmN4fl/s1600/Search.png") no-repeat scroll 8px center transparent !important;
 padding: 7px 15px 7px 35px !important;
 color: #444;
 text-decoration: none;
 width:300px;
 font-size: 12px;
 font-family: "Arial Narrow",Arial,sans-serif;
 border: 1px solid #4C9ED9;
 -webkit-border-radius: 4px;
 -moz-border-radius: 4px;
 border-radius: 4px;
 -webkit-box-shadow: 1px 1px 2px #CCC inset;
 -moz-box-shadow: 1px 1px 2px #CCC inset;
 box-shadow: 1px 1px 2px #CCC inset;
}
input:focus::-webkit-input-placeholder {
    color: transparent;
}
input:focus:-moz-placeholder {
    color: transparent;
}
input:focus::-moz-placeholder {
    color: transparent;
}
#searchbox #submit {
 color: #444;
 font-weight: bold;
 text-decoration: none;
 padding: 5px 5px;
 border: 1px solid #4c9ed9;
 cursor: pointer;
 height:32px;
 -webkit-border-radius: 4px;
 -moz-border-radius: 4px;
 border-radius: 4px;
 background: #fbfbfb;
 background: -moz-linear-gradient(top, #fbfbfb 0%, #f4f4f4 100%);
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fbfbfb), color-stop(100%,#f4f4f4));
 background: -webkit-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
 background: -o-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
 background: -ms-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FBFBFB', endColorstr='#F4F4F4',GradientType=0 );
 background: linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
}
</style>

• Link to your Contact page in the Contact Page Url.
• Enter home page url link.
• Finally, click Save Changes.

How to check: After installing all things successfully, you might want to see how your 404 Error page is. To see if your blog's link in the browser after searching with any incorrect information, you will see the error page 404.

For example,

https://www.yourblog.blogspot.com/blablabla

• So far, hopefully everyone can understand. Thanks ...