Cara Membuat Halaman 404 Pada Blog ~ Tutorial Blog

How to Make Error 404 Pages In Blogger : Tutorial kali ini saya akan coba membagikan cara memasang halaman 404 kepada Anda. Jika pada template Anda telah terpasang halaman 404 lewati saja tutorial ini namun jika belum terpasang silahkan simak baik-baik caranya disini.

Jika anda tidak mengetahui cara untuk mengujinya silahkan paste link berikut ini

http://nama.blogspot.com/404.html

Halaman error 404 merupakan halaman yang akan muncul ketika posting hilang atau terhapus. Banyak para Blogger cenderung mengabaikan fitur ini dan tidak pernah berpikir untuk merancangnya. Padahal dengan membuat halaman error 404 yang user-friendly bisa membuat pengunjung untuk tetap tidak meninggalkan blog kita.

Sebenarnya untuk membuat halaman ini sudah banyak yang bertebaran di google, namun disini saya akan mencoba untuk membagikan kembali kepada Anda, siapa tahu saja dari kalian belum terpasang halaman ini.

Disini saya akan membuatnya lebih mudah untuk dipasang pada Blog agar Anda tidak kesulitan untuk memasangnya.

TUTORIAL:

1. Masukan CSS berikut ini diatas kode ]]></b:skin> atau </stytle>

/* Halaman 404 Tutorialnes */
#error-page{background-color:#e9e9e9;position:fixed!important;position:absolute;text-align:center;top:0;right:0;bottom:0;left:0;z-index:99999}
#error-inner{margin:11% auto}
#error-inner .box-404{position:relative;font-weight:bold;width:220px;height:210px;background:#cd0000;color:#fff;font-size:80px;line-height:200px;margin:0 auto 25px}
#error-inner .box-404::after{content:&quot;&quot;;width:0;height:0;position:absolute;top:0;right:0;border-width:30px;border-style:solid;border-color:#e9e9e9 #e9e9e9 transparent transparent;display:block}
#error-inner .box-404::before{content:&quot;&quot;;width:0;height:0;position:absolute;top:0;left:0;border-width:30px;border-style:solid;border-color:#e9e9e9 transparent transparent #e9e9e9;display:block}
#error-inner .boxx-404::after{content:&quot;&quot;;width:0;height:0;position:absolute;bottom:0;left:0;border-width:30px;border-style:solid;border-color:transparent transparent #e9e9e9 #e9e9e9;display:block}
#error-inner .boxx-404::before{content:&quot;&quot;;width:0;height:0;position:absolute;bottom:0;right:0;border-width:30px;border-style:solid;border-color:transparent #e9e9e9 #e9e9e9 transparent;display:block}
#error-inner h2{text-transform:uppercase;color:#cd0000;font-size:50px;margin:0 auto 20px;font-family:monospace}
#error-inner h1{text-transform:uppercase;color:#399edf}
#error-inner p{line-height:0.7em;font-size:15px;color:#999}

2. Paste kode berikut ini di bawah <body>

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

3. Paste lagi kode ini tepat di atas </body>

</b:if>
<b:if cond='data:blog.pageType == &quot;error_page&quot;'>
<div id='error-page'>
<div id='error-inner'>
<h2>Error</h2>
<div class='box-404'><div class='boxx-404'>404</div></div>
<h1>Halaman tidak ditemukan</h1>
<p>Kemungkinan halaman telah dihapus, atau anda salah menulis URL blog<br/><br/> Kembali ke beranda <a expr:href='data:blog.homepageUrl' expr:title='data:blog.title'><data:blog.title/></a></p></div></div></b:if>

4. Terakhir, ubah tag tittle menjadi seperti ini

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

5. Save.

Demo