Halaman 404 atau biasa di sebut halaman eror berguna untuk memberitahukan pengunjung apabila link yang tercantum pada URL pada browser tidak valid atau tidak sesuai dengan halaman apapun. Biasa nya website sudah jelas memiliki halaman eror. Untuk blogger sendiri sudah suport dengan kostum halaman eror.
Membuat halaman eror cukup mudah hanya saja cara nya sama seperti membuat halaman statis namun dapat di akses dengan link yang tidak valid saja dan tentu harus di selipkan tag kondisional hanya untuk halaman eror.
untuk membuat halaman eror seperti yang ada pada safelink template dari saya , anda harus menghapus kode halaman eror bawaan template yang anda gunakan terlebih dahulu sebelum memasang ini, karena apabila bentrok akan terlihat lucu nanti.
pada tutorial ini saya menggunakan fontawesome dan Google font Fira Sans. Untuk itu anda harus memasang fontawesome jika anda belum memiliki nya, kita cukup tambahkan fontawesome dengan menggunakan javascript kita taruh di atas tag penutup </head>.
<script type='text/javascript'>
//<![CDATA[
//CSS Ready
function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }loadCSS("//fonts.googleapis.com/css?family=Fira+Sans:200,400);loadCSS("//stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css");
//]]>
</script>dengan begitu anda gak perlu repot lagi untuk memasang CSS eksternal cukup dengan menulis kode loadCSS("LINK EKSTERNAL")
dan pastikan juga anda sudah mengaktifkan kostum halaman eror pada pengaturan blogger.
pertama kita cari tag pembuka dari kode <body> lalu tambahkan kode di bawah ini tepat di bawah nya.
<b:if cond='data:view.isError'>
<style type='text/css'>
html,body{height:100%}
html,body{background:#6441A5;background:-webkit-linear-gradient(to right,#2a0845,#6441A5);background:linear-gradient(to right,#2a0845,#6441A5)}
body{font:200 15px 'Fira Sans',sans-serif;line-height:1.8;color:#818181}
.clear,.clearfix{clear:both}
.page-container{position:relative;width:auto;margin:0 auto;display:block;min-height:100%;overflow:hidden}
.page-container .page-content{position:relative;padding:0;z-index:1;background:transparent;min-height:100%}
.page-container .page-content.page-content-default{position:relative;background:transparent;padding:0;margin:0 auto;display:block;max-width:990px}
#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 block */
.block-error{max-width:400px;margin:0 auto}
.block-error .error-num{font-size:190px;position:relative;font-weight:100;padding:0;text-align:center;width:100%;color:#FFF;display:block;margin:0}
.block-error .error-text{position:relative;font-size:31px;color:#F5F5F5;width:100%;font-weight:200;text-align:center;margin-top:10px;text-transform:uppercase}
.block-error .error-description{position:relative;font-size:13px;color:#F0F0F0;width:100%;font-weight:300;margin:30px 0;text-align:center}
.block-error .copy{position:relative;width:100%;text-align:center;margin:30px 0 0 0;color:#dddddd}
.block-error .error-button{position:relative;display:block;margin:0 auto;padding:0 20px;width:auto}
.block-error .error-button .btn-left{float:left}
.block-error .error-button .btn-right{float:right}
/* tombol */
.err-btn{display:block;margin:0;padding:10px;background:#3498db;border:none;outline:none;color:#fff;font-size:14px;font-weight:bold;cursor:pointer;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px}
.err-btn{background:#3b1961;color:#fff;-webkit-transition:background .5s ease,color .3s;-moz-transition:background .5s ease,color .3s;-ms-transition:background .5s ease,color .3s;transition:background .5s ease,color .3s}
.err-btn:hover{background:#55328c;color:#f1f1f1}
/* Responsive Layout */
@media screen and (max-width:640px){html,body{line-height:normal!important}.block-error .error-num{font-size:100px!important}}
@media screen and (max-width:800px){html,body{margin:0;line-height:1.5}.block-error .error-num{font-size:170px}}
</style>
<div class='page-container'>
<div class='page-content page-content-default'>
<div class='block-error'>
<div class='error-num'>404</div>
<div class='clear'/>
<div class='error-text'>Page not found</div>
<div class='clear'/>
<div class='error-description'><p id='errrr'/></div>
<div class='clear'/>
<div class='error-button'>
<div class='btn-left'>
<button class='err-btn' onClick='document.location.href = '/';'>Homepage</button>
</div>
<div class='btn-right'>
<button class='err-btn' onClick='history.back();'>Previous</button>
</div>
</div>
<div class='clear'/>
<div class='copy'>
Copyright <i aria-hidden='true' class='fa fa-copyright'/> <span id='tahun-sekarang'/> <data:blog.title/> All Rights Reserved.
</div>
</div>
</div>
</div>
<script type="text/javascript">
document.getElementById("errrr").innerHTML = "The requested URL : <span id='text-url'>" + window.location.href + "</span> could not be found.";
function getCurrentYear(){var e=new Date;return e.getFullYear()}el=document.getElementById("tahun-sekarang"),el.innerHTML=getCurrentYear();
</script>
</b:if>setelah itu simpan template.
pastikan kode tertata dengan rapih.
Penerapan tag kondisional halaman eror
Disini kita akan menyembunyikan beberapa tag HTML untuk menghilangkan kode yang tidak perlu.untuk penerapan kurang lebih seperti ini.
<!DOCTYPE html>
<html>
<head>
<b:skin></b:skin>
<style></style>
</head>
<body>
<b:if cond='!data:view.isError'>
bagian atas body
area ini tidak akan tampil pada halaman error contoh : HEADER,WIDGET,POSTINGAN BLOG,HTML,JAVASCRIPT
</b:if>
<b:if cond='data:view.isError'>
ini adalah halaman eror
</b:if>
<b:if cond='!data:view.isError'>
bagian bawah body
area ini tidak akan tampil pada halaman error contoh : FOOTER,WIDGET,HTML,JAVASCRIPT
</b:if>
</body>
</html>di atas hanya contoh penempatan kode yang dapat anda terapkan sendiri sesuai dengan keinginan.
pastikan hapus kode yang sama apabila terdapat halaman eror bawaan template sobat.
bagi yang masih kebingungan silahkan bertanya pada kolom komentar yang sesuai dengan pembahasan pada halaman ini.
sebagai contoh untuk preview mungkin agak sedikit berbeda mulai dari tombol dan warna latar belakang yang ada di halaman eror yang terdapat pada template safelink saya.