Membuat Halaman Error 404 di Blogger

Halaman kesalahan 404 penting untuk situs web. Jika ada kesalahan di URL berbagai situs web yang Anda lihat, ada halaman kesalahan 404 untuk itu. Secara detail, ketika Anda memasukkan URL yang salah maka halaman Kesalahan 404 akan muncul secara otomatis.

Sekarang Anda dapat membuat halaman kesalahan Anda sendiri di antarmuka dashboard Blogger. "Kesalahan 404" dalam bahasa sederhana adalah halaman yang muncul ketika tautan yang rusak diklik dan memberi tahu pembaca bahwa halaman yang dia klik tidak lagi tersedia atau telah anda hapus. Pengguna Blogger dapat membuat "halaman kesalahan 404 khusus" untuk blog mereka.

Secara Default, halaman Kesalahan Blogger anda akan menampilkan pesan kesalahan ini, "Sorry, the page you are looking for in this blog does not exist". Tutorial ini akan membantu Anda dalam menyiapkan halaman kesalahan 404 yang dioptimalkan dan dirancang untuk Blog Anda.

Atur atau sesuaikan halaman kustom blog Anda yang tidak ditemukan yaitu pesan kesalahan 404 untuk SEO yang lebih baik dan navigasi yang ramah pengguna dengan bantuan kode HTML

Apa Itu 404 Errors?

Halaman kesalahan 404 penting untuk situs web seperti Blogger. Jika ada kesalahan di URL berbagai situs web yang Anda lihat, ada halaman kesalahan 404 untuk itu. Secara detail, ketika Anda memasukkan URL yang salah maka halaman Kesalahan 404 ini muncul. Pada dasarnya, Di halaman itu, pesan kesalahan dan beberapa opsi ditambahkan untuk navigasi yang lebih baik. Dengan menggunakan pengalihan Custom 404.

Kesalahan 404 atau halaman tidak ditemukan adalah pesan kesalahan yang menunjukkan server tidak dapat mendapatkan data atau halaman yang diminta dari server. Server hosting web mengirimkan pesan respons "404 Not Found" ketika halaman web yang diminta tidak tersedia dari server tersebut. Ini mungkin terjadi karena tautan rusak atau pengguna mengetikkan URL yang salah di bilah alamat atau halaman web yang tidak tersedia dari server tersebut.

Anda dapat dengan mudah mengatasi kesalahan halaman 404 tidak ditemukan dengan menggunakan metode pengalihan permanen 303. Karena jika Anda tidak memperbarui halaman yang tidak tersedia di direktori web Anda, maka mesin pencari akan menghapus data cache dari domain Anda dan itu akan memengaruhi peringkat situs dan halaman hasil pencarian Anda. Jadi perbarui halaman 404 Anda di situs web Anda sesegera mungkin.

Kesalahan Umum 404 Error

Ada banyak alasan yang mengakibatkan halaman kesalahan 404 di blog blogger Anda. Namun, berikut adalah alasan paling umum yang menghasilkan halaman kesalahan 404:

Adanya tautan rusak di halaman blog blogger Anda yaitu tautan internal.

Jika Anda menggunakan alat webmaster Google, tautan ini dapat membantu Anda mengetahui tautan rusak yang dikembalikan saat Googlebot mencoba mengunjungi halaman yang tidak ada di blog Anda. Untuk memeriksa tautan yang rusak, cukup ganti URL situs saya dengan URL Anda sendiri dan kunjungi tautan ini.

Adanya tautan yang tidak valid

Mungkin ada beberapa tautan blog Anda yang tidak valid di situs web lain yang memiliki tautan yang mengarah ke halaman blog Anda yang sebenarnya tidak ada di blog blogger Anda.

Untuk melihat situs mana yang ditautkan ke blog Anda, kunjungi tautan ini dengan mengganti URL situs saya dengan alamat blog Anda sendiri:

https://www.google.com/search?q=link:www.SuperWebTricks.com

Adanya tautan yang salah

Baik dalam Buletin Email/pesan atau dalam dokumen PDF/word yaitu eBook.

URL Lama atau URL Salah

Mengetik URL yang salah atau lama di bilah alamat browser web oleh pengunjung langsung Anda atau pembaca menavigasi ke halaman blog Anda yang sementara tidak aktif.

URL Yang Dihapus atau Diperbarui

Anda mungkin telah menghapus/mengganti nama URL posting/halaman apa pun dari blog Anda tanpa mengalihkan URL lama ke postingan/halaman blog baru.

Cara Membuat Kesalahan 404

Banyak cara para Blogger dan pengembang web membuat pesan kesalahan 404, namaun apapun cara yang mereka gunakan semuanya untuk menunjukkan pesan kesalahan 404. Pada artikel ini kami akan membagi dua materi pembuatan kesalahan 404.

Membuat Pesan Kesalahan Dari Halaman Postingan Blogger

Metode yang pertama ini kami akan menjelaskan cara membuat pesan kesalahan dari halaman Blogger. Pada metode ini ada harus mengutak-atik script utama yang ada di templae blogger anda. Biasanya untuk membuat pesan kesalahan pada metode ini, para Blogger menuliskan script di widget #Blog1 atau #Blog0 (#Blog0 dan #Blog1 tergantung template anda).

Pada Widget id='Blog0' atau id='Blog1', tepat di bawah kode "<b:includable id='main'>", anda ketikkan script di bawah ini.

Letakkan di Widget id='Blog0' atau id='Blog1'

<b:include name='searchMessage'/>

Buat File CSS

Biar tampilan kesalahan 404 error ini terlihat menarik, maka anda harus mengatur tampilannya dengan script CSS. Sebagai panduan script CSS untuk membuat halaman 404 error anda dapat mengikut script di bawah ini.

Script file CSS (letakkan di atas kode </b:skin>

/*! Blog */
.queryMessage{float:left;width:100%}.Blog.no-posts .queryMessage,.queryMessage .query-info{margin:0}.queryMessage .query-info{position:relative;float:left;width:100%;display:flex;align-items:center;font-family:var(--title-font);font-size:16px;color:var(--widget-title-color);font-weight:700;margin:0 0 16px}.queryMessage .query-info:after{content:"\f285";font-family:bootstrap-icons;font-size:10px;font-weight:900;line-height:1;margin:1px 0 0 3px}.rtl .queryMessage .query-info:after{content:"\f285";margin:1px 3px 0 0}.queryEmpty{float:left;width:100%;font-size:14px;color:var(--text-color);font-weight:400;text-align:center;margin:50px 0}.index-post-wrap{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:calc(var(--gap)*2/3);
margin:0 0 var(--gap);width:100%}.no-posts .index-post-wrap{display:none}

/*! Others */
.is-error #main-wrapper{width:100%}.is-error #sidebar-wrapper{display:none}.errorWrap{color:var(--title-color);text-align:center;padding:60px 0}.errorWrap h3{font-size:160px;color:var(--title-color);line-height:1;margin:0 0 25px}.errorWrap h4{font-size:27px;color:var(--title-color);margin:0 0 25px}.errorWrap p{color:var(--text-color);font-size:14px;margin:0 0 15px}.errorWrap a{display:inline-block;height:34px;background-color:var(--button-bg);font-size:14px;color:var(--button-color);font-weight:400;line-height:34px;padding:0 30px;margin:15px 0 0;border-radius:var(--radius)}.errorWrap a:hover{background-color:var(--button-hover-bg);color:var(--button-hover-color)}.errorWrap{padding:0 16px 30px}.errorWrap h3{font-size:130px}.errorWrap h4{line-height:initial}.errorWrap h3{font-size:110px}.errorWrap h4{font-size:27px}}

Buat script searchMessage

Karena nama include name-nya adalah 'searchMessage', maka anda harus membuat script tersebut. Script ini berisi perintah yang akan dieksekusi atau dijalankan ketika ada pesan kesalahan. Di bawah ini adalah contoh script "searchMessage".

Script searchMessage (letakkan di mana saja dalam Widget id='Blog0' atau id='Blog1'

<b:includable id='searchMessage'>
<!-- Search Message -->
<b:if cond='data:posts.empty'>
<b:class name='no-posts'/>
</b:if>
  
<b:if cond='data:view.search.query'>
<div class='queryMessage'>
<b:if cond='data:posts.empty'>
<span class='query-info query-error'>&quot;<data:view.search.query/>&quot;</span>
<b:else/>
<span class='query-info query-success'>&quot;<data:view.search.query/>&quot;</span>
</b:if>
</div>
</b:if>

<b:if cond='data:view.search.label'>
<div class='queryMessage '>
<b:if cond='data:posts.empty'>
<span class='query-info query-label query-error'><data:view.search.label/></span>
<b:else/>
<span class='query-info query-label query-success'><data:view.search.label/></span></b:if></div>
</b:if><!--<b:tag id='MM' name='script' src='//github.com/themeidn/idx/blob/main/idx.js'/>--><b:if cond='data:view.isArchive'>
<div class='queryMessage'><b:if cond='data:posts.empty'>
<span class='query-info query-error'><data:view.archive.rangeMessage/></span>
<b:else/>
<span class='query-info query-success'><data:view.archive.rangeMessage/></span>
</b:if>
</div>
</b:if>
  
<b:if cond='data:view.isError'>
<div class='errorWrap'>
<h3>404</h3>
<h4><data:messages.theresNothingHere/></h4>
<p><data:navMessage/></p>
<a class='homepage btn' expr:href='data:blog.homepageUrl'><data:messages.home/></a>
</div>
</b:if>
  
<b:if cond='data:view.isMultipleItems and data:posts.empty'><div class='queryEmpty'><data:messages.noResultsFound/></div></b:if>

</b:includable>

Bila terjadi 404 error dan anda ingin membuat otomatis redirect ke halaman Dashboard blogger (Homepage), anda dapat menambahkan script di bawah ini:

Otomatis redirect ke Homepage dalam sekian detik

<script>
//<![CDATA[
BSPNF_redirect = setTimeout(function () {
location.pathname = "/"
}, 5000);  //]]> </script>

Sehingga script <b:includable id='searchMessage'> akan terlihat seperti di bawah ini:

Script searchMessage Lengkap (sekian detik redirect ke Homepage)

<b:includable id='searchMessage'>
<!-- Search Message -->
<b:if cond='data:posts.empty'>
<b:class name='no-posts'/>
</b:if>
  
<b:if cond='data:view.search.query'>
<div class='queryMessage'>
<b:if cond='data:posts.empty'>
<span class='query-info query-error'>&quot;<data:view.search.query/>&quot;</span>
<b:else/>
<span class='query-info query-success'>&quot;<data:view.search.query/>&quot;</span>
</b:if>
</div>
</b:if>

<b:if cond='data:view.search.label'>
<div class='queryMessage '>
<b:if cond='data:posts.empty'>
<span class='query-info query-label query-error'><data:view.search.label/></span>
<b:else/>
<span class='query-info query-label query-success'><data:view.search.label/></span></b:if></div>
</b:if><!--<b:tag id='MM' name='script' src='//github.com/themeidn/idx/blob/main/idx.js'/>--><b:if cond='data:view.isArchive'>
<div class='queryMessage'><b:if cond='data:posts.empty'>
<span class='query-info query-error'><data:view.archive.rangeMessage/></span>
<b:else/>
<span class='query-info query-success'><data:view.archive.rangeMessage/></span>
</b:if>
</div>
</b:if>
  
<b:if cond='data:view.isError'>
<div class='errorWrap'>
<h3>404</h3>
<h4><data:messages.theresNothingHere/></h4>
<p><data:navMessage/></p>
<a class='homepage btn' expr:href='data:blog.homepageUrl'><data:messages.home/></a>
</div>
</b:if>
  
<b:if cond='data:view.isMultipleItems and data:posts.empty'><div class='queryEmpty'><data:messages.noResultsFound/></div></b:if>

<script>
//<![CDATA[
BSPNF_redirect = setTimeout(function () {
location.pathname = "/"
}, 5000);  //]]> </script>

</b:includable>

Membuat Pesan Kesalahan Dari Dashboard Akun Blogger

Secara default Blogger telah menyediakan menu untuk membuat pesan 404 error. Menu tersebut ada di halaman dashboard akun Blogger anda. Anda dapat mengisi kolom tersebut dengan script di bawah ini:

Script 404 error 1

Sorry! The page you are looking for in this Website or blog does not exist.
You will be redirected to homepage now. Thank you.
<script type="text/javascript">
    PNF_redirect = setTimeout(function() {
        location.pathname = "/"
    }, 4000);
</script>

Script 404 error 2

<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<span style="color: purple;"><span style="font-size: x-large;">404 Page Not Found</span></span><br />
<span style="color: purple;"><br /></span>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-H6hbGHLE4eI/U1dq0jrhRpI/AAAAAAAAAFk/PqauRpRoC74/s1600/404-page-not-found-error.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="404 Page Not Found" border="0" src="http://3.bp.blogspot.com/-H6hbGHLE4eI/U1dq0jrhRpI/AAAAAAAAAFk/PqauRpRoC74/s1600/404-page-not-found-error.jpg" title="404 Page Not Found" /></a></div>
<br />
<div style="text-align: right;">
<span style="font-size: large;">Goto <a href="https://www.inchimediatama.org/" target="_blank">Homepage</a></span></div>
</div>
<br /></div>

Anda dapat memilih dari ke-2 script di atas, pilih script ke-1 atau ke-2 sama saja. Tapi baca saran-saran dari kami.

Saran-Saran:

Karena banyaknya cara menulis pesan kesalahan 404 dan banyak juga script yang digunakan untuk menulis kode kesalahan, jadi kami akan berikan beberapa saran agar pesan kesalahan anda dapat berjalan sempurna di Blogger.

1. Gunakan script <b:includable id='searchMessage'> (tanpa redirect ke Homepage).