Membuat Halaman Error 404 (Page Not Found) Di Blog


Setelah kemarin posting tentang Cara Hosting File Js, CSS dan HTML Di Github
Sekarang saya akan coba posting tentang Membuat Halaman Error 404 Di Blog - Halaman error atau 404 adalah halaman yang tidak ada pada suatu blog, atau halaman tersebut sudah di hapus oleh si pemilik blog, atau juga salah mengetikan url yang menjadikan menemukan halaman error (404 Page Not Found)
karena error page biasanya akan di tampilkan ketika anda atau pengunjung blog anda mengunjungi halaman blog yang tidak ada atau URL alamat tersebut sudah di hapus.

Mungkin Jika template yang anda pakai adalah template jaman sekarang, mungkin sudah di lengkapi dengan halam error/error page tersebut. tetapi barangkali anda tertarik dengan halaman error page yang saya bagikan di sini, anda juga bisa menganti atau memodifikasinya sesuai keinginan anda.

Sudah sangat banyak di luar sana yang membagikan Cara Membuat Halaman Error Di Blog atau Membuat Halaman 404 Error Page.
Tetapi di sini saya akan share juga untuk sobat blogger, barangkali ada yang belum membuat error page di blog nya. Script Halaman Error Page ini saya dapatkan dari Mba Dian Anarchyta, admin dari blog afowles.blogspot.com dan Mas Adhy Suryadi, admin dari blog kompiajaib.com
Disini saya akan membagikan dua (2) Halaman error. yang pertama halaman error ala blog Dian Anarchyta. Yang kedua error page ala blog Kompi Ajaib.

Jika anda ingin membuat error page di blog anda, Mari ikuti caranya di bawah ini. Error Page ala dian anarchyta, halaman error page ini sudah responsive.


1. Langkah Pertama masuk pada akun blogger anda.

2. Yang kedua, Langsung menuju Template ==> Edit HTML

3. Simpan Css di bawah ini tepat di bawah kode <body>

<b:if cond='data:blog.pageType == &quot;error_page&quot;'>
<style scoped='scoped' type='text/css'>
/*<![CDATA[*/
.loading {background:#333333;background-size:cover;z-index:1000;}
.error-wrap.error-wrap-404{width:875px;margin:12% auto 0;color:#fff;text-align:center;}
.error-wrap .metro.big{float:left;width:340px;height:340px;margin:0 10px 10px 0;font-family:&quot;Oswald&quot;;} 
.error-wrap.error-wrap-404 .metro.double{float:left;width:340px;height:165px;margin:0 10px 10px 0;font-family:&quot;Oswald&quot;;}  

.error-wrap.error-wrap-404 .home{color:#ffffff;font-size:70px;text-decoration:none;margin-top:40px;display:inline-block;}  
.error-wrap.metro.double .page-txt{font-family:&quot;Oswald&quot;; font-size:30px;}  
.error-wrap.error-wrap-404 .metro{float:left;}  
.error-wrap.error-wrap-404 .metro.big span{padding-top:130px;}
.error-wrap.error-wrap-404 .terques{background:rgba(75,183,192,0.8);}  
.error-wrap.error-wrap-404 .red{background:rgba(232,104,127,0.8);}  
.error-wrap.error-wrap-404 .gray{background:rgba(00,00,00,0.6);} 
.error-wrap{width:100%;margin:12% auto 0;color:#fff;text-align:center;} 
.error-wrap .metro{width:165px;height:165px;display:inline-block;margin:0 10px 10px 0;} 
.error-wrap .metro span{font-size:70px;padding-top:70px;display:inline-block;} 
.error-wrap  p {font-family:&quot;Oswald&quot;;padding-top:20px;font-size:16px;} 
.error-wrap  p a{color:#48cffe;}
.error-wrap .green{background:rgba(142,191,72,0.8);}  
.error-wrap .yellow{background:rgba(245,193,70,0.8);}  
.error-wrap .purple{background:rgba(175,94,197,0.8);} 

@media(min-width:768px) and (max-width:979px) {.error-wrap.error-wrap-404 {width:100%;} 
.error-wrap.error-wrap-404 .metro.big{width:98%!important;}
.error-wrap.error-wrap-404 .metro {width:31.8%;} 
.error-wrap.error-wrap-404 .metro.double{height:165px!important;width:98%!important;}} 

@media (max-width:767px) {.error-wrap.error-wrap-404{width:100%;}  
.error-wrap.error-wrap-404 .metro.big{width:98%!important;}  
.error-wrap.error-wrap-404 .metro{width:31.2%;}  
.error-wrap.error-wrap-404 .metro.double{height:165px!important;width:98%!important;}}

@media(max-width:430px) {.error-wrap.error-wrap-404{width:98%;} 
.error-wrap.error-wrap-404 .metro {width:31.2%;}  
.error-wrap.error-wrap-404 .metro.double{height:120px!important;width:98%!important;}}

@media (max-width:385px) {.error-wrap.error-wrap-404{width:100%;}  
.error-wrap.error-wrap-404 .metro.big,.error-wrap.error-wrap-404 .metro.double,.error-wrap.error-wrap-404 .metro{width: 98%;}  
.error-wrap.error-wrap-404 .metro.double{height:165px!important;}} 

@media (max-width:320px) {.error-wrap.error-wrap-404{width:100%;}  
.error-wrap.error-wrap-404 .metro.big,.error-wrap.error-wrap-404 .metro.double,.error-wrap.error-wrap-404 .metro {width:98%;} }
/*]]>*/
</style>

<div class='error-wrap error-wrap-404'>
<div class='metro big terques'>
<span> OOPS! </span>
</div>
<div class='metro green'>
<span> 4 </span>
</div>
<div class='metro yellow'>
<span> 0 </span>
</div>
<div class='metro purple'>
<span> 4 </span>
</div>
<div class='metro double red'>
<span class='page-txt'> Page Not Found </span>
</div>
<div class='metro gray'>
<a class='home' expr:href='data:blog.homepageUrl'><i aria-hidden='true' class='fa fa-home'/> </a>
</div>
</div>
</b:if>

4. Setelah itu. simpan template. selesai..

Membuat halaman error ala kompi ajaib. ini adalah screenshot nya. jika anda tertarik silahkan pasang dengan cara seperti di bawah.


1. cara nya cama seperti di atas, masuk pada akun blog anda.

2. masuk pada template ==> Edit Html

3. simpan kode di bawah ini tepat di atas kode <body>
<b:if cond='data:blog.pageType == &quot;error_page&quot;'>
<style scoped='scoped' type='text/css'>
/*<![CDATA[*/
.large-heading,body{text-align:center}
body{background:#fff;height:100%;margin:0;padding:0;color:#141924;font-family:Roboto,Arial,sans-serif;overflow:hidden}
.large-heading{font-size:16rem;color:rgba(0,0,0,.3);font-weight:900;width:100%;margin-top:50px;-webkit-filter:blur(3px);filter:blur(3px)}
.light-heading{font-size:2rem;color:rgba(0,0,0,.6);font-weight:700}
.fixed{position:fixed;font-size:2rem;color:rgba(0,0,0,.6);z-index:9999;width:500px;bottom:50px;left:calc(50% - 250px);text-align:center}
.fixed a {border:4px solid #fff;border-radius:10px;padding:5px 16px;transition:all 400ms ease-in-out}
.fixed a:hover {background: #fff;}
.kompi{font-family:Georgia,serif;font-size:300%;font-style:italic;margin-top:100px;color:rgba(0,0,0,.3);}

html::after{content:"";background:radial-gradient(circle,rgba(0,0,0,0),rgba(0,0,0,1));position:absolute;top:0;left:0;bottom:0;right:0}
.large-heading,.kompi,.light-heading{-webkit-animation:funnytext 4s ease-in-out infinite;animation:funnytext 4s ease-in-out infinite}

@-webkit-keyframes funnytext{0%,100%{color:rgba(0,0,0,.3);-webkit-filter:blur(3px)}
30%{color:rgba(0,0,0,.5);-webkit-filter:blur(1px)}
65%{color:rgba(0,0,0,.2);-webkit-filter:blur(5px)}
}
@keyframes funnytext{0%,100%{color:rgba(0,0,0,.3);filter:blur(3px)}
30%{color:rgba(0,0,0,.5);filter:blur(1px)}
65%{color:rgba(0,0,0,.2);filter:blur(5px)}
}
/*]]>*/
</style>
<div id='error-page'>
<div class='large-heading'>4<i aria-hidden='true' class='fa fa-exclamation-circle'></i>4</div>
<div class='light-heading'>PAGE NOT FOUND!</div>
<div class='kompi'>KompiAja</div>
<div class='fixed'><a expr:href='data:blog.homepageUrl' title='KompiAja'>Go to homepage</a></div>
</div>
</b:if>
</b:if>

4. simpan template. selesai..
Nah sekarang blog anda sudah ada halaman error nya, Demikian artikel tentang Cara Membuat Halaman Error 404 (Error Page) Di Blog

Reaksi:
Share this with short URL:

You Might Also Like:

How to style text in Disqus comments:
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Hide Parser