Membuat Halaman Eror 404 Kustom dengan Kolom Pencarian di Blogger

Halaman 404 adalah tipe halaman khusus yang akan ditampilkan ketika pengunjung mendarat pada URL yang salah atau tidak ditemukan. Dalam beberapa skenario, hal ini terjadi jika Anda telah menghapus sebuah postingan lama, namun pengunjung masih mendapatkan tautan (link) tersebut dari situs lain atau indeks lama.

Secara bawaan (default), jika Anda tidak mengaktifkan atau membuat halaman eror kustom, Blogger akan menampilkan teks pesan status standar seperti berikut:

> Sorry, the page you are looking for in this blog does not exist.

Pesan tersebut dipanggil oleh fungsi <b:include data='top' name='status-message'/> di bawah kontrol inklusi status-message. Beberapa tema baru Blogger tidak lagi memperlihatkan kode inklusi ini di dalam editor XML karena datanya sudah disimpan langsung di server Google. Meski begitu, kita tetap bisa memodifikasi perilakunya atau memanggilnya secara manual di bawah widget Blog1.

Kode HTML Halaman Kustom 404 + Kotak Pencarian

Berikut adalah susunan kode HTML dan skrip siap pakai untuk membuat tampilan halaman eror 404 kustom yang interaktif, lengkap dengan ikon SVG dan kolom pencarian otomatis:

<div class="query-zero-wrapper" style="width: 100%;display: table;">
    <div class="query-zero" style="height: 100vh;vertical-align:middle;display:table-cell">
        <div style="text-align: center;">
            <span>
                <svg height="50px" id="Capa_1" style="enable-background:new 0 0 103.696 103.695;" version="1.1" viewBox="0 0 103.696 103.695" width="50px" x="0px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" y="0px"><g><path d="M75.835,72.818c0.656,1.521-0.043,3.287-1.563,3.945s-3.286-0.043-3.944-1.563c-2.894-6.688-9.729-11.013-17.42-11.013   c-7.869,0-14.748,4.32-17.523,11.006c-0.48,1.152-1.596,1.85-2.771,1.852c-0.385,0-0.773-0.074-1.15-0.23   c-1.531-0.637-2.256-2.393-1.619-3.922c3.709-8.933,12.764-14.703,23.064-14.703C62.993,58.189,71.993,63.932,75.835,72.818z    M28.452,36.484c-0.676-1.176-0.27-2.676,0.906-3.351l9.045-5.196c1.176-0.674,2.676-0.268,3.352,0.907   c0.676,1.176,0.27,2.676-0.906,3.351l-9.045,5.194C30.626,38.065,29.126,37.66,28.452,36.484z M42.487,36.59   c1.688,1.689,1.688,4.429,0,6.115c-1.688,1.688-4.426,1.688-6.117-0.002c-1.688-1.688-1.688-4.426,0-6.113   C38.059,34.901,40.797,34.901,42.487,36.59z M57.188,21.907c0.121-1.35,1.312-2.347,2.662-2.226l10.391,0.934   c1.35,0.121,2.348,1.313,2.225,2.664c-0.121,1.351-1.312,2.347-2.664,2.225l-10.389-0.933   C58.063,24.45,57.065,23.256,57.188,21.907z M68.28,36.519c1.688,1.688,1.688,4.426,0,6.113c-1.691,1.69-4.43,1.69-6.117,0.002   c-1.688-1.687-1.688-4.426,0-6.115C63.852,34.829,66.59,34.829,68.28,36.519z M85.465,103.695H18.23   C8.178,103.695,0,95.518,0,85.465V18.23C0,8.177,8.179,0,18.23,0h67.235c10.053,0,18.229,8.178,18.229,18.23v67.235   C103.696,95.518,95.518,103.695,85.465,103.695z M18.23,8.577c-5.322,0-9.652,4.33-9.652,9.652v67.234   c0,5.322,4.33,9.652,9.652,9.652h67.235c5.321,0,9.651-4.33,9.651-9.652V18.23c0-5.322-4.33-9.652-9.651-9.652L18.23,8.577   L18.23,8.577z" fill="#6f7070"></path></g></svg>
            </span>
        </div>
        <div style="text-align: center;">
            <b><span style="font-family:monospace, courier new;">HALAMAN TIDAK DITEMUKAN</span></b>
        </div>
        <div style="text-align: center;">
            <span style="font-family:monospace, courier new; font-size: 50px;">-404-</span>
        </div>      
        <div class="blak-blockcontent" style="line-height: 200%;padding: 5px 5px 5px 5px;text-align: center;">
            <span>Gunakan kotak pencarian di bawah untuk menemukan artikel yang Anda cari.</span><br/>
            <form action="/search" id="searchThis" style="display: inline;">
                <input id="searchBox" name="q" onblur="if(this.value=='')this.value=this.defaultValue;" onfocus="if(this.value==this.defaultValue)this.value='';" type="text" value="Cari di Blog Ini" style="border:1px solid #ebebeb;border-radius:2px;font:16px/20px Roboto,sans-serif;margin:0;max-width:100%;outline:0;padding:7px;transition:border-color .2s;box-shadow:0 2px 5px 0 rgba(0,0,0,.26);vertical-align:middle"/>
                <button name="sa" type="submit" style="vertical-align:middle;outline:0;box-shadow:0 2px 5px 0 rgba(0,0,0,.26);background-color:#fff;border:0;border-radius:2px;cursor:pointer;display:inline-block;height:36px;margin:0;text-align:center;text-decoration:none;transition:background-color .2s,box-shadow .2s;padding:8px 16px">
                    <svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z" fill="rgba(0,0,0,.54)" stroke="rgba(0,0,0,.54)"></path></svg>
                </button>
            </form>
        </div>
    </div>
</div>
<style>.no-posts-message{display:none}</style>

Pilihan Metode Aktivasi Halaman 404 Kustom

Ada dua cara berbeda yang bisa Anda pilih untuk mengaktifkan kode HTML di atas ke dalam blog Blogger Anda:

Metode 1: Mengaktifkan Melalui Panel Setelan (Paling Mudah)

Ini adalah solusi tercepat tanpa perlu membongkar struktur kode template utama Anda secara mendalam.

Masuk ke dasbor Blogger Anda.
Buka menu Setelan (Settings).
Gulir ke bawah hingga Anda menemukan bagian Kesalahan dan pengalihan (Errors and redirects).
Klik pada opsi Halaman 404 kustom (Custom 404 page).
Rekatkan (paste) seluruh kode HTML kustom di atas ke dalam kolom teks yang disediakan, lalu klik Simpan.

Metode 2: Menggunakan Tag Kondisional di Editor HTML Tema

Metode ini digunakan jika Anda ingin menyuntikkan halaman eror langsung ke inti template XML menggunakan logika pemosisian halaman khusus agar performa pemuatan lebih solid.

1. Masuk ke dasbor Blogger, klik menu Tema (Theme) › Edit HTML.

2. Klik di dalam area kode, tekan CTRL + F pada keyboard, lalu cari baris kode berikut:

<b:include data='top' name='status-message'/>

3. Ganti (replace) baris kode tunggal tersebut dengan susunan logika kondisional b:if berikut:

<b:if cond='data:blog.pageType == "error_page"'>
    <b:else/>
    <b:include data='top' name='status-message'/>
</b:if>

4. Pastikan Anda menaruh kode HTML kustom dari kotak sebelumnya tepat di baris penampung komentar ``.

5. Klik Simpan.

Cara Menguji Hasil Konfigurasi

Untuk memastikan halaman eror kustom Anda berfungsi dengan sempurna, buka tab browser baru dan ketikkan alamat blog Anda secara manual dengan menambahkan akhiran karakter acak yang tidak pernah ada di blog Anda.

Contoh Pengujian: https://namabloganda.blogspot.com/asdfjkl atau https://namabloganda.blogspot.com/halaman-ngawur

Jika browser berhasil merender tampilan dengan teks khusus "HALAMAN TIDAK DITEMUKAN" beserta kotak pencarian fungsional yang berjalan normal, maka konfigurasi optimasi halaman 404 kustom Anda sudah dinyatakan sukses sepenuhnya.

Cari Blog Ini

Blogger Theme Tutorial