Cara Membuat Error 404 Page Not Found Di Blog Menjadi Keren

Error 404 ini adalah tanda bahwa halaman atau url yang sedang di telusuri tidak bisa ditemukan
Cara mempercantik tampilan error 404 page not found di blogger menjadi lebih keren - Error 404 ini adalah tanda bahwa halaman atau url yang sedang di telusuri tidak bisa ditemukan. Hal ini terjadi biasanya karena halaman atau url yang dicari sudah dihapus atau sudah diganti dengan url lain.

Secara default, sebenarnya blog yang menggunakan blogger blogspot itu sudah otomatis di pasang  page not found error 404 pada blognya. Tapi desain dan tampilannya sangat kurang bagus dan kurang nyaman dilihatnya. Di artikel kali ini saya akan memberikan cara bagaimana untuk mempercantik tampilan dan gaya pada halaman yang eror tersebut. 

Cara ini sangat saya sarankan karena disamping membuat blog terlihat profesional, hal ini juga dapat mempengaruhi pengunjung agar mereka terkesan melihat blog kamu yang lebih keren dari blog yang lain. Untuk cara membuat halaman eror 404 ini ada banyak jenis dan desainnya. Kamu bisa pilih salah satu gaya atau desain sendiri. Berikut adalah cara membuat halaman 404 error page not found menjadi lebih keren dan menarik.

Cara Membuat Error 404 Page Not Found Menjadi Lebih Keren Di Blogger Blogspot


Gambar Cara Membuat Error 404 Page Not Found Di Blog Menjadi Keren

1. Error 404 Page Not Found Style Minion

  • Masuk ke dashboard blogger kamu.
  • Masuk ke menu Theme > Edit HTML.
  • Lalu cari kode ]]></b:skin> dan taruh CSS dibawah ini tepat berada diatas kode tersebut.
/* CSS Custom Error Minion  */
#container-error{text-align:center;z-index:9999;width:100%;height:100%;position:fixed;top:0;right:0;bottom:0;left:0;padding:0;background-color:#EC7E65;color:#fff}
#buttonerror{clear:both;position:absolute;background-color:rgba(255,255,255,.05);color:#EC7E65;position:absolute;left:0;right:0;bottom:15%;margin:auto;max-width:250px;padding:20px;z-index:99999;border-radius:10px;border:5px
 solid #fff;transition:all .5s}
#buttonerror a{color:#fff;font-weight:700;font-size:1.5rem;text-transform:uppercase;letter-spacing:1px}
#buttonerror:hover{background-color:rgba(255,255,255,1)}
#buttonerror:hover a,#buttonerror a:hover{color:#EC7E65}
.minion{position:absolute;background-color:#ffed41;height:360px;width:218px;border-radius:218px
 218px 130px 130px;position:absolute;left:50%;top:45%;margin:-180px 0 0 
-109px;z-index:99999}
.glassesline1{background-color:#494949;border-radius:4px;height:12px;width:238px;position:relative;top:98px;margin:0 -10px}
.glassesline2{background-color:#2d2d2d;border-radius:4px;height:12px;width:238px;position:relative;top:98px;margin:0
 -10px;box-shadow:0 3px 0 0 rgba(0,0,0,0.15)}
.glass1,.glass2{background-color:#e2e2e0;height:102px;width:102px;border-radius:102px;position:absolute;top:55px;box-shadow:-4px
 4px 0 0 rgba(50,50,50,0.15),1px -1px 0 0 rgba(255,255,255,1)}
.glass1{left:10px;right:auto;z-index:2}
.glass2{right:10px;left:auto;z-index:1}
.glass1:before,.glass2:before{background-color:#e5bf36;height:78px;width:78px;border-radius:78px;display:block;position:relative;top:12px;left:12px;content:""}
.glass1:after,.glass2:after{background-color:#FFF;height:58px;width:78px;border-radius:78px;position:absolute;top:22px;left:12px;content:"";animation:eyes
 5s linear 1s infinite}
.eye1,.eye2{background-color:#724c25;height:28px;width:28px;border-radius:28px;position:absolute;top:44px;z-index:3}
.eye1{left:46px}
.eye2{right:46px}
.eye1:before,.eye2:before{background-color:#2c2d2f;height:12px;width:12px;border-radius:12px;display:block;position:relative;top:8px;left:8px;content:""}
.eye1:after,.eye2:after{background-color:#FFF;height:8px;width:8px;border-radius:8px;position:absolute;top:6px;left:12px;content:""}
.mouth{background-color:#603814;height:36px;width:106px;position:absolute;border-radius:0
 0 106px 106px;top:182px;left:55px;overflow:hidden}
.mouth:before{background-color:#FFED41;height:80px;width:205px;position:relative;display:block;border-radius:0
 0 150px 150px;top:-70px;left:-50px;content:"";z-index:2;box-shadow:0 
3px 0 0 rgba(50,50,50,0.15)}
ul.teeth{list-style:none;z-index:1;position:absolute;top:-10px;left:-25px}
ul.teeth li{float:left;height:15px;width:20px;background:#FFF;display:inline-block;border-radius:0 0 15px 15px}
ul.teeth li:first-child,ul.teeth li:last-child{height:10px}
.pants{background-color:#2b5b89;height:66px;position:relative;top:270px;border-radius:0 0 128px 128px;z-index:2}
.pants:before{background-color:#2b5b89;height:58px;width:138px;display:block;position:relative;top:-58px;margin:0
 auto;content:""}
.pants:after{background-color:#224467;height:44px;width:58px;display:block;position:relative;top:-76px;border-radius:0
 0 58px 58px;margin:0 auto;content:""}
.belt-left,.belt-right{background-color:#224467;height:16px;width:70px;position:absolute;top:225px;z-index:3}
.belt-left{left:-10px;transform:scale(1) rotate(24deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg)}
.belt-right{right:-10px;transform:scale(1) rotate(-28deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg)}
.belt-left:after,.belt-right:after{background-color:#2d2d2b;height:11px;width:11px;border-radius:11px;position:absolute;content:""}
.belt-left:after{left:56px;top:3px}
.belt-right:after{right:57px;top:3px}
.legs .left,.legs .right{background:#224467;height:22px;width:44px;position:absolute;top:358px;z-index:1}
.legs .left{left:60px}
.legs .right{right:60px}
.legs
.left:after{position:absolute;content:"";height:0;width:0;border-bottom:22px
 solid #EC7E65;border-right:10px solid transparent}
.legs 
.right:after{position:absolute;content:"";height:0;width:0;border-bottom:22px
 solid #EC7E65;border-left:10px solid transparent;right:0}
.shoe-l,.shoe-r{background-color:#424242;width:52px;height:18px;position:absolute;top:380px}
.shoe-l{left:50px;border-radius:18px 0 0 0}
.shoe-r{right:50px;border-radius:0 18px 0 0}
.shoe-l:after,.shoe-r:after{background-color:#2d2d2d;width:56px;height:5px;position:absolute;content:"";top:18px;left:-2px}
.shoe-l:before{position:absolute;content:"";height:0;width:0;border-top:5px
 solid #224467;border-left:34px solid transparent;left:20px}
.shoe-r:before{position:absolute;content:"";height:0;width:0;border-top:5px
 solid #224467;border-right:34px solid transparent;right:20px}
.hands .left,.hands .right{background-color:#e5c034;height:100px;width:16px;position:absolute;top:242px}
.hands .left{left:-16px;border-radius:16px 0 0 0}
.hands .right{right:-16px;border-radius:0 16px 0 0}
.hands
 .fingers-l,.hands 
.fingers-r{background-color:#424242;position:absolute;content:"";height:16px;width:16px;top:350px;z-index:1}
.hands .fingers-l{left:-6px;border-radius:0 16px 0 0}
.hands .fingers-r{right:-6px;border-radius:16px 0 0 0}
.hands
 .fingers-l:after,.hands 
.fingers-r:after{background-color:#383838;height:16px;width:16px;content:"";border-radius:16px;position:absolute;top:15px;z-index:2}
.hands .fingers-l:after{left:0}
.hands .fingers-r:after{right:0}
.hands
 .fingers-l:before,.hands 
.fingers-r:before{background-color:#2c2c2c;height:16px;width:16px;content:"";border-radius:16px;position:absolute;top:8px;z-index:1}
.hands .fingers-l:before{left:5px}
.hands .fingers-r:before{right:5px}
.hands
 .glove-l,.hands 
.glove-r{background-color:#424242;position:absolute;height:36px;width:16px;border-radius:0
 0 16px 16px;top:342px;z-index:3}
.hands .glove-l{left:-15px}
.hands .glove-r{right:-15px}
.hands
 .glove-l:before,.hands 
.glove-r:before{position:absolute;content:"";height:0;width:0;top:-15px;border-bottom:30px
 solid #424242;border-left:30px solid transparent;transform:scale(1) 
rotate(45deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg)}
.hands .glove-l:before{left:-7px}
.hands .glove-r:before{right:-7px} 

  • Kemudian jangan lupa masukan juga kode berikut diantara tag <body> dan </body> terserah kamu mau taruh setelah <body> atau sebelum </body>. Tapi saya biasa taruh sebelum </body>.
<b:if cond="data:blog.pageType == &quot;error_page&quot;">
    <div id="container-error">
      <div class="minion">
        <div class="hands">
          <div class="left"></div>
          <div class="right"></div>
          <div class="fingers-l"></div>
          <div class="fingers-r"></div>
          <div class="glove-l"></div>
          <div class="glove-r"></div>
        </div>
        <div class="glasses">
          <div class="glassesline1"></div>
          <div class="glassesline2"></div>
          <div class="glass1">
            <div class="eye1"></div>
          </div>
          <div class="glass2">
            <div class="eye2"></div>
          </div>
        </div>
        <div class="mouth">
          <ul class="teeth">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
          </ul>
        </div>
        <div class="belt-left"></div>
        <div class="belt-right"></div>
        <div class="pants"></div>
        <div class="legs">
          <div class="left"></div>
          <div class="right"></div>
          <div class="shoe-l"></div>
          <div class="shoe-r"></div>
        </div>
      </div>
      <div id="buttonerror">
<a expr:href='data:blog.homepageUrl'>Homepage</a></div>
    </div>
  </b:if>
  • Kalau semuanya sudah selesai langsung klik simpan. 

2. Error 404 Page Not Found Style Elegan Simpel

  • Masuk ke dashboard blogger kamu.
  • Masuk ke Theme > Edit HTML dan cari kode ]]></b:skin> atau </style>
  • Kemudian taruh CSS dibawah ini tepat berada sebelum atau diatas kode tersebut.
#error-page {
background-color:#e9e9e9;
position:fixed !important;
position:absolute;
text-align:center;
top:0;
right:0;
bottom:0;
left:0;
z-index:99999;
}
#error-inner {
margin:11% auto;
}
#error-inner .box-404 {
position:relative;
font-weight:bold;
width:220px;
height:210px;
background:#cd0000;
color:#fff;
font-size:80px;
line-height:200px;
margin:0 auto 25px;
}

#error-inner .box-404::after {content:""; width:0;  height:0;  position:absolute; top:0;  right:0;  border-width:30px;  border-style:solid;  border-color:#e9e9e9 #e9e9e9 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:#e9e9e9 transparent transparent #e9e9e9;  display:block;}
#error-inner .boxx-404::after {content:""; width:0;  height:0;  position:absolute; bottom:0;  left:0;  border-width:30px;  border-style:solid;  border-color:transparent transparent #e9e9e9 #e9e9e9;  display:block;}
#error-inner .boxx-404::before {content:""; width:0;  height:0;  position:absolute; bottom:0;  right:0;  border-width:30px;  border-style:solid;  border-color:transparent #e9e9e9 #e9e9e9 transparent;  display:block;}

#error-inner h2 {text-transform:uppercase;color:#cd0000;font-size:50px;margin:0 auto 20px;font-family:monospace}
#error-inner h1 {text-transform:uppercase;color:#399edf;}
#error-inner p {line-height:0.7em;font-size:15px;color:#999;}/code>
  • Lalu taruh juga kode berikut ini sebelum </head>
<b:if cond='data:blog.pageType == &quot;error_page&quot;'>
    <div id='error-page'>
<div id='error-inner'>
<h2>Error</h2>
      <div class='box-404'><div class='boxx-404'>404</div></div>
      <h1>Halaman tidak ditemukan</h1>
  <p>Kemungkinan halaman telah dihapus, atau anda salah menulis URL blog<br/><br/>
    Kembali ke beranda <a href='https://teknothalib.blogspot.com/' title='tekno-thalib'>Tekno Thalib</a></p>
    </div>
      </div>
</b:if>
Jangan lupa ganti tulisan berwarna merah dengan url beranda blog kamu. Dan warna kuning dengan judul blog kamu. Selain itu kamu juga bisa ganti tulisan yang akan muncul saat halaman tersebut error. 
  • Kalau sudah klik simpan.

3. Error 404 Page Not Found Arlina

  • Caranya sama seperti diatas.
  • Kemudian taruh kode dibawah ini Sebelum tag </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>
  • Kemudian taruh kode berikut setelah tag <body>
<b:if cond='!data:view.isError'>
  • Taruh juga kode dibawah ini sebelum tag </body>
<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>
  • Setelah itu klik simpan.

4. Error 404 Dengan Style Volta Redesign

  • Taruh kode dibawah ini seblum</head>
<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>
  • Dan taruh kode dibawah ini sebelum </body>
</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>
  • Terakhir klik simpan dan untuk hasilnya bisa kamu lihat melalui link berikut ini. 
Itulah tutorial cara membuat error 404 page not found diblogger blogspot menjadi lebih keren dan menarik yang bisa dibagikan di artikel kali ini. Sebenarnya masih ada beberapa desain yang gak kalah kerennya dari yang diatas. Tapi saya kira itu juga sudah cukup. 

Source :

https://www.arlinacode.com/2020/08/cara-memasang-halaman-error-404-di-blogger.html?m=1

There are many unique things in the world that you haven't seen

Tulis Komentar

1. Centang kotak "Notify Me" sebelum anda berkomentar.
2. Hindari berkomentar diluar pembahasan artikel diatas.
3. Dilarang memasukan link aktif!
4. Gunakan <i>comment</i> untuk menuliskan kode.
5. Gunakan <em> untuk menuliskan kode yang lebih panjang atau URL.
6. Jika ingin memasukan kode, parse terlebih dahulu (Terutama JavaScript dan HTML).
7. Dilarang mempromosikan produk atau situs apapun di kolom komentar!