Cara Membuat 404 Error Page Di Blogger

Tips And Trik Trik Blog

i7-core.blogspot.com - Sore kawan :D . Makin rajin ngeblog nih hehe, pada kesempatan hari ini saya mau kasih tutorial yang sangat simple yaitu bagaimana cara membuat 404 Error Page Professional

404

Langsung aja

DEMO

Cara Pemasangan

• Pergi ke Blogger → Setting → Search Preferences
• Edit di 404 Error page
• Copy kode dibawah ini lalu paste di kotak tersebut

<!-- Blogger Yard 404 Page -->
  <p style='line-height: 30px'><strong>
<font color='#ff0000' size='5'>
Oops!
</font> <font color='#666666'>
Kelihatannya halaman yang anda cari tidak ada di database kami. <br/> Anda bisa melakukan hal berikut:
</font></strong></p>
  <ol style='line-height: 25px'>
    <li><a href='javascript:history.go(-1)'>&#171; Kembali ke halaman sebelumnya</a> </li>
    <li>Laporkan masalah dengan<a href='http://i7-core.blogspot.com/p/var-servicedomainwww.html'>Masuk Disini</a>&#160;&#160;&#160; (<em>Ini bisa membuat kami bekerja lebih baik lagi</em>) </li>
    <li>Kembali ke beranda dengan<a href='http://i7-core.blogspot.com'>Klik disini</a>
      <br/></li>
<li>Cari apapun disini</li>
  </ol>
<br />
 <center><form _lpchecked='1' action='/search' class='search-form' id='search_mini_form' method='get'>
<input id='searchinput' name='q' onblur='if (this.value == &apos;&apos;) {this.value = &apos;Type Here & Hit Enter&apos;;}' onfocus='if (this.value == &apos;Search the site&apos;) {this.value = &apos;&apos;;}' type='text' value='Tulis disini lalu klik enter'/>
<input id='searchbutton' style='vertical-align: top;' type='submit' value='Search!'/>
</form></center>
  <p>
    <br/>
    <br/>
    <br/></p>
<p align='center'><font size='5'>Page Not Found!</font></p>
<br /> <br /> <br />
<p align='center'> <font style='font-size:150px; font-weight:bold;' color='red'> 404 </font></p>
<style>
.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;
}
#sidebar-wrapper, #midsidebar-wrapper, .gapad2, .blog-pager, .post-header-line-1, .post-footer , #rsidebar-wrapper { display:none !important;} #main-wrapper { width:98%!important;} .post { width:98%!important; }
#searchinput {

background: #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_LzgjkyogGOqIM9Sokp_ecrr4Uv_LVUmMS9dxH9oYYJ7Z-iLZeIiucG4jENIz3v5qASedF7cTfhyphenhyphenBOnZXAKplc5axLeUU7ik2T5iWYR0iKn1IX3mIAznlCkOn61MzksPdGCXwe7VAE-tF/s0/search.png) no-repeat 7px 8px;
background-color: #FFF;
border: 1px solid #ddd;
color: #A0A0A0;
display: inline-block;
font-family:arial;
font-size: 12px;
font-weight:bold;
height: 24px;
width:300px;
margin: 0;
margin-top: 5px;
padding: 5px 15px 5px 28px;
vertical-align: top;
}
#searchinput:hover{
border: 1px solid #bebebe;
box-shadow: 0 1px 2px rgba(5, 95, 255, .1);
padding: 5px 15px 5px 28px;
}
#searchbutton {
background:#444;
color:#fff;
height:35px;
border-radius:5px 5px 5px 5px;
box-shadow:1px 2px 1px 1px #ABABAB;
border:1px solid #fff;
margin-top:3px;
padding:8px;
}
#searchbutton:hover{background:#555;}
</style>

• Ganti " http://i7-core.blogspot.com/p/var-servicedomainwww.html " dengan Url sobat
• Ganti " http://i7-core.blogspot.com " dengan url sobat
• Save dan Lihat hasilnya
  

Bagikan

Jangan lewatkan

Cara Membuat 404 Error Page Di Blogger

4/ 5

Oleh Rijal Imnida

Rijal Imnida 15:48 18 Komentar