Tutorial Membuat Halaman Error 404

Tutorial Cara Membuat Halaman Error 404 Valid HTML5
Please wait 0 seconds...
Scroll Down and click on Go to Link for destination
Congrats! Link is Generated
thumbs

Malam Gaes , kali ini saya mau bagi tutorial membuat halaman Error 404 . Dengan sedikit trik javascript bind url window dan Responsive layout.
Langsung ajah kita simak.

Cara Pasang
Cara pasang nya cukup mudah kalian taruh kode berikut di antara tag <body> dan </body>.
<b:if cond='data:blog.pageType == &quot;error_page&quot;'>
<style scoped='scoped' type='text/css'>
/* Error Page */
html,body{background-color:#334453!important}
.page-container{width:100%;float:left;min-height:100%}
.page-container .page-content{padding-left:250px;z-index:1;background:#f0eff5;min-height:100%;padding-bottom:10px}
.page-container .page-content.page-content-default{background:#334454;padding:0;float:left;width:100%}
#errrr{margin:0!important;font-size:13px!important;line-height:normal!important}
#errrr #text-url{color:#e74c3c;white-space:pre-wrap;word-wrap:break-word;display:block}
/* Error Button */
.back-to{display:block;width:100%;margin-bottom:0;padding:10px 15px;font-family:inherit;font-size:15px;font-weight:400;line-height:1.4;text-align:center;overflow:visible;text-transform:none;border:none;border-radius:4px;-webkit-appearance:button;-webkit-transition:border .25s linear,color .25s linear,background-color .25s linear;transition:border .25s linear,color .25s linear,background-color .25s linear;-webkit-font-smoothing:subpixel-antialiased;white-space:normal;color:#fff;vertical-align:middle;touch-action:manipulation;cursor:pointer;user-select:none;background-image:none}
.back-home{color:#fff;background-color:#5dade2;border-color:#5dade2}
.back-history{color:#fff;background-color:#1abc9c}
.back-home:hover,.back-home.hover,.back-home:focus,.back-home:active,.back-home.active{color:#fff;background-color:#5dade2;border-color:#5dade2}
.back-history:hover,.back-history.hover,.back-history:focus,.back-history:active,.back-history.active{color:#fff;background-color:#48c9b0;border-color:#48c9b0}
/* Error Block */
.block-error{width:400px;margin:50px auto 0}
.block-error .error-num{font-size:190px;font-weight:100;text-align:center;float:left;width:100%;color:#FFF;line-height:180px}
.block-error .error-text{font-size:31px;color:#F5F5F5;float:left;width:100%;font-weight:200;text-align:center;margin-top:10px;text-transform:uppercase}
.block-error .error-description{font-size:13px;color:#F0F0F0;float:left;width:100%;font-weight:300;margin:30px 0;text-align:center}
.block-error .copy{float:left;width:100%;text-align:center;color:#FFF;margin-top:30px;color:#dddddd}
</style>
        <div class='page-container'>
            <div class='page-content page-content-default'>
                <div class='block-error'>
                    <div class='error-num'>404</div>
                    <div class='error-text'>Page not found</div>
                    <div class='error-description'><p id='errrr'/></div>
                    <div class='row'>
                        <div class='col-md-6'>
                            <button class='back-to back-home' onClick='document.location.href = &apos;/&apos;;'>Back to <data:blog.title/></button>
                        </div>
                        <div class='col-md-6'>
                            <button class='back-to back-history' onClick='history.back();'>Previous page</button>
                        </div>
                    </div>
                    <div class='copy'>
                      &#169; All Rights Reserved <data:blog.title/> <span id='current-year'/>
                    </div>
                </div>
            </div>
        </div>
<script type='text/javascript'>
//<![CDATA[
// Get Current Year
function getCurrentYear(){var e=new Date;return e.getFullYear()}el=document.getElementById("current-year"),el.innerHTML=getCurrentYear();
// Get Url
document.getElementById("errrr").innerHTML = "The requested URL <span id='text-url'>"  + window.location.href + "</span> was not found on this server.";
//]]>
</script>
</b:if>
Lalu save Template

Result :
thumbs

Jika ada kekurangan silahkan kreasikan sendiri.

Getting Info...

Post a Comment

Agiel Triono Comment Policy

Do not include spam link !
Please read our Comment Policy before commenting.
Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.