Cara Menghasilkan Halaman Error 404 Super Inovatif Di Blog

Halaman Eror 404 biasa anda peroleh atau anda lihat pada suatu url blog atau situs web yang tidak ada keberadaannya. Alasannya sanggup karena merupakan URL yang dituju sudah dihapus, sudah rusak atau memang belum pernah dibentuk sama sekali. Dan saya eksklusif sering merasa muak dan murka jikalau suatu url yang saya buka ternyata 404 Error Page. Alasanya satu! karena merupakan saya sudah mencampakkan waktu bermanfaat selama 3 detik tapi tidak mendapatkan hasil apa2 pada URL yang saya buka tersebut.

Lihat Demo

Timbulah inspirasi bagaimana mudah-mudahan halaman 404 ini tidak menghasilkan seseorang merasa marah, kecewa, atau merasa jenuh karena merupakan performa yang mereka lihat menyerupai itu-itu saja. Dengan kata lain, kita hibur hadirin blog baik itu dengan desain, kata-kata atau pengarahan yang lebih inovatif mudah-mudahan mereka tidak eksklusif kabur menutup blog anda.

Cara Membuat Halaman Eror 404 Tidak Ditemukan Yang Kreatif dan Keren Di Blog :

: Desain ini murni menggunkan efek dan animasi CSS3 dan cuma akan melakukan pekerjaan pada pada browser modern.
1) Masuk ke dashboard blog anda klik Template, laksanakan Back Up kemudian klik Edit Template
2) Cari kode ]]></b:skin> kemudian copy dan pastekan CSS dibawah ini sempurna diatasnya

 /* 404 Error page blogger design by  ---------------------------------------------------------------- */ #error-page{background:-webkit-linear-gradient(top,#cbebdb 0,#3794c0 120%);background:-moz-linear-gradient(top,#cbebdb 0,#3794c0 120%);background:-o-linear-gradient(top,#cbebdb 0,#3794c0 120%);background:-ms-linear-gradient(top,#cbebdb 0,#3794c0 120%);background:linear-gradient(top,#cbebdb 0,#3794c0 120%);position:fixed!important;position:absolute;text-align:center;top:0;right:0;bottom:0;left:0;z-index:99999}h1{font-size:20px!important;margin:0!important}.tv{display:inline-block;vertical-align:bottom;margin:10px 300px 20px}.tv-60 .tv-frame{width:37.1em;height:25.7em}.tv-frame{background:#222;border:1px solid #222;width:100%;height:100%;padding:5px}.tv-viewport{font-size:15px;background:#444;background:#4c4c4c;background:-moz-linear-gradient(-45deg,#4c4c4c 0,#2c2c2c 46%,#2b2b2b 53%,#333 100%);background:-webkit-gradient(linear,left top,right bottom,color-stop(0%,#4c4c4c),color-stop(46%,#2c2c2c),color-stop(53%,#2b2b2b),color-stop(100%,#333));background:-webkit-linear-gradient(-45deg,#4c4c4c 0,#2c2c2c 46%,#2b2b2b 53%,#333 100%);background:-o-linear-gradient(-45deg,#4c4c4c 0,#2c2c2c 46%,#2b2b2b 53%,#333 100%);background:-ms-linear-gradient(-45deg,#4c4c4c 0,#2c2c2c 46%,#2b2b2b 53%,#333 100%);background:linear-gradient(135deg,#4c4c4c 0,#2c2c2c 46%,#2b2b2b 53%,#333 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#4c4c4c',endColorstr='#333333',GradientType=1);width:100%;height:100%;position:relative}.tv-viewport-size{color:#f8f8f8;text-align:center;width:100%;margin-top:10px;display:block;height:20px;position:absolute;font-size:1.1em;font-weight:bolder}.tv-stand{width:50%;height:.6em;background:#333;margin:0 auto}.eror{color:#00a5ad;font-size:100px;animation-name:blinker;animation-duration:1.75s;animation-timing-function:linear;animation-iteration-count:infinite;-webkit-animation-name:blinker;-webkit-animation-duration:1.75s;-webkit-animation-timing-function:linear;-webkit-animation-iteration-count:infinite}@-moz-keyframes blinker{0%{opacity:1.0}50%{opacity:.0}100%{opacity:1.0}}@-webkit-keyframes blinker{0%{opacity:1.0}50%{opacity:.0}100%{opacity:1.0}}@keyframes blinker{0%{opacity:1.0}50%{opacity:.0}100%{opacity:1.0}}span[class*="l-"]{height:4px;width:4px;background:#00909e;display:inline-block;margin:12px 2px;border-radius:100%;-webkit-border-radius:100%;-moz-border-radius:100%;-webkit-animation:loader 4s infinite;-webkit-animation-timing-function:cubic-bezier(0.030,0.615,0.995,0.415);-webkit-animation-fill-mode:both;-moz-animation:loader 4s infinite;-moz-animation-timing-function:cubic-bezier(0.030,0.615,0.995,0.415);-moz-animation-fill-mode:both;-ms-animation:loader 4s infinite;-ms-animation-timing-function:cubic-bezier(0.030,0.615,0.995,0.415);-ms-animation-fill-mode:both;animation:loader 4s infinite;animation-timing-function:cubic-bezier(0.030,0.615,0.995,0.415);animation-fill-mode:both}span.l-1{-webkit-animation-delay:1s;animation-delay:1s;-ms-animation-delay:1s;-moz-animation-delay:1s}span.l-2{-webkit-animation-delay:.8s;animation-delay:.8s;-ms-animation-delay:.8s;-moz-animation-delay:.8s}span.l-3{-webkit-animation-delay:.6s;animation-delay:.6s;-ms-animation-delay:.6s;-moz-animation-delay:.6s}span.l-4{-webkit-animation-delay:.4s;animation-delay:.4s;-ms-animation-delay:.4s;-moz-animation-delay:.4s}span.l-5{-webkit-animation-delay:.2s;animation-delay:.2s;-ms-animation-delay:.2s;-moz-animation-delay:.2s}span.l-6{-webkit-animation-delay:0;animation-delay:0;-ms-animation-delay:0;-moz-animation-delay:0}@-webkit-keyframes loader{0%{-webkit-transform:translateX(-30px);opacity:0}25%{opacity:1}50%{-webkit-transform:translateX(30px);opacity:0}100%{opacity:0}}@-moz-keyframes loader{0%{-moz-transform:translateX(-30px);opacity:0}25%{opacity:1}50%{-moz-transform:translateX(30px);opacity:0}100%{opacity:0}}@-keyframes loader{0%{-transform:translateX(-30px);opacity:0}25%{opacity:1}50%{-transform:translateX(30px);opacity:0}100%{opacity:0}}@-ms-keyframes loader{0%{-ms-transform:translateX(-30px);opacity:0}25%{opacity:1}50%{-ms-transform:translateX(30px);opacity:0}100%{opacity:0}}.pesan-eror{padding-left:3px;width:80%;margin:10px auto 40px;background:#54a5c5;color:#fff;font-size:15px;border-radius:1%;position:relative;text-alignt:justify;padding:5px}.pesan-eror::after{content:" ";width:0;height:0;bottom:-17px;border-color:#54a5c5 transparent transparent;border-style:solid;border-width:20px 20px 0;position:absolute;left:5%}.ghost{margin-left:15%;background-image:-webkit-linear-gradient(45deg,transparent 50%,#2c2c2c 50%),-webkit-linear-gradient(135deg,transparent 50%,#2c2c2c 50%),-webkit-linear-gradient(#2c2c2c 50%,#2c2c2c 50%);background-image:-moz-linear-gradient(45deg,transparent 50%,#2c2c2c 50%),-moz-linear-gradient(315deg,transparent 50%,#2c2c2c 50%),-moz-linear-gradient(#2c2c2c 50%,#2c2c2c 50%);background-image:-o-linear-gradient(45deg,transparent 50%,#2c2c2c 50%),-o-linear-gradient(135deg,transparent 50%,#2c2c2c 50%),-o-linear-gradient(#2c2c2c 50%,#2c2c2c 50%);background-image:-ms-linear-gradient(45deg,transparent 50%,#2c2c2c 50%),-ms-linear-gradient(135deg,transparent 50%,#2c2c2c 50%),-ms-linear-gradient(#2c2c2c 50%,#2c2c2c 50%);background-image:linear-gradient(45deg,transparent 50%,#2c2c2c 50%),linear-gradient(315deg,transparent 50%,#2c2c2c 50%),linear-gradient(#2c2c2c 50%,#2c2c2c 50%);background-position:50% 100%,50% 100%,50% 0;background-repeat:repeat-x;-webkit-background-size:1em 1em;-moz-background-size:1em 1em;background-size:1em 1em;position:relative;margin-top:1.5em;height:1.5em;width:3em;animation-name:floating;-webkit-animation-name:floating;animation-duration:1.5s;-webkit-animation-duration:1.5s;animation-iteration-count:infinite;-webkit-animation-iteration-count:infinite}@keyframes floating{0%{transform:translateY(0%)}50%{transform:translateY(8%)}100%{transform:translateY(0%)}}@-webkit-keyframes floating{0%{-webkit-transform:translateY(0%)}50%{-webkit-transform:translateY(8%)}100%{-webkit-transform:translateY(0%)}}.ghost:after,.ghost:before{background-image:-webkit-radial-gradient(transparent 35%,#2c2c2c 35%);background-image:-moz-radial-gradient(transparent 35%,#2c2c2c 35%);background-image:-o-radial-gradient(transparent 35%,#2c2c2c 35%);background-image:-ms-radial-gradient(transparent 35%,#2c2c2c 35%);background-image:radial-gradient(transparent 35%,#2c2c2c 35%);border-top:.5em solid #2c2c2c;content:'';height:1em;position:absolute;top:-1.5em;width:1em}.ghost:after{background-position:75% 75%;border-left:.5em solid #2c2c2c;border-radius:3em 0 0 0;left:0}.ghost:before{background-position:0 100%;border-right:.5em solid #2c2c2c;border-radius:0 3em 0 0;right:0}.wrapper{width:150px;height:150px;position:absolute;top:calc(30% - 75px);left:calc(80% - 75px)}.cloud{position:absolute;bottom:12px;left:8px;z-index:2;opacity:0;animation:cloud 10s 0s linear infinite}.cloud .cloud1:not(.c_shadow) ul li{animation:cloudi 10s .1s linear infinite}.cloud .cloud1:not(.c_shadow):before{animation:cloudi 10s 0s linear infinite}.cloud_s{position:absolute;bottom:70px;left:150px;transform:scale(0.7,0.7) matrix(-1,0,0,1,0,0);z-index:1;opacity:0;animation:cloud_s 10s 0s linear infinite}.cloud_s .c_shadow{transform:scale(1.02,1.02)}.cloud_vs{position:absolute;bottom:90px;left:30px;transform:scale(0.5,0.5);z-index:0;opacity:0;animation:cloud_vs 10s 0s linear infinite}.c_shadow{z-index:4!important;left:-5px;bottom:-3px!important}.c_shadow:before{background:#33495f!important}.c_shadow ul li{width:60px!important;height:60px!important;background:#33495f!important;float:left;position:absolute;bottom:-2px!important;border-radius:360px}.c_shadow ul li:nth-child(2){width:80px!important;height:80px!important;background:#33495f!important;float:left;border-radius:360px;position:absolute;bottom:16px!important;left:25px!important}.c_shadow ul li:nth-child(3){width:70px!important;height:70px!important;background:#33495f!important;float:left;border-radius:360px;position:absolute;bottom:6px!important;left:60px!important}.c_shadow ul li:last-child{width:60px!important;height:60px!important;background:#33495f!important;float:left;border-radius:360px;position:absolute;bottom:0;left:90px}.cloud1{position:absolute;bottom:0;z-index:5}.cloud1:before{content:'';position:absolute;bottom:0;left:28px;width:90px;height:20px;background:#fff}.cloud1 ul{list-style:none;margin:0;padding:0}.cloud1 ul li{width:50px;height:50px;background:#fff;float:left;border-radius:360px}.cloud1 ul li:nth-child(2){width:70px;height:70px;background:#fff;float:left;border-radius:360px;position:absolute;bottom:18px;left:25px}.cloud1 ul li:nth-child(3){width:60px;height:60px;background:#fff;float:left;border-radius:360px;position:absolute;bottom:8px;left:60px}.cloud1 ul li:last-child{width:50px;height:50px;background:#fff;float:left;border-radius:360px;position:absolute;bottom:0;left:90px}.thunder{position:absolute;bottom:100px;left:65px;width:12px;height:12px;background:#f9db62;transform:skew(-25deg);opacity:0;animation:thunder 10s 0s linear infinite}.thunder:before{content:'';position:absolute;top:11px;left:0;width:25px;height:8px;background:#f9db62}.thunder:after{content:'';position:absolute;width:0;height:0;top:18px;right:-14px;border-left:5px solid transparent;border-right:5px solid transparent;border-top:20px solid #f9db62;transform:skew(5deg)}@keyframes cloud{0%{transform:scale(0.8);left:120px;bottom:35px;opacity:0}2%{opacity:1}3.5%{bottom:35px;left:10px;opacity:1}16%{transform:scale(0.8)}18%{transform:scale(0.95)}19%{transform:scale(0.9)}48%{opacity:1;bottom:35px}50%{bottom:70px}96%{opacity:1}100%{opacity:0;bottom:70px;left:10px}}@keyframes cloud_s{0%{transform:scale(0.6);opacity:0;bottom:40px;left:18px}23%{opacity:0}24%{opacity:1;bottom:40px;left:30px}28%{opacity:1;bottom:85px;left:60px}32%{transform:scale(0.6)}34%{transform:scale(0.75)}35%{transform:scale(0.7)}48%{opacity:1}49%{opacity:0}100%{transform:scale(0.7);opacity:0;bottom:85px;left:60px}}@keyframes cloud_vs{0%{opacity:0;bottom:85px;left:60px}39%{opacity:0}40%{opacity:1;bottom:85px;left:60px}42%{bottom:125px;left:10px}43%{bottom:120px;left:15px}48%{opacity:1}49%{opacity:0}100%{opacity:0;bottom:120px;left:15px}}@keyframes cloudi{0%{background:#fff}56%{background:#fff}57%{background:#92a4b6}100%{background:#92a4b6}}@keyframes thunder{0%{opacity:0;bottom:100px;left:65px}62%{opacity:0;bottom:100px;left:65px}64%{opacity:1;bottom:50px;left:60px}65%{opacity:1;bottom:55px;left:61px}72%{opacity:1;bottom:55px;left:61px}73%{opacity:0}100%{opacity:0;bottom:55px}}@keyframes fade_in{0%{opacity:0}8%{opacity:1}9%{opacity:1}11%{opacity:1}12%{opacity:0}100%{oapcity:0}}.box{width:20%;cursor:pointer;border-radius:5px;background-color:#e14d42;margin:0 auto;font-size:18px;color:#fff;padding:5px;text align:center position:fixed!important;top:20%;left:12%}.box:hover{opacity:.7}.box a{color:#fff!important;text-decoration:none} /* 404 Error page end ---------------------------------------------------------------- */ 
 

3) Cari tag pembuka <body> kemudian salin dan pastekan pembuka conditional tag dibawah ini sempurna di bawah <body> tersebut

 <b:if cond='data:blog.pageType != &quot;error_page&quot;'> 
 

4) Cari tag epilog </body> kemudian salin dan pastekan epilog conditional tag dibawah ini sempurna di atas </body>

 <b:else/> <div id='error-page'>   <div class='pesan-eror'>     Sepertinya cuaca sedang buruk atau anda belum mengeluarkan duit tagihan! Santai, hubungi admin untuk melaporkan URL/Channel kesayangan anda yang rusak karena merupakan petir ke blah@heyriad.com :)   </div>   <div class='ghost'/>   <div class='tv tv-60'>     <div class='tv-frame'>       <div class='tv-viewport'>         <div class='tv-viewport-size'>           <h1>             CHANNEL TIDAK DITEMUKAN!           </h1>           <br/>           <span class='eror'>             404           </span>           <br/>           sedang mencari sinyal           <br/>           <span class='l-1'/>           <span class='l-2'/>           <span class='l-3'/>           <span class='l-4'/>           <span class='l-5'/>           <span class='l-6'/>         </div>       </div>     </div>     <div class='tv-stand'>     </div>   </div>   <div class='wrapper'>     <div class='cloud'>       <div class='cloud1'>         <ul>           <li/>           <li/>           <li/>           <li/>         </ul>       </div>       <div class='cloud1 c_shadow'>         <ul>           <li/>           <li/>           <li/>           <li/>         </ul>       </div>     </div>     <div class='cloud_s'>       <div class='cloud1'>         <ul>           <li/>           <li/>           <li/>           <li/>         </ul>       </div>       <div class='cloud1 c_shadow'>         <ul>           <li/>           <li/>           <li/>           <li/>         </ul>       </div>     </div>          <div class='cloud_vs'>       <div class='cloud1'>         <ul>           <li/>           <li/>           <li/>           <li/>         </ul>       </div>       <div class='cloud1 c_shadow'>         <ul>           <li/>           <li/>           <li/>           <li/>         </ul>       </div>     </div>     <div class='thunder'/>   </div>   <a expr:href='data:blog.homepageUrl'>     <div class='box'>       Home     </div>   </a> </div> </b:if> 
 

5) Klik Simpan Template

Desain diatas cuma selaku inspirasi karna untuk menghasilkan Error 404 Page Not Found yang inovatif itu tergantung dari niche blog anda. Dan silahkan anda pakai rancangan 404 Error Page diatas untuk dipraktekkan di blogspot anda. Happy Coding!

Sumber https://8tutorialandroid.blogspot.com/
Sumber https://henponterbaru.blogspot.com/