Cara Membuat Halaman Error 404 di Blog
Halaman Error 404 adalah kode halaman error dimana pengunjung salah dalam pengetikan URL atau pengunjung telah mengunjungi URL yang telah di hapus pada sebuah Website atau situs. Berikut ini saya akan share cara membuat halaman 404, fitur ditawarkan pada halaman 404 ini Responsive, Smooth, Support CSS3, Simple dan Fast.
Untuk membuat halaman 404, anda bisa ikuti langkah-langkahnya dibawah ini, namun sebelum proses penerapan anda bisa melihanya screnshotnya dibawah ini :
Berikut ini caranya :
1. Login ke Blogger
2. Pilih Template >> klik Edit HTML
3. Selanjutnya cari kode ]]></b:skin>
4. Lalu Anda salin kode dibawah ini dan pastekan diatasnya :
5. Kemudia anda cari kode <body> kemudian letakkan kode dibawah ini diatasnya
6. Masih pada letak yang sama, letakkan juga kode berikut ini dibawah kode diatas
5. Simpan Template
Setelah script diatas ditambahkan pada Editor template , dan jika ingin mencobanya silahkan tuliskan http://URL Blog/404 ( ganti URL Blog dengan alamat blog Anda ).
Demikian Cara Membuat Halaman Error 404 di Blog, semoga bermanfaat!
Untuk membuat halaman 404, anda bisa ikuti langkah-langkahnya dibawah ini, namun sebelum proses penerapan anda bisa melihanya screnshotnya dibawah ini :
Berikut ini caranya :
Cara Membuat Halaman Error 404 di Blog
1. Login ke Blogger
2. Pilih Template >> klik Edit HTML
3. Selanjutnya cari kode ]]></b:skin>
4. Lalu Anda salin kode dibawah ini dan pastekan diatasnya :
/* error page */
#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-page #search-box {margin: 2% 41%}#error-inner {margin:11% auto;}
#error-inner .box-404 {width:200px;height:200px;background:#21afa4;color:#fff;font-size:80px;line-height:200px;border-radius:10px;margin:0 auto 50px;position:relative;}
#error-inner .box-404::after {content:" ";width:0;height:0;bottom:-8px;border-color:#21afa4 transparent transparent;
border-style:solid;border-width:9px 9px 0;position:absolute;left:47%;}
#error-inner h1 {text-transform:uppercase;}
#error-inner p {line-height:0.em;font-size:15px;}
#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-page #search-box {margin: 2% 41%}#error-inner {margin:11% auto;}
#error-inner .box-404 {width:200px;height:200px;background:#21afa4;color:#fff;font-size:80px;line-height:200px;border-radius:10px;margin:0 auto 50px;position:relative;}
#error-inner .box-404::after {content:" ";width:0;height:0;bottom:-8px;border-color:#21afa4 transparent transparent;
border-style:solid;border-width:9px 9px 0;position:absolute;left:47%;}
#error-inner h1 {text-transform:uppercase;}
#error-inner p {line-height:0.em;font-size:15px;}
5. Kemudia anda cari kode <body> kemudian letakkan kode dibawah ini diatasnya
<b:if cond='data:blog.pageType == "error_page"'>
6. Masih pada letak yang sama, letakkan juga kode berikut ini dibawah kode diatas
<div id='error-page'>
<div id='error-inner'>
<div class='box-404'>404</div>
<h1>Halaman tidak ditemukan</h1>
<p>Kemungkinan halaman telah dihapus, atau Anda salah menulis URL</p>
<p>Kembali ke <a expr:href='data:blog.homepageUrl'><data:blog.title/></a></p>
<div id='search-box'>
<form action='/search' id='cse-search-box' method='get'>
<input id='search-text' name='q' onblur='if(this.value=='')this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value=''' type='text' value='Cari di sini ...'/>
<button id='search-button' type='submit'/>
</form>
</div>
</div>
</div>
</b:if>
<div id='error-inner'>
<div class='box-404'>404</div>
<h1>Halaman tidak ditemukan</h1>
<p>Kemungkinan halaman telah dihapus, atau Anda salah menulis URL</p>
<p>Kembali ke <a expr:href='data:blog.homepageUrl'><data:blog.title/></a></p>
<div id='search-box'>
<form action='/search' id='cse-search-box' method='get'>
<input id='search-text' name='q' onblur='if(this.value=='')this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value=''' type='text' value='Cari di sini ...'/>
<button id='search-button' type='submit'/>
</form>
</div>
</div>
</div>
</b:if>
5. Simpan Template
Setelah script diatas ditambahkan pada Editor template , dan jika ingin mencobanya silahkan tuliskan http://URL Blog/404 ( ganti URL Blog dengan alamat blog Anda ).
Demikian Cara Membuat Halaman Error 404 di Blog, semoga bermanfaat!