How To Add Custom Stylish 404 Error Page In Blogger

{tocify} $title={Table of contents}

If you've never heard of the term 404 Error, then you're missing out on a lot. A 404 Error is an HTML document that is shown when a webpage is not found on the internet. In this easy-to-follow guide, I'll demonstrate how to install the 4 Stylish 404 Error Page in your Blogger.

What is a 404 Error Page?

It’s the default error page when you type in a wrong URL or the address of a website that no longer exists.

The 404 error page is one of the most frustrating and embarrassing moments that can happen to a website owner. A real 404 error means your website really can’t find the content you are looking for, and users get frustrated trying to land on a page they believe must be there.

If you have a blog on the Blogger platform, you’ll probably want to change the default 404 Error Page offered by Blogger. 

Perhaps you want to display the most viewed posts from your blog, or maybe a summary of your latest posts. Here I'll display 4 Stylish display options for you to replace the 404 Error Page.

How to install a 404 page on blogger Blogspot?

Blogger doesn’t come with a built-in 404 page, but the good news is that it’s easy to install a custom one. This article will tell you how to install custom 404 error page on blogger..

Stylish 404 Error Page for Blogger

We’re going to install a custom 4 Stylish 404 page on blogger Blogspot. Don’t worry if you are using the First Time, the instructions will be very similar and if you’ve installed themes before, you should have no issue. I’ll walk you through the steps to install a 404 page on Blogger BlogSpot.

First

• Open Blogger Dashboard
• Click Theme Menu
• Click Edit Html

Find and add the code below before </head> html

<b:if cond='data:view.isError'> <style> /* Error 404 */ 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:&#39;&#39;;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:&#39;&#39;;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:&#39;&#39;;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:&#39;&#39;;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> 

Then find the <body> then put this code below it.

<b:if cond='!data:view.isError'>

Then add below CSS code before </body>(First Style)

</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>

After that click the Save theme button and see the results.

For the second style, you just have to choose this version of CSS paste before </body>(Second Style)

<b:if cond='data:view.isError'>

<style>

/* Error 404 */

@keyframes bounceInLeft{from,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(0.215,0.610,0.355,1.000);animation-timing-function:cubic-bezier(0.215,0.610,0.355,1.000)}0%{opacity:0;-webkit-transform:translate3d(-3000px,0,0);transform:translate3d(-3000px,0,0)}60%{opacity:1;-webkit-transform:translate3d(25px,0,0);transform:translate3d(25px,0,0)}75%{-webkit-transform:translate3d(-10px,0,0);transform:translate3d(-10px,0,0)}90%{-webkit-transform:translate3d(5px,0,0);transform:translate3d(5px,0,0)}to{-webkit-transform:none;transform:none}}@keyframes bounceInRight{from,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(0.215,0.610,0.355,1.000);animation-timing-function:cubic-bezier(0.215,0.610,0.355,1.000)}from{opacity:0;-webkit-transform:translate3d(3000px,0,0);transform:translate3d(3000px,0,0)}60%{opacity:1;-webkit-transform:translate3d(-25px,0,0);transform:translate3d(-25px,0,0)}75%{-webkit-transform:translate3d(10px,0,0);transform:translate3d(10px,0,0)}90%{-webkit-transform:translate3d(-5px,0,0);transform:translate3d(-5px,0,0)}to{-webkit-transform:none;transform:none}}@keyframes littleShine{0%{background-position:-400px 0}100%{background-position:400px 0}}@keyframes movebg{0%{transform:scale(1)}50%{transform:scale(1.6) rotate(15deg)}100%{transform:scale(1)}}@keyframes rotating{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}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}body{background:#12253e;color:rgba(255,255,255,.85);line-height:1.4em}body:before{content:&#39;&#39;;background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbNv6IR_OMgJdENcCiFWvaX_52SKg79emJoJ_U2VUMIy0-abppeH5Tjem_mUcVhaf62zrnIqbFSxiDbvtYTxg5eQofGL1wJQ-uJJlfEhRhP9CJOvrgV6Fr1jXlYNjvdMSrrkQUkBnGGLKA/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;max-width:640px}#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}}</style></b:if>

For the third display option, my friend selects this CSS and HTML. Add as above;

CSS(Third Style)

<b:if cond='data:view.isError'>

<style>

/* Error 404 */

body{background:#28254C;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}#error-page{margin:auto;text-align:center;padding:0 10px;width:100%;max-width:1100px;-webkit-box-sizing:border-box;box-sizing:border-box}

.ghbox{position:relative;width:100%;max-width:550px;height:100%;max-height:600px;min-height:450px;background:#332F63;border-radius:20px;margin:12% auto 0 auto;text-align:center;padding:20px 40px}.ghbox .ghboxghosty{padding:15px 25px 25px;position:absolute;left:50%;top:30%;transform:translate(-50%,-30%)}.ghbox .ghboxghosty .symbol:nth-child(1){opacity:.2;animation:shinee 4s ease-in-out 3s infinite}.ghbox .ghboxghosty .symbol:nth-child(1):before,.ghbox .ghboxghosty .symbol:nth-child(1):after{content:&#39;&#39;;width:12px;height:4px;background:#fff;position:absolute;border-radius:5px;bottom:65px;left:0}.ghbox .ghboxghosty .symbol:nth-child(1):before{transform:rotate(45deg)}.ghbox .ghboxghosty .symbol:nth-child(1):after{transform:rotate(-45deg)}.ghbox .ghboxghosty .symbol:nth-child(2){position:absolute;left:-5px;top:30px;height:18px;width:18px;border:4px solid;border-radius:50%;border-color:#fff;opacity:.2;animation:shinee 4s ease-in-out 1.3s infinite}.ghbox .ghboxghosty .symbol:nth-child(3){opacity:.2;animation:shinee 3s ease-in-out .5s infinite}.ghbox .ghboxghosty .symbol:nth-child(3):before,.ghbox .ghboxghosty .symbol:nth-child(3):after{content:&#39;&#39;;width:12px;height:4px;background:#fff;position:absolute;border-radius:5px;top:5px;left:40px}.ghbox .ghboxghosty .symbol:nth-child(3):before{transform:rotate(90deg)}.ghbox .ghboxghosty .symbol:nth-child(3):after{transform:rotate(180deg)}.ghbox .ghboxghosty .symbol:nth-child(4){opacity:.2;animation:shinee 6s ease-in-out 1.6s infinite}.ghbox .ghboxghosty .symbol:nth-child(4):before,.ghbox .ghboxghosty .symbol:nth-child(4):after{content:&#39;&#39;;width:15px;height:4px;background:#fff;position:absolute;border-radius:5px;top:10px;right:30px}.ghbox .ghboxghosty .symbol:nth-child(4):before{transform:rotate(45deg)}.ghbox .ghboxghosty .symbol:nth-child(4):after{transform:rotate(-45deg)}.ghbox .ghboxghosty .symbol:nth-child(5){position:absolute;right:5px;top:40px;height:12px;width:12px;border:3px solid;border-radius:50%;border-color:#fff;opacity:.2;animation:shinee 1.7s ease-in-out 7s infinite}.ghbox .ghboxghosty .symbol:nth-child(6){opacity:.2;animation:shinee 2s ease-in-out 6s infinite}.ghbox .ghboxghosty .symbol:nth-child(6):before,.ghbox .ghboxghosty .symbol:nth-child(6):after{content:&#39;&#39;;width:15px;height:4px;background:#fff;position:absolute;border-radius:5px;bottom:65px;right:-5px}.ghbox .ghboxghosty .symbol:nth-child(6):before{transform:rotate(90deg)}.ghbox .ghboxghosty .symbol:nth-child(6):after{transform:rotate(180deg)}.ghbox .ghboxghosty .ghboxghost-container{background:#fff;width:100px;height:100px;border-radius:100px 100px 0 0;position:relative;margin:0 auto;animation:upndown 3s ease-in-out infinite}.ghbox .ghboxghosty .ghboxghost-container .ghboxghosty-eyes{position:absolute;left:50%;top:45%;height:12px;width:70px}.ghbox .ghboxghosty .ghboxghost-container .ghboxghosty-eyes .ghboxeye-left{width:12px;height:12px;background:#332F63;border-radius:50%;margin:0 10px;position:absolute;left:0}.ghbox .ghboxghosty .ghboxghost-container .ghboxghosty-eyes .ghboxeye-right{width:12px;height:12px;background:#332F63;border-radius:50%;margin:0 10px;position:absolute;right:0}.ghbox .ghboxghosty .ghboxghost-container .ghboxghosty-bottom{display:flex;position:absolute;top:100%;left:0;right:0}.ghbox .ghboxghosty .ghboxghost-container .ghboxghosty-bottom div{flex-grow:1;position:relative;top:-10px;height:20px;border-radius:100%;background-color:#fff}.ghbox .ghboxghosty .ghboxghost-container .ghboxghosty-bottom div:nth-child(2n){top:-12px;margin:0 -0px;border-top:15px solid #332F63;background:transparent}.ghbox .ghboxghosty .ghboxghosty-shadow{height:20px;ghbox-shadow:0 50px 15px 5px #3B3769;border-radius:50%;margin:0 auto;animation:smallnbig 3s ease-in-out infinite}.ghbox .ghboxdescription{position:absolute;bottom:30px;left:50%;transform:translateX(-50%)}.ghbox .ghboxdescription .ghboxdescription-container{color:#fff;text-align:center;max-width:450px;font-size:16px;margin:0 auto}.ghbox .ghboxdescription .ghboxdescription-container .ghboxdescription-title{font-size:24px;letter-spacing:.5px}.ghbox .ghboxdescription .ghboxdescription-container .ghboxdescription-text{color:rgba(255,255,255,.5);margin-top:20px}.ghbox .ghboxdescription .ghboxbutton{display:block;position:relative;background:#FF5E65;border:2px solid transparent;border-radius:99em;height:45px;text-align:center;text-decoration:none;color:#fff;line-height:41px;font-size:16px;padding:0 70px;white-space:nowrap;margin:25px auto 0 auto;transition:background .5s ease;overflow:hidden}.ghbox .ghboxdescription .ghboxbutton:hover{background:transparent;border-color:#fff}@keyframes upndown{0%{transform:translateY(5px)}50%{transform:translateY(15px)}100%{transform:translateY(5px)}}@keyframes smallnbig{0%{width:90px}50%{width:100px}100%{width:90px}}@keyframes shinee{0%{opacity:.2}25%{opacity:.1}50%{opacity:.2}100%{opacity:.2}}

@media screen and (max-width:640px) {.ghbox{width:auto}}

</style>

</b:if>

Markup/Html

</b:if>

<b:if cond='data:view.isError'>

<div id='error-page'>

<div class='ghbox'>

           <div class='ghboxghosty'>

      <div class='symbol'/>

      <div class='symbol'/>

      <div class='symbol'/>

      <div class='symbol'/>

      <div class='symbol'/>

      <div class='symbol'/>

      <div class='ghboxghost-container'>

                 <div class='ghboxghosty-eyes'>

                    <div class='ghboxeye-left'/>

                    <div class='ghboxeye-right'/>

                 </div>

         <div class='ghboxghosty-bottom'>

                    <div/>

                    <div/>

                    <div/>

                    <div/>

                    <div/>

         </div>

              </div>

      <div class='ghboxghosty-shadow'/>

   </div>

           <div class='ghboxdescription'>

              <div class='ghboxdescription-container'>

                 <div class='ghboxdescription-title'>Page Not Found</div>

         <div class='ghboxdescription-text'>The page you were trying to visit has disappeared or moved to another dimension.</div>

              </div>

      <a class='ghboxbutton' expr:href='data:blog.homepageUrl'>Homepage</a>

           </div>

</div>

</div>

<script>

//<![CDATA[

// Moving Eyes

var pageX=$(document).width(),pageY=$(document).height(),mouseY=0,mouseX=0;$(document).mousemove(function(e){mouseY=e.pageY,yAxis=(pageY/2-mouseY)/pageY*300,mouseX=e.pageX/-pageX,xAxis=100*-mouseX-100,$(".ghboxghosty-eyes").css({transform:"translate("+xAxis+"%,-"+yAxis+"%)"})});

//]]>

</script>

</b:if>

For the fourth display option, Add this code before </head> Html

<b:if cond='data:view.isError'>

<div class='arlinacode'>

  <header class='arlinacode__content'>

    <h1 class='arlinacode__title'>ERROR 404</h1>

            <div class='arlinacode__text'>The page you were trying to visit has disappeared or moved to another dimension.</div>

          </header>

  <footer class='arlinacode__footer'>

            <a expr:href='data:blog.homepageUrl' class='ripple tombol'>Back to Homepage</a>

  </footer>

          <div class='wave'/>

  <div class='wave wave2'/>

          <div class='wave wave3'/>

</div>

</b:if>

Then add this CSS code right below <body> or it can be added before </body>

<b:if cond='data:view.isError'>

<style>

*,*::before,*::after{box-sizing:border-box}

html,body{font-size:12px;overflow:hidden;text-align:center;line-height:1.4;overflow:hidden;width:100%}

.arlinacode,html,body{height:100vh}

@keyframes charge{from{transform:translateY(2rem);opacity:0}to{transform:translateY(0);opacity:1}}

@keyframes wave{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}

.arlinacode__content{color:#fff;font-weight:300;padding:0 2rem}

.arlinacode__content,.arlinacode__footer{width:100%;position:relative;z-index:100}

.arlinacode,.arlinacode__content,.arlinacode__footer{display:flex;align-items:center;justify-content:center}

.arlinacode,.arlinacode__content{flex-direction:column}

.arlinacode__footer{flex-wrap:wrap;max-width:600px;opacity:0;animation:charge .5s .5s forwards}

.arlinacode__subtitle,.arlinacode__title{margin:0}

.arlinacode__footer a{text-decoration:none;width:40%;padding:12px 18px;font-size:16px;margin:20px auto 0 auto;cursor:pointer;color:#fff;border:2px solid;border-radius:99em;outline:none;transition:all .3s}

.arlinacode__footer a:active,.arlinacode__footer a:focus,{outline:none}

.arlinacode__footer a:hover{background-color:#fff;color:#222;border-color:#fff}

.arlinacode__subtitle,.arlinacode__text,.arlinacode__title{backface-visibility:hidden}

.arlinacode__title{font-size:2.4rem;font-weight:700;opacity:0;animation:charge .5s forwards}

.arlinacode__text{max-width:50rem;font-weight:normal;padding:2rem 0;font-size:1.3rem;color:rgba(255,255,255,.9);opacity:0;animation:charge .5s .3s forwards}

.wave{opacity:.6;position:absolute;bottom:40%;left:50%;width:6000px;height:6000px;background:#000;margin-left:-3000px;transform-origin:50% 48%;border-radius:46%;animation:wave 12s infinite linear;pointer-events:none}

.wave2{animation:wave 28s infinite linear;opacity:.3}

.wave3{animation:wave 20s infinite linear;opacity:.1}

.wave{background:#000}

.arlinacode{position:relative;background-color:#74b9ff;z-index:999}

.ripple{background-position:center;transition:background 0.8s}

.ripple:hover{background:#37474F radial-gradient(circle,transparent 1%,#263238 1%) center/15000%}

.ripple:active{background-color:#37474F;background-size:100%;transition:background 0s}

@media (min-width:768px){.arlinacode__title{font-size:3.4rem;margin:0 auto 20px auto}.arlinacode__text{font-size:1.5rem}}

</style>

</b:if>

Save the theme and see the results on your blog by adding /error404 behind the url of your blog like this

https://themerum.com/error404

If you have any problem regarding this code, then let me know via comments. I will be happy to help you.