Sebuah kesalahan 404 adalah kode status HTTP yang berarti bahwa halaman yang Anda mencoba untuk mencapai pada sebuah situs web tidak dapat ditemukan pada server mereka. Secara teknis, sebuah Error 404 adalah kesalahan client-side, yang bisa berarti bahwa kesalahan adalah kesalahan Anda, baik karena anda mengetik URL yang salah atau halaman telah dipindahkan atau dihapus dari situs web. Kemungkinan lain adalah jika sebuah situs web telah pindah halaman atau sumber daya tetapi melakukannya tanpa mengarahkan URL lama ke yang baru. Saya tidak membahas panjang lebar tentang penyebab kesalahan Error 404 namun saya hanya akan memberikan tutorial blog untuk memodifikasi halaman error page dengan benar dengan menambahkan sedikit CSS sebagai efek tampilan dengan gaya Flat Ui style. Untuk tampilannya seperti demo dibawah ini: DEMO Secara default penggunaan tag kondisional untuk halaman error page adalah seperti ini : Code: <body> <b:if cond='data:blog.pageType == "error_page"'> <div id='error-page'> <h1>Pesan error 404 yang ingin anda sampaikan</h1> </div> </b:if> </body> Kemudian kita akan memodifikasinya dengan sedikit menambahkan efek CSS misalnya seperti ini : Code: body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0} html,body{margin:0;padding:0} table{border-collapse:collapse;border-spacing:0} fieldset,img{border:0} input{border:1px solid #b0b0b0;padding:3px 5px 4px;color:#979797;width:190px} address,caption,cite,code,dfn,th,var{font-style:normal;font-weight:normal} ol,ul{list-style:none} caption,th{text-align:left} h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal} q:before,q:after{content:''} abbr,acronym{border:0} #error-not-found{background: #34495e;font-family:'BebasNeueRegular';z-index:999999;position:fixed;top:0px;left:0px;width:100%;height:100%;z-index:999999} .eror-page{background:#34495e;position:absolute;width:100%;height:100%;left:0px;top:0px;z-index:1000} #error-not-found h2{position:absolute;top:50%;line-height:100px;height:100px;margin-top:-50px;font-size:100px;width:100%;text-align:center;color:transparent;-webkit-animation:blurFadeInOut 3s ease-in backwards;-moz-animation:blurFadeInOut 3s ease-in backwards;-ms-animation:blurFadeInOut 3s ease-in backwards;animation:blurFadeInOut 3s ease-in backwards} #error-not-found h2.frame-1{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none;color:transparent;text-shadow:0px 0px 1px #fff} #error-not-found h2.frame-1 span{-webkit-animation:blurFadeIn 1s ease-in 2s backwards;-moz-animation:blurFadeIn 1s ease-in 2s backwards;-ms-animation:blurFadeIn 1s ease-in 2s backwards;animation:blurFadeIn 1s ease-in 2s backwards;color:transparent;text-shadow:0px 0px 1px #fff} #error-not-found h2.frame-1 span:nth-child(2){-webkit-animation-delay:2s;-moz-animation-delay:2s;-ms-animation-delay:2s;animation-delay:2s} #error-not-found h2.frame-1 span:nth-child(3){-webkit-animation-delay:3s;-moz-animation-delay:3s;-ms-animation-delay:3s;animation-delay:3s} .sp-circle-link{position:absolute;left:50%;bottom:100px;margin-left:-50px;text-align:center;line-height:100px;width:100px;height:100px;background:#2c3e50;color:#c0392b;border:1px solid #2c3e50;font-size:25px;-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;-webkit-animation:fadeInRotate 1s linear 4s backwards;-moz-animation:fadeInRotate 1s linear 4s backwards;-ms-animation:fadeInRotate 1s linear 4s backwards;animation:fadeInRotate 1s linear 4s backwards;-webkit-transform:scale(0.8) rotate(0deg);-moz-transform:scale(0.8) rotate(0deg);-o-transform:scale(0.8) rotate(0deg);-ms-transform:scale(0.8) rotate(0deg);transform:scale(0.8) rotate(0deg)} .sp-circle-link:hover{background:#16a085;color:#fff;border:1px solid #16a085} @-webkit-keyframes blurFadeInOut{0%{opacity:0;text-shadow:0px 0px 40px #fff;-webkit-transform:scale(1.3)} 20%,75%{opacity:1;text-shadow:0px 0px 1px #fff;-webkit-transform:scale(1)} 100%{opacity:0;text-shadow:0px 0px 50px #fff;-webkit-transform:scale(0)} } @-webkit-keyframes blurFadeIn{0%{opacity:0;text-shadow:0px 0px 40px #fff;-webkit-transform:scale(1.3)} 50%{opacity:0.5;text-shadow:0px 0px 10px #fff;-webkit-transform:scale(1.1)} 100%{opacity:1;text-shadow:0px 0px 1px #fff;-webkit-transform:scale(1)} } @-webkit-keyframes fadeInBack{0%{opacity:0;-webkit-transform:scale(0)} 50%{opacity:0.4;-webkit-transform:scale(1)} 100%{opacity:0.2;-webkit-transform:scale(2)} } @-webkit-keyframes fadeInRotate{0%{opacity:0;-webkit-transform:scale(0) rotate(360deg)} 100%{opacity:1;-webkit-transform:scale(1) rotate(0deg)} } @-moz-keyframes blurFadeInOut{0%{opacity:0;text-shadow:0px 0px 40px #fff;-moz-transform:scale(1.3)} 20%,75%{opacity:1;text-shadow:0px 0px 1px #fff;-moz-transform:scale(1)} 100%{opacity:0;text-shadow:0px 0px 50px #fff;-moz-transform:scale(0)} } @-moz-keyframes blurFadeIn{0%{opacity:0;text-shadow:0px 0px 40px #fff;-moz-transform:scale(1.3)} 100%{opacity:1;text-shadow:0px 0px 1px #fff;-moz-transform:scale(1)} } @-moz-keyframes fadeInBack{0%{opacity:0;-moz-transform:scale(0)} 50%{opacity:0.4;-moz-transform:scale(1)} 100%{opacity:0.2;-moz-transform:scale(2)} } @-moz-keyframes fadeInRotate{0%{opacity:0;-moz-transform:scale(0) rotate(360deg)} 100%{opacity:1;-moz-transform:scale(1) rotate(0deg)} } @keyframes blurFadeInOut{0%{opacity:0;text-shadow:0px 0px 40px #fff;transform:scale(1.3)} 20%,75%{opacity:1;text-shadow:0px 0px 1px #fff;transform:scale(1)} 100%{opacity:0;text-shadow:0px 0px 50px #fff;transform:scale(0)} } @keyframes blurFadeIn{0%{opacity:0;text-shadow:0px 0px 40px #fff;transform:scale(1.3)} 50%{opacity:0.5;text-shadow:0px 0px 10px #fff;transform:scale(1.1)} 100%{opacity:1;text-shadow:0px 0px 1px #fff;transform:scale(1)} } @keyframes fadeInBack{0%{opacity:0;transform:scale(0)} 50%{opacity:0.4;transform:scale(1)} 100%{opacity:0.2;transform:scale(2)} } @keyframes fadeInRotate{0%{opacity:0;transform:scale(0) rotate(360deg)} 100%{opacity:1;transform:scale(1) rotate(0deg)} } Dan yang terakhir markup html untuk memanggil kode CSS diatas agar tampil di halaman error page adalah seperti ini: Code: <body> ....................bla bla bla <b:if cond='data:blog.pageType == "error_page"'> <div class='container'> <div id='error-not-found'> <div class='eror-page'> <div class='sp-globe'/> <h2 class='frame-1'> <span> Page Not</span> <span>Found</span></h2> <a class='sp-circle-link' expr:href='data:blog.homepageUrl'>HOME</a> </b:if> </body> Silakan berkreasi sesuai selera anda dan semoga bermanfaat. SOURCE Virlyz82, Jul 25, 2014 #1 cayun Member Joined: Feb 5, 2013 Messages: 661 Likes Received: 27 Trophy Points: 28 tampilannya kerenn, tapi saya lebih suka redirect aja ke homepage biar gak banyak broken link .. CMIIW cayun, Jul 25, 2014 #2 Ahmad Suyadi Member Joined: Jun 27, 2014 Messages: 38 Likes Received: 1 Trophy Points: 8 Ane setuju sama anda Ahmad Suyadi, Jul 25, 2014 #3 exabytes-id Member Joined: Oct 3, 2013 Messages: 866 Likes Received: 35 Trophy Points: 28 yups, klo di wp mending langsung di redirect saja jika ketemu dengan 404 error page speerti ini. google akan mendeteksi juga klo di temukan error 404 di sebuah situs. exabytes-id, Jul 30, 2014 #4 (You must log in or sign up to reply here.) Show Ignored Content Loading... Similar Threads - Modifikasi Tampilan Halaman Modifikasi Tampilan About me Virlyz82, Nov 30, 2014, in forum: HTML & Website Design Replies: 3 Views: 1,166 Ilham Rizky Dec 9, 2014 Modifikasi Contact Form Dengan Style UI Virlyz82, Jun 9, 2014, in forum: HTML & Website Design Replies: 7 Views: 2,110 Dede P Nov 12, 2014 (ASK) Tampilan ADD New Post Wordpress Berubah DwiKhasbullah, Oct 30, 2015, in forum: HTML & Website Design Replies: 25 Views: 4,405 DwiKhasbullah Nov 15, 2015 [ASK] Kenapa Tampilan Website Jadi Berbeda Di Browser Chrome & Firefox ? Zerki Juliandri, Aug 5, 2015, in forum: HTML & Website Design Replies: 18 Views: 5,302 Zerki Juliandri Aug 8, 2015 [SHARE] Cara Mudah Membuat Tampilan Website Responsive iska, Mar 14, 2014, in forum: HTML & Website Design Replies: 27 Views: 5,417 pram Jul 28, 2015 Share This Page Tweet Log in with Facebook Log in with Twitter Your name or email address: Do you already have an account? No, create an account now. Yes, my password is: Forgot your password? Stay logged in
tampilannya kerenn, tapi saya lebih suka redirect aja ke homepage biar gak banyak broken link .. CMIIW
yups, klo di wp mending langsung di redirect saja jika ketemu dengan 404 error page speerti ini. google akan mendeteksi juga klo di temukan error 404 di sebuah situs.