Kustomisasi Halaman Error 404 Blogger

Setelah di post sebelumnya udah membahas tentang halaman error 404 di Blogger, sekarang saatnya kita perdalam lagi. Halaman error 404 default Blogger hanya menampilkan status error saja. Dengan sedikit modifikasi, halaman error 404 ini bisa dimaksimalkan daripada sekedar pesan saja.

Contohnya bisa dilihat pada halaman error blogger-holic. Caranya mudah saja.

1. Masukkan kode CSS yang akan muncul pada halaman error saja. Masuk ke Template > Edit HTML. Copy dan paste-kan kode di bawah ini pada bagian sebelum </head>.

<b:if cond='data:blog.pageType == "error_page"'>
<style type="text/css">
.status-msg-wrap {
font-size: 100%;
margin: none;
position: static;
width: 100%;
}
.status-msg-border {
display:none
}
.status-msg-body {
padding: none;
position: static;
text-align: inherit;
width: 100%;
z-index: auto;
}
.status-msg-wrap a {
padding: none;
text-decoration: inherit;
}
</style>
</b:if>

Save.

Kode CSS ini berfungsi untuk menghilangkan kotak abu-abu yang muncul pada halaman error.


2. Ubah tag judul pada halaman error
Caranya hampir sama dengan mengubah tag judul pada Ubah Tag Judul Blog Agar SEO Friendly.
- Masuk ke Layout > Edit HTML
- Cari (gampangnya pake CTRL+F) tag
- Ganti tag tadi dengan:

<b:if cond='data:blog.pageType == &quot;index&quot;'>
<title><data:blog.title/></title>
<b:else/>
<b:if cond='data:blog.pageType == &quot;error_page&quot;'>
<title>Halaman Tidak Ditemukan :: <data:blog.title/></title>
</b:if>
<b:else/>
<title><data:blog.pageName/> :: <data:blog.title/></title>
</b:if>

3. Sekarang ubah isi dari halaman error agar sesuai dengan keinginan. Caranya sama dengan langkah-langkah pada post sebelumnya. Masuk ke Settings > Search preferences > Custom Page not Found. Paste-kan kode di bawah ini.

<h3>HalamanTidak DItemukan</h3>
<p>Maaf, halaman yang Anda cari tidak dapat ditemukan. Hal ini terjadi bisa karena salah ketik alamat <b>blogger-holic</b> atau link tersebut sudah berubah.
<p/>
<b>Apa yang bisa Saya lakukan?</b><ul>
<li>Kembali ke homepage <a href="/">blogger-holic</a></li>
<li>Gunakan fitur pencarian<br/>
<form method="get" action="/search">
<table width="100%">
<tr>
<td><input type="text" style="width:95%;padding:2px;" value="Search this blog.." onfocus="if (this.value == &quot;Search this blog..&quot;) {this.value = &quot;&quot;}" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Search this blog...&quot;;}" name="q"></td>
<td><input type="button" Value="Search"></td>
</tr>
</table>
</form></li>
<li>Silakan cari informasi menarik lainnya melalui menu navigasi yang terletak pada bagian atas halaman ini</li>
<li>Hubungi kami untuk melaporkan masalah ini melalui <a href="/2008/02/contact-form.html">Contact</a></li>
</ul>

Semoga bermanfaat..

Source: Blogger Plugins