Dalam sebuah web atau blog selalu ada namanya error atau laman tidak ditemukan, entah karena kita telah menghapus halamn tersebut atau karena sesuatu hal yang tidak kita inginkan.
Oleh karena itu, wajib hukumnya sebuah web atau blog memiliki sebuah laman sebagai pemberitahuan yang menunjukkan kepada pengunjung bahwa halaman yang mereka cari sudah tidak ada lagi.
Adapun laman tersebut biasanya disebut dengan laman 404 atau Not Found.
Laman not found juga walaupun sebagai laman yang tidak kita inginkan kehadirannya namun wajib untuk kita buat untuk mengantisipasi error yang terhadi pada situs kita. Laman tersebut juga harus didesain sebagus mungkin agar pengunjung tidak kecewa dengan tampilannya.
berikut adalah tips membuat sebuah laman 404 atau Not Found Yang Keren.
Pada tutorial kali ini kita akan menambahkan laman Not Found pada Blogger.
Jika ingin diaplikasikan pada web custom sobat juga langkahnya akan sama saja, karena kita akan menambahkan sebuah script code pada html dan css nya.
Langkah-langkah membuat laman Not Found (404):
1. Pertama-tama kita akan membungkus laman yang tidak akan tampil pada laman Not Found kita.
Strukturnya pada blogspot seperti dibawah ini:
Silahkan Tambahkan kode yang sudah ditandai dibawah ini. Ingat strukturnya harus benar seperti keterangan yang sudah ditambahkan pada kode dibawah.
<body> <b:if cond="data:blog.pageType != "error_page""> ... Daerah ini berisi bagian utama seperti wrapper, sidebar, hinggafooter-wrapper. Daerah ini akan diabaikan karena kita berada di dalam kondisi pengecualian... </b:if> <b:if cond="data:blog.pageType == "error_page""> <div id="container-error"> <div id="error-page"> Tuliskan sesuatu di sini. Bagian ini hanya akan tampil saat halaman tidak ditemukan. </div> </div> </b:if> </body>
2. Selanjutnya tambahkan kode CSS untuk mempercantik tampilan halaman 404 / Page Not Found
Berikut kode CSS yang saya gunakan, jika anda ingin memodifikasinya, silahkan buat modifikasi pada kode cssnya agar terlihat lebih menarik lagi
Tambahkan kode dibawah ini pada tag kode CSS template blog anda.
#container-error{text-align:center;z-index:99999;width:100%;height:100%;position:fixed;top:0;right:0;bottom:0;left:0;padding:0;background-color:#EF5350;color:#f9f9f9;font-size:3rem;font-weight:700}
#container-error h3,#container-error h4{display:block;text-align:center;margin-bottom:30px;font-size:2rem;font-weight:700;color:#f9f9f9}
#container-error h3{margin-top:30px}
#error-page{position:relative;max-width:920px;margin:6% auto;line-height:normal}
3. Kemudian Save Template Anda.
4. Selesai.
Sekarang saatnya mencoba halaman not found anda, silahkan ketikkan url pada browser anda menunjuk ke halaman yang tidak ada pada web atau blog anda.
misal http://nama-web-anda.com/p/halaman kosong
Ganti tulisan nama-web-anda yang berwarna kuning dengan nama web/blog anda yang sebenarnya untuk melakukan percobaan.
SIIIPPP...
ReplyDeleteWow
ReplyDelete