Cara membuat Halaman Error 404 - Mengelola Blog

Cara membuat Halaman Error 404

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.
  1. 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.
  2. 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)
  3. 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,
cara membuat halaman error 404
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 :
  1. Login ke blog Anda kemudian pilih menu Theme
  2. Back Up Template sebelum melakukan editing
  3. Klik tombol Edit HTML
  4. 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:&quot; &quot;;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;}

  5. 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 == &quot;error_page&quot;'>
    <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==&apos;&apos;)this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value=&apos;&apos;' 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>

  6. 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.

3 comments:

  1. Makasih sob. saya suka artikelnya, bermanfaat untuk pengembangan tsmpilan blog saya

    ReplyDelete
  2. nice gan berguna buat ane ang lagi membuat template sendiri

    ReplyDelete

Informasi:
Form komentar ini menggunakan moderasi, setiap komentar yang masuk akan melalui proses pemeriksaan sebelum ditampilkan dalam kolom komentar. Memasang link yang sifatnya promosi di dalam komentar tidak akan di tampilkan. Hanya komentar yang membangun dan sesuai topik artikel saja yang akan saya tampilkan. Mohon maaf atas ketidaknyamanannya.