Cara Membuat Halaman Error 404 di Blog ~ #Share All About Trick Blogger and Interesting | MZT-Blog yang menyediakan bermacam-macam Trik Blogger Dan Template Gratis

Cara Membuat Halaman Error 404 di Blog

Assalamualaikum sobat.Kali ini saya akan memberikan trik blogger yang cukup mudah.Trik ini namanya "Cara Membuat Halaman Error 404 di Blog".Sebenarnya sih saya ini sakit kepala alias pusing.namun, saya tetap berusaha berbagi trik yang cukup mudah ini.Yah langsung saja yah sob.dikutip dari defanzaki

Cara Membuat Halaman Error 404 di Blog

Berikut Cara Membuatnya.

Contoh tag conditional yang akan digunakan:


<body>

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

        ...

        ...

        Baris/bidang element blog seperti posting, widget, sidebar dan yang lainnya.

        Element ini akan di sembunyikan jika tak ditemukan url/link apa pun yang ada dalam directory widget.

        ...

        ...

    </b:if>



     Dibawah ini adalah pesan error yang akan muncul ketika permintaan tidak di temukan

  

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

        <div id='error-page'>

           <h1>Desain error 404 yang diterapkan.</h1>

        </div>

    </b:if>

</body>

Pertama cari tag kode <body> dan penutup </body> di template anda, lalu sisipkan kode tag conditional berikut di antaranya, lihat cara seperti di bawah ini

Pastekan kode di bawah ini di bawah kode tag <body>


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



Kemudian cari kode tag </body> dan patekan kode berikut di atasnya



</b:if>

lalu letakkan kode berikut ini di atas kode tag </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>

Maka jika benar, semua akan tampak demikian:




<body>

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

        ...

        ...

        Baris/bidang element blog seperti posting, widget, sidebar dan yang lainnya.

        Element ini akan di sembunyikan jika tak ditemukan url/link apa pun yang ada dalam directory widget.

        ...

        ...

    </b:if>



<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>

</body>

Selanjutnya, ubah tag tittle menjadi seperti berikut




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

    <title><data:blog.pageTitle/></title>

<b:else/>

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

        <title>Laman Tidak Ditemukan - <data:blog.title/></title>

    <b:else/>

        <title><data:blog.pageName/> - <data:blog.title/></title>

    </b:if>

</b:if>

Setelah semua yang di atas selesai, kini tambahkan css berikut ke template anda dan simpan.


/* 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;

}

Silahkan anda ganti tulisan diantara tag <h1> dan <p> dengan tulisan yang anda ingin.