How to put a 404 error page on Blogger With Search Bar
The 404 'Not Found' Error page is a page generated by the server to inform you that the link you visited on a blog page cannot be found. Usually you will experience an error 404 when the link has been changed to the publication date or deleted, or it could be when you click a blog address link with a typo in it.
Blogger also has provided 404 error pages by default to display pages that were not found but these are so simpleFor those who want to change the default appearance provided by Blogger, here I will provide a display options from the 404 Error Page that you can easily install. Here are the steps.
First, open Blogger >> Click menu >> then click edit HTML >> Then find and add the code below before</head>
<b:if cond='data:view.isError'>
<style>
/* Error 404 By BITGK (bitgk.blogspot.com) */
body{background:#fff;line-height:1.4em;overflow:hidden}input[type=search]::-webkit-search-decoration,input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-results-button,input[type=search]::-webkit-search-results-decoration{-webkit-appearance:none}
@keyframes charge{from{transform:translateY(2rem);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes rotating{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
#error-page{background:#fff;margin:auto;text-align:center;padding:0 10px;width:100%;max-width:1100px;-webkit-box-sizing:border-box;box-sizing:border-box}
#error-inner{margin:12% auto 35px;padding:0;list-style:none!important}
#error-inner .box-404{display:inline-block;position:relative;font-weight:bold;width:200px;height:200px;background:#e84118;color:#fff;font-size:70px;line-height:200px;margin:25px auto}
#error-inner .box-404 .zigg{display:inline-block;position:relative;animation:rotating .6s linear}
#error-inner .box-404::after{content:'';width:0;height:0;position:absolute;top:0;right:0;border-width:30px;border-style:solid;border-color:#fff #fff transparent transparent;display:block}
#error-inner .box-404::before{content:'';width:0;height:0;position:absolute;top:0;left:0;border-width:30px;border-style:solid;border-color:#fff transparent transparent #fff;display:block}
#error-inner .box-404 div::after{content:'';width:0;height:0;position:absolute;bottom:0;left:0;border-width:30px;border-style:solid;border-color:transparent transparent #fff #fff;display:block}
#error-inner .box-404 div::before{content:'';width:0;height:0;position:absolute;bottom:0;right:0;border-width:30px;border-style:solid;border-color:transparent #fff #fff transparent;display:block}
#error-inner h2{color:#2d2d2d;font-weight:700;line-height:1.4em;font-size:30px;animation:charge .5s linear}
#error-inner p{line-height:1.7em;font-size:16px;color:#111;padding:0;margin:15px auto 0 auto;max-width:640px;animation:charge .5s linear}
#search-404{max-width:75%;display:block;margin:0 auto 15%;position:relative}
#search-404 .icons{width:26px;height:26px;fill:#4285f4;vertical-align:middle}
#search-404 .icon-Forward{width:20px;height:20px}
#search-404 p{font-size:90%;color:#999;padding:20px 20px 0;text-align:right}
#search404 input[type=search]{width:100%;border-radius:99em;height:48px;box-shadow:0 1px 6px 0 rgba(32,33,36,0);border:1px solid #dfe1e5;padding:0 48px 0 24px;line-height:48px;font-size:16px;box-sizing:border-box;outline:0;background-color:#fff;transition:all .3s}
#search404 input[type=search]:focus{background:#fff;box-shadow:0 1px 6px 0 rgba(32,33,36,0.28)}
#search404 .src-btn404{background:transparent;border:none;padding:0 20px;outline:none;height:48px;line-height:48px;font-weight:700;margin:0 auto;cursor:pointer;position:absolute;right:0;top:0;z-index:999}
@media screen and (max-width:640px){#error-inner{margin:5% auto 35px}#search-404{max-width:100%}}
</style>
</b:if>The next step, look for the code <body> >> then put this below code under it. >>
<b:if cond='!data:view.isError'>
</b:if> <b:if cond='data:view.isError'> <div class='error-wrapper' id='error-wrapper'> <div id='error-page'> <div id='error-inner'> <div class='box-404'> <div><span class='zigg'>404</span></div> </div> <h2>Page Not Found</h2> <p>The page you were trying to visit has disappeared or moved to another dimension. Perhaps searching will help.<br/></p> </div> <div id='search-404'> <form action='/search' id='search404'> <input name='cof' type='hidden' value='FORID:10'/> <input name='ie' type='hidden' value='ISO-8859-1'/> <input class='src-form404' name='q' placeholder='Search here...' required='required' type='search'/> <button class='src-btn404' title='Search' type='submit'> <svg class='icons icon-Search' viewBox='0 0 24 24'> <path d='M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z'/> </svg> </button> </form> <p> Or, back to <a expr:href='data:blog.homepageUrl'> homepage <svg class='icons icon-Forward' viewBox='0 0 24 24'> <path d='M4,11V13H16L10.5,18.5L11.92,19.92L19.84,12L11.92,4.08L10.5,5.5L16,11H4Z'/> </svg> </a> </p> </div> </div> </div> </b:if>
The next step is to click the button Save theme and see the results.
We Love Hearing from You!
Thank you for reading our post! Your thoughts and opinions are important to us. Please leave a comment below to share your feedback, ask questions, or start a discussion. We look forward to engaging with you!
Note: Comments are moderated to ensure a respectful and positive environment.