Sabtu, 29 September 2012

Kustomisasi 'halaman tidak ditemukan' pada Blogger


Oke deh, kali ini saya akan posting tentang cara Mengkustomisasi halaman tidak ditemukan sehingga menjadi lebih menarik, seperti milik saya yang bisa anda lihat disini.


Biasanya, ketika kita menuju pada url yang salah, kita akan diarahkan pada 'http 404 error not found' seperti yang ada dibawah ini:


Tapi di blogger kita biasa melihat seperti ini:


Mungkin kita bisa mengkustomisasu, eh, maksudnya mengkustomisasi 'halaman tidak ditemukan' ini menjadi lebih menarik dan atraktif.

caranya:

  • Login ke blogger dan masuk ke dashboard>template>edit HTML
  • Copas kode ini tepat sebelum tag </head>:

 
<b:if cond='data:blog.pageType == &quot;error_page&quot;'>
<style type='text/css'>
body {
background-image: url(http://sphotos-g.ak.fbcdn.net/hphotos-ak-ash3/542122_3771692698854_1564084613_n.jpg);
    background-size: 100%;
            min-height: 700px;
    background-repeat: no-repeat;
background-attachment: fixed;
}
.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>

  • Lalu simpan template,
  • kemudian balik ke dashboard, pergi ke setting>search preference/preferensi penelusuran.
  • pada 'Pesan Khusus untuk Laman Tidak Ditemukan' , klik edit dan copas code dibawah ini:

<div style="position:fixed;top:0%;left:0%;width:100%;height:100%;background:#000;">
<img style="position:ablosute;width:100%;" src="http://sphotos-g.ak.fbcdn.net/hphotos-ak-ash3/542122_3771692698854_1564084613_n.jpg">
</div>
<div style="position:fixed;top:0%;left:0%;width:100%;height:100%;"></div>
<div style="position:absolute;background:white;box-shadow:0px 0px 10px #fff;">
<h3>Halaman Tidak DItemukan</h3>
<p>Maaf, halaman yang Anda cari tidak dapat ditemukan. Hal ini terjadi bisa karena salah ketik alamat <b>Blog Iseng</b> atau link tersebut sudah berubah.
<p/>
<b>Apa yang bisa Saya lakukan?</b><ul>
<li>Kembali ke homepage <a href="/">Blog Iseng</a></li>
<li>Gunakan fitur pencarian<br/>
<form action="/search" method="get">
<table width="100%">
<tr>
<td><input type="text" style="width:95%;padding:2px;" value="cari di blog ini.." onfocus="if (this.value == &quot;cari di blog ini..&quot;) {this.value = &quot;&quot;}" onblur="if (this.value == &quot;&quot;) {this.value = &quot;cari di blog ini..&quot;;}" name="q"></td>
<td><input type="submit" Value="Search"></td>
</tr>
</table>
</form></li>
<li>Silakan cari informasi menarik lainnya melalui menu navigasi yang terletak pada bagian atas halaman ini</li>
</ul></div>

 Lalu simpan, dan cobalah hasilnya, muahahahahahaha,, hap.

Tidak ada komentar:

Posting Komentar