Error, Pengalihan khusus, & 404 khusus

 

Error dan pengalihan

Buat Halaman 404 Khusus dan Pengalihan khusus di Blogger

Berikut panduan cara membuat halaman 404 khusus dan pengalihan di Blogger, meskipun fitur ini agak terbatas. Kamu bisa mengakali agar pengunjung tidak keluar dari blog saat menemukan error:

✅ 1. Atur Pengalihan Khusus (Custom Redirects) 

Fungsinya: Jika ada URL lama atau salah ketik, arahkan ke URL baru yang valid.

➤ Langkah-langkah:

  1. Masuk ke dashboard Blogger

  2. Buka Setelan (Settings) → bagian Kesalahan dan pengalihan

  3. Klik Pengalihan Khusus

  4. Klik + Tambahkan

  5. Isi seperti ini:

    • Dari/halaman-lama.html

    • Ke/halaman-baru.html

    • Centang Permanen

  6. Klik Simpan

⚠️ Format harus relatif (tidak pakai domain), misalnya /artikel-seo-lama.html → /artikel-seo-baru.html


🚫 Jika “tidak ada item” saat membuat pengalihan:

Itu artinya kamu belum menambahkan pengalihan apa pun, jadi daftar masih kosong. Setelah menambahkan lewat tombol + Tambahkan, barulah item muncul.


✅ 2. Atur Custom 404 (A)

➤ Langkah-langkah:

  1. Masuk ke dashboard Blogger

  2. Klik Setelan (Settings)

  3. Scroll ke bagian Kesalahan dan pengalihan (Error and Redirection)

  4. Klik Pesan untuk halaman Tidak Ditemukan (Custom 404)

  5. Masukkan HTML pendek seperti ini:

<h2>Ups! Halaman tidak ditemukan 😒</h2>
<p>Maaf, halaman yang Anda cari mungkin sudah dihapus atau tidak tersedia.</p>
<p><a href="/">Kembali ke Beranda</a> atau lihat <a href="/search/label/Populer">Artikel Populer</a>.</p>

πŸ’‘ Kamu bisa ganti link /search/label/Populer dengan label kategori yang kamu anggap populer.
URL yang perlu kamu ganti dengan link artikel populer adalah bagian berikut:
<a href="/search/label/Populer">πŸ”₯ Lihat Artikel Populer</a>
Misalnya kamu punya artikel populer dengan URL:
https://namablogkamu.blogspot.com/2024/12/cara-buat-blog.html
Maka ubah bagian tadi menjadi:
<a href="/2024/12/cara-buat-blog.html">πŸ”₯ Lihat Artikel Populer</a>
Gunakan URL relatif (tanpa https://namablogkamu.blogspot.com) agar tetap aman di semua domain Blogger

🧠 Tips Tambahan:

  • Tambahkan link navigasi (beranda, artikel populer, kategori) di halaman 404 khusus

  • Jangan arahkan semua error ke homepage secara otomatis via script — itu bisa dianggap soft 404 oleh Google

  • Gunakan label seperti /search/label/Tips atau /search/label/SEO sebagai tautan cepat ke topik populer


✅ 3. Atur Custom 404 (B)

Berikut adalah template HTML halaman 404 khusus untuk Blogger — tampilannya simpel, ringan, ramah SEO dan pengguna:


✅ Cara Pakai:

  1. Buka Dashboard Blogger → Setelan

  2. Di bagian Kesalahan dan Pengalihan, klik Pesan untuk halaman Tidak Ditemukan (404)

  3. Tempel kode di bawah ini:

<style>
  .notfound-container {
    text-align: center;
    padding: 40px 20px;
    font-family: Arial, sans-serif;
    color: #333;
  }

  .notfound-container h2 {
    font-size: 2em;
    color: #e74c3c;
  }

  .notfound-container p {
    margin: 10px 0;
  }

  .notfound-container a {
    display: inline-block;
    margin: 10px;
    padding: 10px 18px;
    background-color: #007BFF;
    color: #fff;
    text-decoration: none;
    border-radius: 6px;
  }

  .notfound-container a:hover {
    background-color: #0056b3;
  }
</style>

<div class="notfound-container">
  <h2>Oops! Halaman Tidak Ditemukan (404)</h2>
  <p>Maaf, halaman yang Anda cari mungkin sudah dihapus atau URL-nya salah.</p>
  <a href="/">πŸ”™ Kembali ke Beranda</a>
  <a href="/search/label/Populer">πŸ”₯ Lihat Artikel Populer</a>
</div>

Tips:

Ganti /search/label/Populer dengan label yang memang kamu gunakan, misalnya: /search/label/SEO


✅ 4. Atur Custom 404 (C)

Berikut versi halaman 404 Blogger yang lebih menarik dengan:

✅ Ikon SVG
✅ Animasi ringan (fade in)
✅ Gambar latar lembut (tanpa memberatkan loading)
✅ Bisa langsung dicoba/tampilkan

πŸ§ͺ Cara Tes Halaman 404 Blogger Secara Langsung

  1. Buka blog kamu.

  2. Di URL-nya, ketik sesuatu yang tidak ada, misalnya:

          https://namablogkamu.blogspot.com/p/hilang.html

      3. Jika halaman itu tidak ada, maka akan memunculkan tampilan 404 khusus yang kamu buat tadi.

πŸ’‘ Kode Halaman 404 Khusus (Cantik + Ringan):

Tempel di Setelan > Pesan Halaman Tidak Ditemukan (404):

<style>

  body {

    background: linear-gradient(135deg, #f3f4f6, #e0e7ff);

    font-family: 'Segoe UI', sans-serif;

    margin: 0;

    padding: 0;

  }


  .notfound-wrap {

    text-align: center;

    padding: 60px 20px;

    color: #333;

    animation: fadein 1s ease-in-out;

  }


  .notfound-icon {

    width: 100px;

    margin-bottom: 20px;

  }


  .notfound-wrap h2 {

    font-size: 28px;

    margin-bottom: 10px;

    color: #dc2626;

  }


  .notfound-wrap p {

    font-size: 16px;

    margin-bottom: 20px;

  }


  .notfound-wrap a {

    display: inline-block;

    margin: 8px;

    padding: 10px 20px;

    background-color: #3b82f6;

    color: white;

    border-radius: 8px;

    text-decoration: none;

    transition: background 0.3s;

  }


  .notfound-wrap a:hover {

    background-color: #2563eb;

  }


  @keyframes fadein {

    from {opacity: 0; transform: translateY(20px);}

    to {opacity: 1; transform: translateY(0);}

  }

</style>


<div class="notfound-wrap">

  <!-- SVG ICON 404 -->

  <svg class="notfound-icon" fill="none" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">

    <circle cx="32" cy="32" r="30" stroke="#dc2626" stroke-width="4"/>

    <line x1="22" y1="22" x2="42" y2="42" stroke="#dc2626" stroke-width="4"/>

    <line x1="42" y1="22" x2="22" y2="42" stroke="#dc2626" stroke-width="4"/>

  </svg>


  <h2>Halaman Tidak Ditemukan (404)</h2>

  <p>Sepertinya halaman ini sudah hilang atau URL-nya salah.</p>

  <a href="/">πŸ”™ Kembali ke Beranda</a>

  <a href="/search/label/Populer">πŸ”₯ Lihat Artikel Populer</a>

</div>

.

πŸ”§ Kustomisasi:

  • Warna background: Bisa diganti sesuai branding blog kamu (pakai #hex atau linear-gradient)

  • Label populer: Ganti /search/label/Populer ke label milikmu

  • SVG Icon: Bisa diganti ikon lucu, seperti emoji 404, detektif, atau logo kamu

Comments

Popular posts from this blog

Meta Tag Lengkap untuk SEO