Modifikasi Halaman 404 Page Not Found Di Blog

Sobat pernah tidak, membuat artikel/postingan dan artikel tersebut sobat ganti url nya atau bisa jadi sobat hapus, akibat dari terhapus atau berganti nya url tersebut dapat mempengaruhi pengunjung beralih ke halaman kosong (error page). Pengunjung blog sobat akan kebingungan atau mungkin kesal dan akrhinya mereka meninggalkan blog sobat. Dan sobat sudah tahukan gimana nanti nya? Ya, trafik atau kunjungan ke blog sobat akan menurun lama kelamaan.

renzmaulana.blogspot.com - Cara merubah atau memodifikasi halaman 404 page not found atau page error

Dengan memodifikasi halaman error tersebut pengunjung bisa tahu bahwa page/halaman yang dicari telah dihapus atau url nya di ubah oleh sobat. Di halaman Page Not Found juga sobat bisa menampilkan tombol kembali ke homepage (halaman depan) blog sobat. Di sini saya akan membagikan cara memodifikasi halaman 404 Page Not Found Di Blog, silahkan disimak.

Langkah-langkah memodifikasi halaman error page 404 not found

Demo

• Masuk ke akun blogger sobat: blogger.com
• Klik menu template dan klik Edit Template
• Copy kode dibawah ini dan paste diatas kode ]]></b:skin>

/* -- CSS ERROR PAGE RM -- */
#oopss {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEeb-hM7QfjA3IAVhvztPVPq5grFh4CUplZjzIz-h-RrDfwDtif95tIR0VTT1bexdisNdAh4mcu8zUHk_vmbRzG_bjlXygocMRi3XcS9uiNNkVDhtblillQNcdNm_IhgPgdlI3IDPZXJKP/s1600/Renz+Maulana+-+Sword+Art+Online.jpg);background-size: 100%;background-repeat: no-repeat;position: fixed !important;position: absolute;text-align:center;margin-bottom:50px;font-weight:700;font-size:45px;font-family:'Ruda',sans-serif;width:100%;height:100%;line-height:1.5em;z-index:9999;}
#error-text {top:30%;position:relative;font-size:40px;color:#fff;}
#error-text a{color:#888;}
#error-text p {margin:0!important;}
#error-text span {color:#0A9992;font-size:100px;}
#error-text a.back {background:#0A9992;color:#fff;padding:10px 20px;font-size:20px;border:double #ddd;-webkit-transform:scale(1);-moz-transform:scale(1);transform:scale(1);transition:all 0.5s ease-out;}
#error-text a.back:hover {background:#fff;color:#666;border:double #ff2555;}
#error-text a.back:active {-webkit-transform:scale(0.9);-moz-transform:scale(0.9);transform:scale(0.9);background:#333;color:#fff;border:double #fff;}

• Kode yang saya tandai biru, sobat bisa ganti dengan gambar apa saja dan kode warna sesuka hati sobat, jika tidak tahu kode warna html, atau sobat bingung mau pilih warna apa, silahkan sobat bisa pilih warna nya di sini
• Jika sudah, sekarang sobat copy kode dibawah ini, dan paste tepat dibawah kode <body>

<b:if cond='data:blog.pageType == "error_page"'>
<div id='oopss'>
<div id='error-text'>
<span>404</span>
<p>PAGE NOT FOUND!!!</p>
<p><a class='back' href='/'>Back To Home</a></p>
</div>
</div>
</b:if>

• Memodifikasi halaman 404 page not found sudah selesai, terakhir Simpan / save template.

Begitulah cara memodifikasi halaman 404 Page Not Found Di Blog, semoga bermamfaat.
Jika ada pertanyaan atau ada kode yang error dan tidak bisa dipasang di blog sobat, silahkan berkomentar.
Baca juga: Cara Membuat Blog Redirect Seperti Safelink Tanpa Hitungan Waktu