How To Add Custom Page 404 Error Not Found On Blogger

Error 404 'Not Found' page is a page generated by the server for information that the link you visited on a blog page could not be found ...
How To Add Custom Page 404 Error Not Found On Blogger

Create Custom Page 404 Not Found On Blogger

On this occasion Blog Faters will share Blogger Tips on How to Create a 404 Error Page on Blogger.

Error 404 'Not Found' page is a page generated by the server for information that the link you visited on a blog page could not be found.  Usually you will experience a 404 error when the link has been changed or deleted, or it can be when you click on a blog address link with a writing error in it.

Blogger has also provided by default to display pages that are not found.  Examples like this:


How To Add Custom Page 404 Error Not Found On Blogger



For those who want to change the default view provided by Blogger, here I will provide 4 display options from the 404 Error Page that you can install easily.  Here are the steps

How to Install 404 Error Page on Blogger


First, open Blogger > Click the Theme Menu > Click Edit HTML > Then find and add the code below before </head>

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

The next step, find the code <body> then put this code below it.
<b:if cond='!data:view.isError'>

Then add the code below before </body>

</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 Save theme button and see the results.



For the second display option, you just have to choose this version of CSS

<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://1.bp.blogspot.com/-U_L4Azlx-hU/Xx2GZiaUfGI/AAAAAAAAAUw/1ulmLXUE8wUYuXgvZpsWvcIYDp46ZmEXgCLcBGAsYHQ/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>

Change the marked code to change the background.



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

CSS

<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

</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, you don't need to add the code above.  Add this code before </head>


<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 code just 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 your blog url like this


https://www.url_blog.com/error404


That's about How to Install a 404 Error Page on Blogger from Can Design. Thank you and greetings.
Words can inspire, thoughts can provoke, but only action truly brings you closer to your dreams.

Post a Comment

© Blog Faters. All rights reserved. Developed by Jago Desain