Cara Menciptakan Halaman Error 404 Super Kreatif Di Blog

Halaman Eror 404 biasa anda temukan atau anda lihat pada sebuah url blog atau website yang tidak ada keberadaannya. Alasannya dapat alasannya ialah URL yang dituju telah dihapus, telah rusak atau memang belum pernah dibentuk sama sekali. Dan saya pribadi sering merasa muak dan murka kalau sebuah url yang saya buka ternyata 404 Error Page. Alasanya satu! alasannya ialah saya telah membuang waktu berharga selama 3 detik tetapi tidak menemukan hasil apa2 pada URL yang saya buka tersebut.

Lihat Demo

Timbulah ide bagaimana supaya halaman 404 ini tidak menciptakan seseorang merasa marah, kecewa, atau merasa bosan alasannya ialah tampilan yang mereka lihat menyerupai itu-itu saja. Dengan kata lain, kita hibur pengunjung blog baik itu dengan desain, kata-kata atau pengarahan yang lebih kreatif supaya mereka tidak pribadi kabur menutup blog anda.

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

: Desain ini murni menggunkan dampak dan animasi CSS3 dan hanya akan bekerja pada pada browser modern.
1) Masuk ke dashboard blog anda klik Template, lakukan 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 jelek atau anda belum membayar tagihan! Santai, hubungi admin untuk melaporkan URL/Channel kesayangan anda yang rusak alasannya ialah 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 hanya sebagai wangsit karna untuk menciptakan Error 404 Page Not Found yang kreatif itu tergantung dari niche blog anda. Dan silahkan anda gunakan desain 404 Error Page diatas untuk diterapkan di blogspot anda. Happy Coding!

Share this post