Halaman error 404 di Blogger atau Blogspot merupakan halaman yang muncul ketika pengunjung membuka URL yang tidak tersedia di blog. Secara bawaan, tampilan halaman 404 biasanya cukup sederhana sehingga kurang menarik dan belum tentu membantu pengunjung menemukan konten lain.
Padahal, halaman 404 dapat dimanfaatkan sebagai bagian dari pengalaman pengguna. Dengan menambahkan desain yang lebih informatif, pesan yang jelas, serta tombol untuk kembali ke halaman utama, pengunjung memiliki pilihan untuk melanjutkan menjelajahi blog daripada berhenti setelah menemukan halaman yang tidak tersedia.
Kabar baiknya, Anda dapat membuat halaman error 404 custom di Blogger menggunakan HTML dan CSS tanpa perlu memasang plugin tambahan. Pada tutorial ini, kita akan mengubah tampilan 404 bawaan Blogspot menjadi halaman yang lebih modern, sederhana, responsif, dan mudah digunakan.
Mengapa Halaman Error 404 di Blogger Perlu Dibuat Lebih Baik?
Error 404 biasanya terjadi ketika sebuah halaman telah dihapus, URL diubah, terdapat kesalahan pengetikan alamat, atau pengunjung membuka tautan yang sudah tidak tersedia. Jika halaman error hanya menampilkan pesan sederhana tanpa navigasi tambahan, pengunjung mungkin kesulitan menemukan halaman lain yang relevan.
Oleh karena itu, halaman 404 custom dapat digunakan untuk memberikan informasi yang lebih jelas sekaligus menyediakan navigasi tambahan. Misalnya, Anda dapat menambahkan tombol kembali ke beranda, tautan menuju kategori tertentu, atau kolom pencarian.
- Membuat halaman error terlihat lebih profesional.
- Memberikan informasi yang jelas kepada pengunjung.
- Menyediakan navigasi kembali ke halaman utama.
- Membantu pengunjung melanjutkan pencarian konten di blog.
- Meningkatkan pengalaman pengguna ketika membuka URL yang tidak tersedia.
- Memungkinkan tampilan halaman 404 disesuaikan dengan desain blog.
Cara Membuat Halaman Error 404 Custom di Blogspot
Proses pemasangan halaman 404 custom di Blogger cukup sederhana. Anda hanya perlu membuka pengaturan Blogger, menemukan bagian halaman error 404, kemudian memasukkan kode HTML dan CSS yang telah disiapkan.
Langkah 1: Buka Pengaturan Blogger
Pertama, masuk ke dashboard Blogger dan pilih blog yang ingin Anda ubah. Setelah itu, buka menu Setelan atau Settings.
Selanjutnya, gulir halaman pengaturan hingga menemukan bagian Error dan pengalihan atau Errors and redirects. Pada bagian tersebut terdapat opsi Pesan 404 kustom atau Custom 404.
Klik opsi tersebut untuk membuka kolom tempat Anda dapat memasukkan kode halaman error 404 custom.
Langkah 2: Masukkan Kode HTML dan CSS Halaman 404
Setelah kolom Pesan 404 kustom terbuka, masukkan kode berikut. Kode ini menggunakan HTML dan CSS untuk membuat tampilan halaman 404 yang sederhana, modern, dan responsif.
<style>
#error-page {
text-align: center;
padding: 50px 20px;
color: #333;
}
#error-page h1 {
font-size: 120px;
margin: 0;
color: #3498db;
text-shadow: 2px 2px 10px rgba(0,0,0,0.1);
}
#error-page h2 {
font-size: 28px;
margin-bottom: 20px;
color: #2c3e50;
}
#error-page p {
font-size: 16px;
color: #7f8c8d;
max-width: 500px;
margin: 0 auto 30px;
}
.back-home {
display: inline-block;
padding: 12px 30px;
background-color: #3498db;
color: #fff !important;
text-decoration: none;
border-radius: 50px;
transition: all 0.3s ease;
box-shadow: 0 4px 15px rgba(0,0,0,0.12);
}
.back-home:hover {
background-color: #2980b9;
transform: translateY(-3px);
box-shadow: 0 6px 20px rgba(0,0,0,0.16);
}
@media screen and (max-width: 600px) {
#error-page {
padding: 40px 15px;
}
#error-page h1 {
font-size: 80px;
}
#error-page h2 {
font-size: 22px;
}
#error-page p {
font-size: 15px;
}
.back-home {
padding: 11px 24px;
}
}
</style>
<div id="error-page">
<h1>404</h1>
<h2>Ups! Halaman Tidak Ditemukan</h2>
<p>
Sepertinya halaman yang Anda cari telah dipindahkan,
dihapus, atau mungkin alamat URL yang dimasukkan salah.
</p>
<a class="back-home" href="/">
Kembali ke Beranda
</a>
</div>Penjelasan Kode Halaman Error 404
Kode di atas terdiri dari dua bagian utama, yaitu CSS untuk mengatur tampilan dan HTML untuk membangun struktur halaman error 404.
1. Container Halaman 404
Elemen #error-page digunakan sebagai container utama. Pengaturan seperti text-align: center membuat seluruh isi halaman berada di tengah, sedangkan padding memberikan jarak agar tampilan tidak terlalu rapat.
2. Tampilan Angka 404
Bagian h1 digunakan untuk menampilkan angka 404 dengan ukuran besar. Warna dan efek bayangan dapat Anda ubah sesuai dengan warna utama template Blogger yang digunakan.
3. Pesan Error
Elemen h2 dan p digunakan untuk menjelaskan kepada pengunjung bahwa halaman yang dicari tidak tersedia. Anda dapat mengganti teks tersebut dengan gaya bahasa yang sesuai dengan karakter blog.
4. Tombol Kembali ke Beranda
Tombol dengan class back-home berfungsi memberikan jalur navigasi agar pengunjung dapat kembali ke halaman utama blog. Tombol ini juga memiliki efek hover ketika kursor diarahkan ke atasnya.
5. Tampilan Responsif
Media query @media screen and (max-width: 600px) digunakan untuk menyesuaikan ukuran elemen ketika halaman dibuka melalui perangkat dengan layar kecil seperti smartphone.
Langkah 3: Simpan Pengaturan Halaman 404
Setelah kode dimasukkan ke dalam kolom Pesan 404 kustom, periksa kembali kode tersebut untuk memastikan tidak ada bagian yang terhapus atau berubah. Setelah itu, klik Simpan atau Save.
Setelah pengaturan tersimpan, halaman 404 custom akan digunakan ketika pengunjung membuka URL yang tidak tersedia di blog Anda.
Cara Menguji Halaman Error 404 Blogger
Untuk memastikan halaman 404 telah bekerja dengan baik, Anda dapat melakukan pengujian dengan membuka alamat URL yang memang tidak tersedia di blog.
Contohnya, jika alamat blog Anda adalah:
https://namabloganda.blogspot.com/Anda dapat mencoba membuka URL seperti:
https://namabloganda.blogspot.com/halaman-tidak-adaJika URL tersebut tidak memiliki halaman, Blogger seharusnya menampilkan tampilan error 404 yang telah Anda buat.
Lakukan pengujian menggunakan komputer dan smartphone untuk memastikan desain tetap terlihat rapi pada berbagai ukuran layar.
Tips Membuat Halaman 404 Blogger Lebih Interaktif
Tampilan 404 tidak harus berhenti pada angka besar dan tombol kembali ke beranda. Anda dapat mengembangkan halaman tersebut dengan beberapa elemen tambahan agar lebih membantu pengunjung.
Tambahkan Kolom Pencarian
Salah satu tambahan yang berguna adalah kolom pencarian blog. Dengan adanya fitur pencarian, pengunjung dapat langsung mencari artikel yang mereka butuhkan tanpa harus membuka halaman utama terlebih dahulu.
Gunakan Warna yang Sesuai dengan Template
Sesuaikan warna angka 404 dan tombol dengan warna utama blog. Konsistensi warna membuat halaman error terlihat sebagai bagian dari desain website, bukan halaman terpisah.
Gunakan Pesan yang Jelas
Hindari pesan yang terlalu panjang. Jelaskan secara singkat bahwa halaman tidak ditemukan dan berikan pilihan kepada pengunjung untuk kembali atau mencari konten lainnya.
Pastikan Tampilan Nyaman di Smartphone
Sebagian pengunjung dapat mengakses blog melalui perangkat mobile. Karena itu, ukuran angka 404, teks, tombol, dan jarak antar-elemen sebaiknya tetap nyaman dilihat pada layar kecil.
Kesalahan yang Perlu Dihindari Saat Membuat Halaman 404
Ada beberapa hal yang sebaiknya diperhatikan ketika membuat halaman error custom di Blogger agar tidak justru mengganggu pengalaman pengguna.
- Jangan menggunakan terlalu banyak animasi yang membuat halaman terasa berat.
- Jangan membuat teks error terlalu panjang.
- Pastikan tombol navigasi mudah ditemukan.
- Gunakan warna teks dan tombol yang memiliki kontras cukup.
- Pastikan kode CSS tidak menggunakan selector yang terlalu umum sehingga berpotensi memengaruhi elemen lain.
- Selalu uji halaman 404 setelah melakukan perubahan.
Apakah Halaman 404 Berpengaruh terhadap SEO Blog?
Halaman 404 pada dasarnya merupakan bagian normal dari sebuah website. Yang perlu diperhatikan adalah bagaimana halaman tersebut membantu pengguna ketika mereka membuka URL yang sudah tidak tersedia.
Halaman 404 yang informatif dapat memberikan navigasi alternatif seperti tombol beranda, pencarian, atau tautan menuju konten yang relevan. Hal tersebut dapat membantu pengunjung melanjutkan aktivitas mereka di dalam blog.
Namun, membuat halaman 404 custom bukan berarti secara otomatis meningkatkan peringkat blog di Google. Fokus utama halaman ini sebaiknya tetap pada pengalaman pengguna, navigasi yang jelas, dan penanganan URL yang tidak ditemukan dengan baik.
Kesimpulan
Mengganti tampilan halaman error 404 di Blogspot dapat dilakukan dengan cukup mudah menggunakan HTML dan CSS. Dengan desain yang lebih modern, pesan yang jelas, tombol kembali ke beranda, serta tampilan responsif, halaman error dapat menjadi lebih informatif bagi pengunjung.
Anda juga dapat mengembangkan desain tersebut dengan menambahkan kolom pencarian, tautan artikel populer, kategori blog, atau navigasi lainnya. Dengan begitu, halaman 404 tidak hanya memberi tahu bahwa sebuah halaman tidak ditemukan, tetapi juga membantu pengunjung menemukan tujuan berikutnya.
FAQ Halaman Error 404 Blogger
1. Apa itu halaman error 404 di Blogger?
Halaman error 404 adalah halaman yang ditampilkan ketika pengunjung membuka URL yang tidak ditemukan atau tidak tersedia di blog Blogger.
2. Apakah halaman 404 Blogger bisa dibuat custom?
Ya. Blogger menyediakan opsi Pesan 404 kustom yang dapat digunakan untuk menambahkan HTML dan CSS sesuai kebutuhan.
3. Apakah perlu plugin untuk membuat halaman 404 custom di Blogspot?
Tidak. Untuk desain dasar seperti contoh di artikel ini, Anda dapat menggunakan HTML dan CSS langsung melalui pengaturan Blogger.
4. Apakah desain halaman 404 bisa dibuat responsif?
Bisa. CSS media query dapat digunakan untuk menyesuaikan ukuran teks, tombol, padding, dan elemen lainnya pada perangkat dengan layar kecil.
5. Apakah halaman 404 custom otomatis meningkatkan SEO?
Tidak secara otomatis. Halaman 404 custom lebih ditujukan untuk memberikan informasi dan navigasi yang lebih baik kepada pengunjung ketika URL yang mereka buka tidak tersedia.
6. Apakah tombol kembali ke beranda bisa diganti?
Bisa. Anda dapat mengubah teks tombol maupun tujuan URL sesuai kebutuhan. Pada contoh ini, tombol menggunakan URL / sehingga mengarah ke halaman utama blog.