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 == "error_page"'>
<!-- Copy HTML Code above and Paste Here -->
<b:else/>
<b:include data='top' name='status-message'/>
</b:if>
> Don't forget to replace line <!-- Copy HTML Code above and Paste Here --> 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
Blogger , Tips and Tricks
