Modifikasi Tampilan Halaman Error Page 404

Discussion in 'HTML & Website Design' started by Virlyz82, Jul 25, 2014.

  1. Virlyz82

    Virlyz82 Member

    Joined:
    Jan 23, 2014
    Messages:
    67
    Likes Received:
    2
    Trophy Points:
    8
    Google+:
    [​IMG]

    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 == &quot;error_page&quot;'>
            <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:&#39;&#39;}
    abbr,acronym{border:0}
    #error-not-found{background: #34495e;font-family:&#39;BebasNeueRegular&#39;;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 == &quot;error_page&quot;'>
    <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
     
  2. cayun

    cayun Member

    Joined:
    Feb 5, 2013
    Messages:
    650
    Likes Received:
    27
    Trophy Points:
    28
    Google+:
    tampilannya kerenn, tapi saya lebih suka redirect aja ke homepage biar gak banyak broken link .. CMIIW
     
  3. Ahmad Suyadi

    Ahmad Suyadi Member

    Joined:
    Jun 27, 2014
    Messages:
    38
    Likes Received:
    1
    Trophy Points:
    8
    Ane setuju sama anda
     
  4. exabytes-id

    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.
     
Loading...

Share This Page