Cara membuat Halaman Error 404

Dipublikasikan 8/14/2017 07:30:00 PM

Oleh : Admin Topik : Blogging

Salah satu syarat navigasi blog yang baik adalah dengan memberikan tujuan dan pilihan yang jelas ketika pengunjung berada pada suatu halaman di blog Anda. Begitu pula dengan halaman error 404.

Halaman error 404 adalah halaman yang akan dilihat pengunjung saat mencoba untuk membuka halaman yang tidak ada di blog Anda, bisa karena halaman telah dihapus, link rusak, atau pengunjung yang salah mengetikkan alamat url.

Untuk blog yang menggunakan blogspot sendiri biasanya sudah disediakan halaman error 404, namun halaman error 404 yang disediakan kurang informatif meskipun kita bisa mengcustomnya melalui menu search preferences >> Errors and redirections >> Custom Page Not Found.

Ada tiga alasan yang menurut saya, sehingga saya merasa lebih baik jika menggunakan halaman error 404 custom sendiri dari pada menggunakan halaman error 404 yang disediakan blogspot.

Informasi yang disampaikan kurang informatif karena hanya bertuliskan "Sorry, the page you were looking for in this blog does not exist." , sehingga kesannya terasa begitu membosankan dan tidaklah menarik.
Halaman ini muncul dibagian main body saja (tempat munculnya halaman posting / static page) dan tetap memunculkan header, sidebar dan footer. Hal ini bisa menjadi kendala bagi Anda yang sudah menjadi publisher Adsense dan sudah menempatkan iklan di luar main body. Sehingga ketika error page 404 muncul, maka iklan pun akan tetap muncul dan hal ini merupakan salah satu hal yang tidak dianjurkan bagi pengiklan untuk menampilkan iklan di laman tersebut. (sumber: google)
Dengan Halaman Error 404 custom, kita bisa memberikan informasi yang lebih jelas, memberikan pilihan pencarian ataupun memberikan arah bagi pengunjung untuk menuju halaman home page. Dengan begitu, maka setiap pengunjung yang datang (baik dari search engine ataupun refferal, bisa tetap masuk dan berkunjung ke blog kita).

Nah, oleh karena itu, kali ini saya akan memberikan informasi bagaimana cara membuat halaman error 404 yang bisa Anda modifikasi kembali sehingga lebih informatif dan tetap membuat nyaman pengunjung ketika mendapati halaman yang hilang tersebut.

Sebagai gambaran, berikut adalah tampilan halaman error 404 yang akan kita buat,

Bagaimana, tertarik ? Yuk simak cara membuatnya.

Cara membuat Halaman Error 404

Untuk membuat halaman Error 404 seperti pada contoh diatas, silahkan ikuti langkah-langkah di bawah berikut :

Login ke blog Anda kemudian pilih menu Theme
Back Up Template sebelum melakukan editing
Klik tombol Edit HTML
Cari kode ]]></b:skin> (gunakan Ctrl+F untuk mencarinya), lalu copy paste kan kode CSS halaman error 404 dibawah ini tepat diatas kode ]]></b:skin> tadi.

Kode CSS halaman Error 404

/* error page */
#error-page {background-color:#f9f9f9;position:fixed!important;text-align:center;top:0;right:0;bottom:0; left:0;z-index:99999;}
#error-page #search-box {margin: 2% 41%}#error-inner {margin:5% auto;}
#error-inner .box-404 {width:200px;height:200px;background:#000;color:#fff;font-size:80px;line-height:200px;border-radius:50%;margin:0 auto 20px;position:relative;}
#error-inner .box-404::after {content:" ";width:0;height:0;bottom:-8px;border-color:#21afa4 transparent transparent;}
#error-inner h1 {color: #000;text-transform:uppercase;}
#error-inner p {font-size:15px;color:#000;}
border-style:solid;border-width:9px 9px 0;position:absolute;left:47%;}
.search404 {width: 300px; height: auto; margin: 0 auto 20px;}
input#search-text {height: 27px;width: 250px;padding-left: 10px;color:#9e9e9e;}
Langkah selanjutnya adalah cari kode <body> , setelah ketemu copy pastekan kode HTML halaman error 404 dibawah ini tepat diatas kode <body>.

Kode HTML halaman Error 404

<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>Temukan konten terkait lainnya disini :</p>
<div class='search404'>
<form action='/search' id='cse-search-box' method='get'>
<input id='search-text' name='q' onblur='if(this.value=='')this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value=''' type='text' value='Ketik dan enter di sini ...'/>
</form>
</div>
<p>Atau kembali ke halaman utama </p>
<p><a expr:href='data:blog.homepageUrl'><data:blog.title/></a></p>
</div>
</div>
</b:if>
Klik Save theme untuk menyelesaikan pemasangan dan lihat hasilnya.

Catatan:
Untuk melihat hasilnya, silahkan buka satu postingan blog Anda lalu hapus sebagian huruf pada alamat url yang tampil di search bar browser Anda . Misalnya http://nama-blog-anda/2017/.....html menjadi http://nama-blog-anda/2017/.....htm (huruf L pada html dihapus).

Baca juga :

Demikianlah artikel cara membuat halaman error 404 ini bisa saya sampaikan, selamat mencoba dan semoga bermanfaat.

Daftar isi [ Lihat ]