Create 404 Custom Page With Search Box

404 page is kind of page type that will be shown where visitor landing on the wrong page URL. On some scenario, it will happen if we have deleted a post and visitor still got the link from somewhere.

by default, when we're not activating or create error 404 page, a status text message will show as below

Sorry, the page you are looking for in this blog does not exist.

This message called by <b:include data='top' name='status-message'/> under status-message inclusion. Some newer default blogger theme does not have this inclusion in XML editor since is managed or stored in the server, otherwise, we can include it manually under Blog1 widget.

Status Message Content Inclusion

<b:includable id='status-message'>
  <b:if cond='data:navMessage'>
  <div class='status-msg-wrap'>
    <div class='status-msg-body'>
      <data:navMessage/>
    </div>
    <div class='status-msg-border'>
      <div class='status-msg-bg'>
        <div class='status-msg-hidden'><data:navMessage/></div>
      </div>
    </div>
  </div>
  <div style='clear: both;'/>
  </b:if>
</b:includable>

They are two ways to creating an error 404 page, either from Dashboard > Settings > Search preferences > Errors and redirects > Page not found, or by making some condition inside inclusion status-message

Custom 404 page HTML Code

<div class="query-zero-wrapper" style="width: 100%;display: table;">
    <div class="query-zero" style="height: 100vh;vertical-align:middle;display:table-cell">
        <div style="text-align: center;">
            <span>
                <svg height="50px" id="Capa_1" style="enable-background:new 0 0 103.696 103.695;" version="1.1" viewBox="0 0 103.696 103.695" width="50px" x="0px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" y="0px"><g><path d="M75.835,72.818c0.656,1.521-0.043,3.287-1.563,3.945s-3.286-0.043-3.944-1.563c-2.894-6.688-9.729-11.013-17.42-11.013   c-7.869,0-14.748,4.32-17.523,11.006c-0.48,1.152-1.596,1.85-2.771,1.852c-0.385,0-0.773-0.074-1.15-0.23   c-1.531-0.637-2.256-2.393-1.619-3.922c3.709-8.933,12.764-14.703,23.064-14.703C62.993,58.189,71.993,63.932,75.835,72.818z    M28.452,36.484c-0.676-1.176-0.27-2.676,0.906-3.351l9.045-5.196c1.176-0.674,2.676-0.268,3.352,0.907   c0.676,1.176,0.27,2.676-0.906,3.351l-9.045,5.194C30.626,38.065,29.126,37.66,28.452,36.484z M42.487,36.59   c1.688,1.689,1.688,4.429,0,6.115c-1.688,1.688-4.426,1.688-6.117-0.002c-1.688-1.688-1.688-4.426,0-6.113   C38.059,34.901,40.797,34.901,42.487,36.59z M57.188,21.907c0.121-1.35,1.312-2.347,2.662-2.226l10.391,0.934   c1.35,0.121,2.348,1.313,2.225,2.664c-0.121,1.351-1.312,2.347-2.664,2.225l-10.389-0.933   C58.063,24.45,57.065,23.256,57.188,21.907z M68.28,36.519c1.688,1.688,1.688,4.426,0,6.113c-1.691,1.69-4.43,1.69-6.117,0.002   c-1.688-1.687-1.688-4.426,0-6.115C63.852,34.829,66.59,34.829,68.28,36.519z M85.465,103.695H18.23   C8.178,103.695,0,95.518,0,85.465V18.23C0,8.177,8.179,0,18.23,0h67.235c10.053,0,18.229,8.178,18.229,18.23v67.235   C103.696,95.518,95.518,103.695,85.465,103.695z M18.23,8.577c-5.322,0-9.652,4.33-9.652,9.652v67.234   c0,5.322,4.33,9.652,9.652,9.652h67.235c5.321,0,9.651-4.33,9.651-9.652V18.23c0-5.322-4.33-9.652-9.651-9.652L18.23,8.577   L18.23,8.577z" fill="#6f7070"></path></g></svg>
            </span>
        </div>
        <div style="text-align: center;">
            <b><span style="font-family:monospace, courier new;">NO RESULT FOUND</span></b>
        </div>
        <div style="text-align: center;">
            <span style="font-family:monospace, courier new; font-size: 50px;">-404-</span>
        </div>      
        <div class="blak-blockcontent" style="line-height: 200%;padding: 5px 5px 5px 5px;text-align: center;">
            <span>Try the search box below to find what you're looking for.</span><br>
            <form action="/search" id="searchThis" style="display: inline;">
                <input id="searchBox" name="q" onblur="if(this.value=='')this.value=this.defaultValue;" onfocus="if(this.value==this.defaultValue)this.value='';" type="text" value="Search This Blog" vinput="" style="border:1px solid #ebebeb;border-radius:2px;font:16px/20px Roboto,sans-serif;margin:0;max-width:100%;outline:0;padding:7px;transition:border-color .2s;box-shadow:0 2px 5px 0 rgba(0,0,0,.26);vertical-align:middle">
                <button name="sa" type="submit" style="vertical-align:middle;outline:0;box-shadow:0 2px 5px 0 rgba(0,0,0,.26);background-color:#fff;border:0;border-radius:2px;cursor:pointer;display:inline-block;height:36px;margin:0;text-align:center;text-decoration:none;transition:background-color .2s,box-shadow .2s;padding:8px 16px">
                        <svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z" fill="rgba(0,0,0,.54)" stroke="rgba(0,0,0,.54)"></path></svg>
                </button>
            </form>
        </div>
    </div>
</div>
<style>.no-posts-message{display:none}</style>

To activating custom error 404 page, we can choose between this two method.

Make error 404 page from the dashboard

This is the simplest solution. On Error and redirects section under the Search preferences Setting tab, click on "edit" and simply copy and paste the HTML code above then save changes.

Make error 404 page with a Conditional tag

In the HTML editor find this code

<b:include data='top' name='status-message'/>

Replace it with

<b:if cond='data:blog.pageType == &quot;error_page&quot;'>
    <!-- Copy HTML Code above and Paste Here -->
<b:else/>
    <b:include data='top' name='status-message'/>
</b:if>

Don't forget to replace line  With HTML code above Save

To test your newly added 404 Error page, just type your blog address with a random suffix such as https://example.blogspot.com/asdfjkl