Sunday, 16 August 2020

How to put a 404 error page on Blogger

How to put a 404 error page on Blogger

How to put a 404 error page on Blogger
Sunday, 16 August 2020

On this occasion Arlina Code will share Blogger Tips on How to Install a 404 Error Page on Blogger .

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 on a blog address link with a typo in it.

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

For those who want to change the default appearance 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 put a 404 error page on Blogger

First, open Blogger > Click the Themes 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, look for the code <body>then place this code under 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, just select 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 code marked to change the background.


For the third display option, my friend, choose 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{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;max-width:120px;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 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 it /error404behind your blog url like this

https://www.alamat_blog.com/error404


That's about how to put a 404 error page on Blogger from BLOGHINT.TECHThank you and regards.
How to put a 404 error page on Blogger
4/ 5
Oleh

Comments