Create a Professional Quality 404 Error Page in Blogger with SEO-Friendly Tips - Sazzadinfo.com - Largest Blogging Site in Bangladesh

Create a Professional Quality 404 Error Page in Blogger with SEO-Friendly Tips

 In this article, we will be discussing how to create a professional-quality 404 error page using the Search Preference option in Blogger. Previously, it was not possible to create an error page in Blogger, and the default error page was displayed, which was different from the blog's design. However, with the Search Preference option, you can now create a modern and visually appealing error page.

A 404 Error Page is an instructional page that provides guidance to users who land on a webpage with incorrect information or a broken link. A professional quality 404 error page is designed entirely with CSS3 and has several directional options. The page is given across the entire page, and the sidebar will not show any options to make it look more professional. The page provides guidance messages, links to back/previous pages, and a professional-quality search box to help users find the desired page.

To add the professional quality 404 error page to your blog, follow these steps:

• Log in to Blogger and go to Settings > Search Preferences or Errors and redirects Custom 404

• Click on the Edit option on the right side of Custom Page Not Found under Errors and Redirections option.

• In the box that appears, copy and paste the codes provided.

<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/AVvXsEhWDIAaXXbDZ504a4uVbfYi8D_V5BsivG94QSfLJ8w3lAZv-bpdO5j7KYjxrjYq3yrsPvzUEp6p9kWNtjo-GZghzIBKP0hGWAa6-4g8mbqR2ja95diyj1lnH56lE1-79VEmBaBmH9UNzJWb/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>

• Give the link to your contact page in Contact Page Url and the home page link in Home Page Url.

• Finally, click on Save Changes.

Creating a professional quality 404 error page is simple and easy with the Search Preference option in Blogger. By following these steps, you can create a visually appealing error page that provides guidance and helps users find the desired page.

----

Search: "Don't Let Your Visitors Get Lost: How to Craft a Professional 404 Error Page in Blogger" "Maximize Your Blog's Potential with a Visually Stunning 404 Error Page in Blogger" "Blogger's Search Preference: A Game-Changer for Crafting SEO-Friendly 404 Error Pages" "Say Goodbye to Boring Error Pages: Create a Professional 404 Page in Blogger" "Lost and Found: How to Create an Effective 404 Error Page in Blogger" "Make a Lasting Impression: Designing a Memorable 404 Error Page in Blogger"