Replace Blogger 404 Page with Beautiful Search Box in Blogger

Blogger is not a dynamic as WordPress, and not complete with WordPress however experts are every where. So here we found the way by which you can easily replaced 404 page with a beautiful search box. This will your blog beautiful and easy to understand. Whenever someone enter wrong URL or address of your blog it will show a search box and link of a homepage by which he/she  will easily back to the homepage or anything search of your blog for other query. Other thing is that the design of a search box cute and attractive and it will give a great looking to the fancy design of your blog, lets how it's work.

• Read: Add a Search Box Widget in Blogger in Simple Steps

How To Replace Blogger 404 Page with Beautiful Search Box in Blogger ?

• Login your blogger dashboard.
• Goto setting.

• Then click on Search Preferences.

• After that click on Edit (Custom Page Not Found).

• Now copy the below whole script and paste inside it.

<style>
#search-button-links1 {
    position: relative;
    top: 0;
    right: 0;
    height: 60px;
    width: 580px;
    font-size: 18px;
    color: #000;
    text-align: center;
    text-decoration:none;
    line-height: 42px;
    border-width: 0;
    background-color: #5caddf;
margin:5px;
    cursor: pointer;
}
#search-box1 {
    position: relative;
    width: 100%;
    margin: 0;
}
#search-form1 {
    height: 40px;
    border: 1px solid #999;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    background-color: #fff;
    overflow: hidden;
}
#search-text1 {
    font-size: 14px;
    color: #ddd;
    border-width: 0;
    background: transparent;
}
#search-box input[type="text"] {
    width: 90%;
    padding: 11px 0 12px 1em;
    color: #333;
    outline: none;
}
#search-button1 {
    position: absolute;
    top: 0;
    right: 0;
    height: 42px;
    width: 80px;
    font-size: 14px;
    color: #fff;
    text-align: center;
    line-height: 42px;
    border-width: 0;
    background-color: #4d90fe;
    -webkit-border-radius: 0px 5px 5px 0px;
    -moz-border-radius: 0px 5px 5px 0px;
    border-radius: 0px 5px 5px 0px;
    cursor: pointer;
}
</style>
<div id='search-box1'>
  <form action='/search' id='search-form1' method='get' target='_top'>
    <input id='search-tex1t' name='q' placeholder='Search True Blogging Tricks' type='text'/>
    <button id='search-button1' type='submit'><span>Search</span></button>
  </form>
</div>
<p style="color:#e33633; font-family:verdana, sans serif; font-size:16px; padding:24px; text-decoration:none">This Page has been removed for safety purposes <br /> Visit <a href="http://truebloggingtricks.blogspot.com">True Blogging Tricks</a>

•  Click on save changes.

Customization

You can change the highlighted color to the desired text you need. If you have any problem with this tutorial feel free to comment below and also share this helpful tutorial with friends. Stay blessed and Happy Blogging!