Cara Membuat Halaman error 404 di Blog

Friday, 31 January 2014

Cara Membuat Halaman error 404 di Blog

Kali ini saya akan share tentang Cara Membuat Halaman Error 404 Di Blog. Meskipun sudah banyak yang share, saya rasa tidak ada salahnya untuk share ulang atau repost. Saya sudah membuat tutorialnya menjadi sangat simple dan mudah di praktekan. Langsung saja :)

Pertama-tama, seperti biasa Buka Blog lalu ke Edit HTML.
Oh, iya. Kita akan menggunakan Tag Conditional, CSS, dan HTML.
Tambahkan Meta Tag di bawah ini di bawah Kode <head>

<b:if cond='data:blog.pageType == "error_page"'>
<title>404: Maaf halaman yang ada cari tidak ada | Hafiz Cyber</title>
</b:if>

Kemudian, tambahkan kode ini di atas </body>

<b:if cond='data:blog.pageType == &quot;error_page&quot;'>

        <div id='DB-error-page'>

          <h1>404 Halaman/Posting tidak ditemukan!</h1><br/>

          <p>Mungkin Halaman/Posting yang anda tuju telah di hapus dalam blog ini, silahkan gunakan kotak penelusuran di bwah ini</p><br/>

          <div class='kotak-pencarian-404'>   

          <div id='searchbox'>

          <form action='/search' id='searchthis' method='get'>

          <div class='content'>

          <input class='textfield' name='q' size='24' type='text' value='Cari disini...'/>

          <input class='button-cari' type='submit' value='Cari'/>

          </div>

          </form>

          </div>

          </div><br/>

          <a href='/'>Kembali ke Homepage</a>

        </div>

    </b:if>

Kemudian Letakkan kode CSS ini.

/* error 404 */

#DB-error-page {

  text-align:center;

  background-color:#900;

  position:fixed !important;

  position:absolute; /* IE6 Fallback */

  top:0px;

  right:0px;

  bottom:0px;

  left:0px;

  padding-top:100px;

  z-index:99999;

}

#DB-error-page h1 {

font-family: arial, georgia, sanserif;

font-size: 40px;

font-weight:600;

color:#fff;

}



#DB-error-page p {

font-family: arial, georgia, sanserif;

font-size: 20px;

font-weight:400;

color:#fff;

}



#DB-error-page a {

font-family: arial, georgia, sanserif;

font-size: 15px;

font-weight:300;

color:#fff;

}



#DB-error-page a:hover {

color:black;

}



/* Search page 404 db */

#searchbox {

    margin:0 auto;

    color:#fff;

    overflow: hidden;

    padding:0 auto;

    position: relative;

    height: 40px;

    width: 665px;

}



#searchbox .textfield {

    -moz-border-bottom-colors: none;

    -moz-border-image: none;

    -moz-border-left-colors: none;

    -moz-border-right-colors: none;

    -moz-border-top-colors: none;

    background: none repeat scroll 0 0 #fff;

    border-color: black -moz-use-text-color -moz-use-text-color black;

    border-right: medium none;

    border-style: solid;

    border-width: 1px;

    padding: 4px 5px 4px;

    width: 180px;

}



#searchbox .button-cari {

    -moz-transition: all 0.3s ease 0s;

    background: #E24A27 !important;

    border: medium none;

    color: white;

    cursor: pointer;

    display: inline-block;

    height: 24px;

    margin-right: 4px;

    position: relative;

    text-decoration: none;

}

Jika sudah, simpan Template Anda dan lihat hasilnya.