Stylish 404 error page with search box for Blogger

Nowadays every blogger template has a different 404 error page but the same themes look good but there 404 error does not look so good. In this article, I give you a stylish 404 error page design for your blogger blog. 404 error page makes your blog looks professional. If you want to add this widget just add the HTML code on the custom 404 error page section and the css on your theme before the </style> tag.

DEMO

Same benefits of the 404 pages:

Make your stylish error page
Make your blog professional
Increase your blog style
Many more depend on your blog and 404-page style

The HTML code of the 404 error page:

<noscript>
<div class='noscript'>
<p><span>&#9888;</span></p>
<p>Please Enable Javascript to view our site content</p>
<p>Thank you</p>
</div>
</noscript>
<div class='error-wrapper' id='error-wrapper'>
<div id='error-page'>
<div id='error-inner'>
<h3>Err...</h3>
<div class='box-404'>
<div>404</div>
</div>
<h2>Page Not Found</h2>
<p>It looks like you are lost! Try searching here :<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'></path>
</svg>
</button>
</form>
<p>
               Or, back to 
               <a href='/'>
                  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'></path>
</svg>
</a>
</p>
</div>
</div>
</div>

The CSS code of the 404 error page:

/* Error 404 */
body{background:#12253e;color:rgba(255,255,255,.85);line-height:1.4em}body:before{content:'';background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJ8hTIFlURHFy0hN6oc3G6qGXyCj9LeuPfGZjaOt0f5gkoxeRzJ0vIKvyRdvyZycw3ZcsxH5xi8cTG0ZuRQR4HrkGRRB1f9vIyOmZwZfBxBjDnr8Ao1I7kT4WcAgLDUQn0tC6H9QTseDic/s1600/anime-girls.jpg);background-size:cover;position:fixed;top:0;bottom:0;right:0;left:0;opacity:.1;animation:movebg 50s linear infinite}#error-page{background:transparent;margin:auto;text-align:center;padding:0 10px;width:100%;max-width:1100px;-webkit-box-sizing:border-box;box-sizing:border-box}#error-inner{position:relative;margin:9% auto 35px;padding:0;list-style:none!important}#error-inner .box-404{display:inline-block;position:relative;font-family:monospace;box-shadow:0 0 0 5px rgba(0,0,0,.3);width:150px;height:150px;background:#feca57;color:#000;font-size:55px;line-height:150px;margin:30px auto 35px auto;border-radius:99em;animation:rotating .8s linear}#error-inner h3{text-transform:uppercase;color:rgba(255,255,255,.85);font-size:50px;margin:0 auto 10px;font-weight:500;letter-spacing:8px;animation:bounceInLeft 1.2s linear}#error-inner h2{color:rgba(255,255,255,.85);font-weight:500;line-height:1.4em;font-size:30px;text-decoration:line-through}#error-inner p{line-height:1.7em;font-size:18px;color:rgba(255,255,255,.85);padding:0;margin:15px auto 0 auto}#search-404{max-width:75%;display:block;margin:0 auto 15%;position:relative}#search-404 .icons{width:26px;height:26px;outline:none;fill:rgba(255,255,255,1);vertical-align:middle;transition:all .3s}#search-404 .icons:hover{fill:rgba(255,255,255,.85)}#search-404:hover .icons,#search-404:active .icons{fill:#fff}#search-404 .icon-Forward{width:20px;height:20px}#search-404 p{font-size:90%;color:rgba(255,255,255,.85);padding:20px 20px 0;text-align:right}#search-404 a{color:#feca57}#search404 input[type=search]{width:100%;border-radius:99em;height:48px;color:rgba(255,255,255,.75);box-shadow:0 0 0 5px rgba(255,255,255,.1);border:1px solid rgba(0,0,0,0.05);padding:0 58px 0 30px;line-height:48px;font-size:16px;box-sizing:border-box;outline:0;background-color:rgba(13,26,45,.85);transition:all .6s cubic-bezier(.47,1.64,.41,.8)}#search404 input[type=search]:hover{border-color:rgba(0,0,0,0.08)}#search404 input[type=search]:focus{box-shadow:inset 0 0 0 0.1rem rgba(0,0,0,.05);box-shadow:0 0 0 5px rgba(255,255,255,.25)}#search404 .src-btn404{background:transparent;border:none;padding:0 26px;outline:none;height:48px;line-height:48px;font-weight:500;margin:0 auto;cursor:pointer;position:absolute;right:0;top:0;z-index:999}#search404 input[type=search]::placeholder{color:rgba(255,255,255,.85)}
@media screen and (max-width:640px){#error-inner{margin:5% auto 35px}#search-404{max-width:100%}#error-inner h3,#error-inner p{display:none}}

Now you can add this code and enjoy it. I hope you well enjoy this article if you face any kind of error please comment down below. Thanks for with us.