Memanfaatkan Halaman Error Page 404 Blog dan Cara Membuat auto Error Page 404 - Pernakah anda mecari artikel atau tutorial di blog, tapi anda tidak menemukan apa yang anda cari di blog yang anda kunjungi?. Hal ini kemungkinan halaman tersebut sudah terhapus atau URL yang anda masukkan salah. Nah!! disini anda sebagai blogger tentunya tidak mau kehilangan pengunjung, dan ini memungkinkan mempengaruhi jatah Traffic Blog anda :).Disini, kita akan memanfaatkan Halaman Error page 404 dengan tampilan khusus dan dinamis sebagai penunjuk arah atau direct, untuk mengarahkan pengunjung ke blog anda sekaligus pengunjung bisa melihat-lihat menu-menu dan artikel-artikel yang anda sajikan.
Ada dua metode membuat halaman error page, yaitu :
- Halaman ERROR 404 otomatis (redirect error page). Pengunjung akan di redirect secara otomatis ke halaman utama atau halaman lain yang ditentukan.
- Halaman ERROR 404 manual (non redirect). Ketika pengunjung menemukan halaman ini, maka dia harus melakukan klik secara manual untuk pindah menuju ke halaman utama (homepage) atau halaman lainnya.
Cara Pertama
Halaman ERROR 404 otomatis (redirect error page)
Silahkan login dulu di blogger anda, terus masuk ke > Template > Edit Template, dan masukkan code meta tag dibawah ini, tepat dibawah code
<head> :<!-- Meta Title Halaman Error/404 -->
<b:if cond='data:blog.pageType == "error_page"'>
<title>404: Maaf halaman yang ada cari tidak ada | <data:blog.title/></title>
</b:if>
Set Meta tag selengkapnya kira-kira seperti ini :
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<HTML>
<head>
<meta charset='utf-8'/>
.
.
.
<!-- Meta Title Halaman Error/404 -->
<b:if cond='data:blog.pageType == "error_page"'>
<title>404: Maaf halaman yang ada cari tidak ada | <data:blog.title/></title>
</b:if>
.
.
.
<style type="text/css"> <!-- /*<b:skin><
Lalu Copy Paste Code HTML dibawah ini di Kotak yang disediakan :
<p align='center'><strong><font color='#ff0000' size='25px'>Opsst!! Error 404 [Page Not Found]</font></strong></p>
<br/>
<br/>
<br/>
<p align='center'><h1><b>Halaman tidak ditemukan</b></h1></p>
<p align='center'>Kemungkinan halaman telah dihapus, atau Anda salah menulis URL</p>
<p align='center'>Kembali ke <a expr:href='data:blog.homepageUrl'>BLOG DAENG KULLE</a></p>
Note :
- Ganti Deskripsi Pesan Error Page sesuai keinginan anda.
- Ganti Titel URL diatas, menjadi Page title Blog anda.
- Lalu Save dan selesai.
Cara Kedua
Halaman ERROR 404 manual (non redirect)
Demo halaman yang anda lihat diatas, adalah hasil dari tag kondisional untuk halaman kesalahan/error page. Berikut ini, cara sederhana untuk membuat halaman Error Page 404 :
Contoh tag kondisional yang akan digunakan :
</head>
<body>
<b:if cond='data:blog.pageType != "error_page"'>
.
.
Baris/bidang element blog seperti posting, widget, sidebar dan yang lainnya.
Element ini akan di sembunyikan jika tak ditemukan url/link apa pun yang ada dalam directory widget.
.
.
</b:if>
Dibawah ini adalah pesan error yang akan muncul ketika permintaan tidak di temukan :
<b:if cond='data:blog.pageType == "error_page"'>
<div id='error-page'>
<div id='error-inner'>
<div class='box-404'>404</div>
<h1>Halaman tidak ditemukan</h1>
<p>Kemungkinan halaman telah dihapus, atau Anda salah menulis URL</p>
<p>Kembali ke <a expr:href='data:blog.homepageUrl'>BLOG DAENG KULLE</a></p>
<div id='search-box'>
<form action='/search' id='cse-search-box' method='get' target='_top'>
<input id='search-text' name='q' onblur='if (this.value == "") {this.value = "Cari Artikel di Blog Daeng Kulle";}' onfocus='if (this.value == "Cari Artikel di Blog Daeng Kulle") {this.value = ""}' type='text' value='Cari Artikel di Blog Daeng Kulle'/>
<button id='search-button' type='submit'/>
</form>
</div>
</div>
</div>
</b:if>
</body>
</HTML>
Pertama, cari code
<body> dan penutup </body> di template anda, lalu sisipkan kode tag conditional berikut di antaranya, lihat cara seperti di bawah ini :Pastekan kode di bawah ini di bawah kode
<body><b:if cond='data:blog.pageType != "error_page"'>
Kemudian cari kode
</body> dan pastekan kode berikut di atasnya :</b:if>
Lalu letakkan kode berikut ini di atas kode
</body><b:if cond='data:blog.pageType == "error_page"'>
<div id='error-page'>
<div id='error-inner'>
<div class='box-404'>404</div>
<h1>Halaman tidak ditemukan</h1>
<p>Kemungkinan halaman telah dihapus, atau Anda salah menulis URL</p>
<p>Kembali ke <a expr:href='data:blog.homepageUrl'>BLOG DAENG KULLE</a></p>
<div id='search-box'>
<form action='/search' id='cse-search-box' method='get' target='_top'>
<input id='search-text' name='q' onblur='if (this.value == "") {this.value = "Cari Artikel di Blog Daeng Kulle";}' onfocus='if (this.value == "Cari Artikel di Blog Daeng Kulle") {this.value = ""}' type='text' value='Cari Artikel di Blog Daeng Kulle'/>
<button id='search-button' type='submit'/>
</form>
</div>
</div>
</div>
</b:if>
</body>
</HTML>
Jika benar penempatan code Tag Error Page, akan tampak seperti dibawah ini :
</head>
<body>
<b:if cond='data:blog.pageType != "error_page"'>
.
.
Baris/bidang element blog seperti posting, widget, sidebar dan yang lainnya.
Element ini akan di sembunyikan jika tak ditemukan url/link apa pun yang ada dalam directory widget.
.
.
</b:if>
<b:if cond='data:blog.pageType == "error_page"'>
<div id='error-page'>
<div id='error-inner'>
<div class='box-404'>404</div>
<h1>Halaman tidak ditemukan</h1>
<p>Kemungkinan halaman telah dihapus, atau Anda salah menulis URL</p>
<p>Kembali ke <a expr:href='data:blog.homepageUrl'>BLOG DAENG KULLE</a></p>
<div id='search-box'>
<form action='/search' id='cse-search-box' method='get' target='_top'>
<input id='search-text' name='q' onblur='if (this.value == "") {this.value = "Cari Artikel di Blog Daeng Kulle";}' onfocus='if (this.value == "Cari Artikel di Blog Daeng Kulle") {this.value = ""}' type='text' value='Cari Artikel di Blog Daeng Kulle'/>
<button id='search-button' type='submit'/>
</form>
</div>
</div>
</div>
</b:if>
</body>
</HTML>
Selanjutnya, sisipkan Meta Tag di bawah ini, tepat di bawah kode
<head> :<!-- Meta Title Halaman Error/404 -->
<b:if cond='data:blog.pageType == "error_page"'>
<title>404: Maaf halaman yang ada cari tidak ada | <data:blog.title/></title>
</b:if>
Set Meta tag selengkapnya kira-kira seperti ini :
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<HTML>
<head>
<meta charset='utf-8'/>
.
.
.
<!-- Meta Title Halaman Error/404 -->
<b:if cond='data:blog.pageType == "error_page"'>
<title>404: Maaf halaman yang ada cari tidak ada | <data:blog.title/></title>
</b:if>
.
.
.
<style type="text/css"> <!-- /*<b:skin><![CDATA[*/
Setelah semuanya selesai diatas, tambahkan kode CSS berikut dibawah ini, di template anda. Simpan diatas kode
]]></b:skin> :#error-page {background-color: #e9e9e9;position: fixed !important;position: absolute;text-align: center;top: 0;right: 0;bottom: 0;left: 0;z-index: 99999;}
#error-inner {margin: 11% auto;}
#error-inner .box-404 {width: 200px;height: 200px;background: #21afa4;color: #fff;font-size: 80px;line-height: 200px;border-radius: 10px;margin: 0 auto 50px;position: relative;}
#error-inner .box-404::after {content: " ";width: 0;height: 0;bottom: -8px;border-color: #21afa4 transparent transparent;border-style: solid;border-width: 9px 9px 0;position: absolute;left: 47%;}
#error-inner h1 {text-transform: uppercase;}
#error-inner p {line-height: 1.9em;font-size: 15px;}
Note :
Ganti Deskripsi Error Page Tag
<h1> dan <p> dengan Deskripsi Error Page yang anda inginkan.Selamat Mencoba!!
Tidak ada komentar:
Posting Komentar