Membuat Halaman Error 404 Not Found di Blog

Membuat Halaman Error 404 Not Found di Blog - Memberikan tujuan dan pilihan yang jelas ketika pengunjung berada pada suatu halaman di blog merupakan salah satu hal penting untuk navigasi blog yang baik. Begitu juga dengan halaman error 404 not found.atau dalam bahasa indonesia error 404 halaman tidak ditemukan.
Apa itu halaman error 404 not found?
Halaman error 404 not found adalah sebuah halaman yang berisi pesan Error atau kesalahan dari Hypertext Transfer Protocol (HTTP) yang mengindikasikan bahwa laman/URL yang dituju tidak dapat ditemukan. Hal ini bisa saja terjadi karena beberapa alasan seperti halaman telah dihapus, dan pengunjung salah mengetikkan URL atau mengklik broken link dari website lain.

Untuk blog atau website yang menggunakan blogger atau blogspot sebenarnya sudah disediakan halaman pesan error 404 bawaan blogger, tetapi halaman error 404 bawaan blogger masih sangat sederhana dan kurang informatif, meski pemilik blog sudah mengaturnya pada setelan blogger melalui Setelan >> Preferensi penelusuran >> Pesan khusus untuk halaman tidak ditemukan. Berikut penampakan halaman yang berisi pesan error 404 bawaan blogger.

Selain tampilan halaman error 404 bawaan blogger masih sangat sederhana dan kurang informatif. Halaman ini juga tampil pada body postingan layaknya sebuah konten pada halaman dinamis atau halaman statis sehingga menampilkan halaman blog secara utuh mulai dari bagian header, sidebar hingga ke bagian footer blog. Dengan tampilnya halaman error 404 secara utuh, maka hal ini bisa menjadi masalah bagi para publisher GA yang meletakkan unit iklan di luar body posting menggunakan widget pada bagian header, sidebar, maupun footer, karena unit iklan bisa saja tetap muncul pada bagian tersebut ketika pengunjung mendapati halaman pesan error 404 pada blog tersebut. Hal ini bisa menjadi masalah karena Penayang tidak diizinkan untuk menempatkan iklan pada laman berbasis non-konten, seperti laman terima kasih, kesalahan, masuk, atau keluar. Ini adalah laman yang dilihat pengunjung di situs sebelum kemungkinan meninggalkan halaman atau setelah melakukan tindakan tertentu pada blog tersebut. (sumber : Google)

Jadi dengan membuat sebuah Halaman Error 404 yang anda buat sendiri dengan tampilan yang berbeda, anda bisa memberikan informasi yang lebih jelas kepada pengunjung yang mendapati Halaman Error 404 dan memberikan pilihan melakukan pencarian atau mengarahkan pengunjung untuk menuju ke halaman utama blog atau homepage.
Berikut tampilan halaman error 404 not found yang saya share.

Baca juga :

• Cara Menghapus URL Crawl Error di Google Search Console Webmaster Tools
• Cara Mengalihkan atau Redirect Link Artikel Lama ke Link Artikel Baru di Blog

Bagaimana sobat? Apakah anda berminat untuk mengaplikasikannya ke blog atau website? Silahkan simak langkah-langkahnya dengan seksama.

Cara Membuat Halaman Error 404 Not Found Keren di Blogspot
Caranya cukup mudah dan sederhana, disini anda hanya akan mencari 2 buah kode tertentu dan meletakkan 2 buah kode yang saya berikan, yakni kode CSS sebagai pembentuk tampilan halaman dan kode HTML untuk mengarahkan pengunjung ke halaman yang dibuat.

1. Pertama-tama silahkan login ke akun blogger anda
2. Tekan tombol Backup / Pulihkan untuk membackup full seluruh kode template. Hal ini dilakukan untuk berjaga-jaga jika terjadi kesalahan saat melakukan mengedit kode template
3. Jika sudah, silahkan tutup kembali, kemudian tekan tombol Edit HTML untuk membuka kotak editor kode template
4. Temukan kode ]]></b:skin> Klik sekali di dalam kode template, lalu tekan Ctrl+F pada keyboard untuk memunculkan kotak pencarian, kemudian masukkan kode yang dicari
5. Apabila sudah ketemu letakkan kode CSS di bawah ini tepat di atas kode ]]></b:skin>

/* error 404 page not found */
#error-page {background-color:#363636;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:82px;line-height:200px;border-radius:10%;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 {font-weight: bold;font-size:30px;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;}

Catatan : Anda bisa mengganti warna background, tulisan, serta ukuran pada kode CSS di atas
6. Langkah selanjutnya adalah temukan kode <body>
7. Apabila sudah ketemu, letakkan kode HTML di bawah ini tepat di atas kode <body>

<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>Kemungkinan halaman telah dihapus, atau Anda salah menulis URL</p>
<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' title='Search' value='Ketik dan enter di sini ...'/>
</form>
</div>
<p>Atau kembali ke halaman utama </p>         
<div id='copyright'>
        <p><a href='/' expr:title='data:blog.title'><data:blog.title/></a> © 2017 - <script>document.write(new Date().getFullYear())</script>. All Rights Reserved</p>
        </div>
</div>
</div>
</b:if>

Catatan : Silahkan ganti kata-kata atau kalimat pada kode HTML di atas dengan kalimat yang anda inginkan
8. Terakhir, klik Simpan Tema atau Save Template. Untuk melihat apakah sudah berhasil atau belum, ketik https://URL-BLOG-ANDA/404

Tujuan utama pembuatan Halaman Error 404 not found ini adalah bagaimana membuat pengunjung tidak segera menekan tombol back atau meninggalkan website kita, tapi kita tawarkan terlebih dahulu link alternatif menuju Homepage dan sebuah kotak pencarian yang sangat berguna apabila pengunjung tetap tidak bisa menemukan apa yang mereka cari.

Demikian tutorial sederhana mengenai bagaimana cara membuat halaman error 404 not found di blogger. Semoga bermanfaat and " Happy Blogging "

Related Posts :

Silahkan klik disini untuk berlangganan Artikel Gratis via email, Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di HARMANSYAH BLOG