Cara Membuat Halaman Error 404 di Blog Versi TB Blogging

TB Blogging - Sobat blogger mungkin pernah melihat penampilan halaman error ketika mencari artikel atau sejenisnya di suatu laman blog tetapi tidak dapat ditemukan alias error, nah ketika saya browsing ada sebuah blog yang membagikan tutorial semacam ini, dan sengaja saya reshare kembali, apa itu halaman error 404 silahkan lanjutakan membaca sampai selesai...

404 Adalah Kode Halaman Error yang biasa muncul pada setiap halaman web/blog ketika seorang visitor (pengunjung) mengunjungi url yang terhapus / salah dalam pengetikan. Nah, kali ini saya ingin berbagi tutorial "Bagaimana Cara Membuat Halaman Error 404 di Blog Versi TB Blogging" untuk di pasang pada blog sobat.

Untuk sobat yang penasaran bagaimana tampilan halaman 404 yang saya maksud, silahkan lihat Demo .

Keunggulan

Responsive
Smooth
Support CSS3
Simple & Fast

Cara Pemasangan

Langkah 1 - Login Blogger, buka menu Template → Edit HTML lalu simpan kode di bawah ini tepat sebelum kode </head> :

<b:if cond='data:blog.pageType == &quot;error_page&quot;'>
<style type='text/css'>
.header-wrapper, #header, #post-wrapper, #sidebar-wrapper {display:none;}
body {overflow:hidden;}

/* CSS Custom Error Page */
#oopss {background:rgba(255,255,255,0.98);text-align:center;margin-bottom:50px;font-weight:400;font-size:45px;font-family:&#39;Open Sans&#39;,sans-serif;position:fixed;width:100%;height:100%;line-height:1.5em;z-index:9999;}
#error-text {top:30%;position:relative;font-size:40px;color:#999;}
#error-text a{color:#999;}
#error-text p {margin:0!important;}
#error-text span {color:#FF8830;font-size:100px;font-weight:700;}
#error-text a.back {background:#999;color:#fff;padding:10px 20px;font-size:20px;font-weight:700;border:1px solid #fafafa;line-height:normal;text-transform:uppercase;border-radius:3px;-webkit-transform:scale(1);-moz-transform:scale(1);transform:scale(1);transition:all 0.5s ease-out;}
#error-text a.back:hover {background:#fff;color:#e9634f;border:1px solid #FF8830;}
#error-text a.back:active {-webkit-transform:scale(0.9);-moz-transform:scale(0.9);transform:scale(0.9);background:#e9634f;color:#fff;border:1px solid #FF8830;}

/* CSS Error Page Responsive */
@media only screen and (max-width:640px){
#error-text {color:#999;font-size:20px;}
#error-text span {font-size:60px;}
#error-text a.back {padding:5px 10px;font-size:15px;}
#error-text a.back:hover,#error-text a.back:active {border:0;}}
</style>
</b:if>

Langkah 2 - Simpan kode di bawah ini tepat di dibawah kode <body> :

<b:if cond='data:blog.pageType == &quot;error_page&quot;'>
<div id='oopss'>
<div id='error-text'>
  <span>404</span>
  <p>Page Not Found</p>
  <p><a class='back' href='/'>Homepage</a></p>
  </div>
  </div>
  </b:if>

Langkah 3 - Simpan Template

Untuk mencoba-nya tinggal tuliskan http://nama-blog-anda.blogspot.com/not-found ( ganti nama-blog-anda dengan alamat blog sobat )

Semoga artikel tentang Cara Membuat Halaman Error 404 di Blog Versi TB Blogging yang saya buat ini bermanfaat bagi semua blogger yang membutuhkan!

Cara Membuat Halaman Error 404 di Blog Versi TB Blogging

Keunggulan

Cara Pemasangan

1 comments: