Cara Membuat Halaman 404 Valid AMP HTML

Views

Hallo Sobat, kali ini saya akan memposting tentang "Cara Membuat Halaman 404 Valid AMP HTML" Sebelumnya sobat pasti sudah tau bukan apa itu Halaman 404? Halaman 404 adalah sebuah halaman yang terjadi karena kesalahan pencarian(tidak ada pada url websitenya) jadi akan dialihkan kepada halaman khusus yaitu Error Page atau yang biasa kita sebut Halaman 404.

Halaman 404 biasanya dibuat tidak dalam bentuk valid AMP HTML atau kalau pun ingin Valid harus melalui buat source baru dengan ekstensi .html, Namun kali ini sobat tidak perlu melakukan hal tersebut karena ada hal yang lebih mudah dalam menerapkannya.. Silahkan disimak

Pertama sobat harus mencari kode <div class='status-msg-wrap'> atau <div class='status-msg-body'> dan biasanya dibawah kode tersebut ada kode <data:navMessage/> . Nah sobat silahkan tambahkan kode dibawah ini dibawah kode tersebut :

<b:if cond='data:blog.pageType == &quot;error_page&quot;'>
<style amp-custom='amp-custom'>
/* Error */ 
.status-msg-body{text-align: center;margin:0;padding:10px;}
.error-404 {text-align: center; transition: all 0.8s ease 0s;color: #b0130d; font-size: 150px;line-height:155px; font-weight: bold;}
.error-404:hover {color: #333;}
.large-heading1 {color: #333;font-size: 70px;line-height:75px;}
.large-heading2 {color: #333;font-size: 48px;line-height:55px;}
.light-heading1 {color: #555;font-size: 20px;line-height:25px;}
.light-heading2 {color: #555;font-size: 15px;line-height:1.8em;}
#error-page{background:#efefef;position:fixed !important;position:absolute;text-align:center;top:0;right:0;bottom:0;left:0;z-index:99999999;width:100%;height:100%}
#error-page .error-404 {text-align: center; transition: all 0.8s ease 0s;color: #b0130d; font-size:800%; font-weight: 600;margin-bottom:0px;margin-top:0;line-height:1em} 
#error-page .large-heading1 {color: #000;font-size:400%;margin-top:1%;margin-bottom:0px;position:relative;font-weight:600}
#error-page .large-heading2 {color: #000;font-size:250%;} 
#error-page .light-heading1 {color: #000;font-size:150%;} 
#error-page .light-heading2 {color: #000;font-size:100%;line-height:1.8em;} 
#error-page #search{text-align:center}
#search input{padding:6px 10px;margin:15px 0 0 -1px}
</style>
<div id='error-page'>
<div class='large-heading1'>Maaf!</div>
<div class='error-404'>404 Terdeteksi</div>
<div class='large-heading2'>Halaman Tidak Ditemukan</div><br/>
<div class='light-heading1'>Mungkin halaman telah dihapus. Kami mohon maaf atas ketidaknyamanan ini.</div><br/>
<div class='light-heading2'>Silahkan Klik <a href='http://www.chimul.com/' title='Homepage'><span style='background:#ddd;border:1px solid #aaa;border-radius:3px;padding:2px 5px'><b>DI SINI</b></span></a> untuk kembali ke homepage <b>Chimul Chimol</b>.<br/>
Atau gunakan <b>Search Box</b> di bawah ini untuk kembali mencari artikel yang Anda inginkan.
</div>
<div class='searchform' id='searchform'>
<div id='search'>
<script type='text/javascript'>
var GOOG_FIXURL_LANG = &quot;en&quot;;
var GOOG_FIXURL_SITE = &quot;http://chimul.com&quot;
</script>
<script src='//linkhelp.clients.google.com/tbproxy/lh/wm/fixurl.js' type='text/javascript'>
</script>
<div class='clear'/>
</div>
</div>
</div>
</b:if>    

Silahkan Sobat ganti kalimat yang berwarna merah dan disesuaikan dengan website sobat ya.. 😊


Cukup mudah bukan dalam menerapkannya? Untuk Demonya silahkan cobat ganti URL website Chimul dengan menambahkan 404 . contoh : http://www.chimul.com/404

Jika ada yang ingin ditanyakan, silahkan komentar dibawah yah ...

Selamat Mencoba . Semoga bermanfaat 😊