Cara Membuat Error Page atau Halaman 404 di Blog
Cara Membuat Error Page atau Halaman 404 di Blog - Error page atau Halaman 404 adalah halaman Error yang biasa muncul pada setiap halaman blog ketika seorang visitor (pengunjung) mengunjungi url yang salah dalam pengetikan atau artikel yang terhapus.
Nah, pada kali ini saya ingin berbagi tutorial "Cara Membuat Halaman Error Responsive di Blogger" untuk di pasang di blog.
Untuk sobat yang penasaran seperti apa Error Page atau Halaman 404, bisa di lihat di demo bawah ini.
1. Login ke Blogger sobat, buka menu Template → Edit HTML lalu simpan kode di bawah ini, setelah kode <body>
<b:if cond='data:blog.pageType != "error_page"'>2. Copy kode di bawah ini tepat di atas kode </body>
<b:if cond='data:blog.pageType == "error_page"'>
<div id='oopss'>
<style>
/* CSS Custom Error Page */
#oopss {background-position:center;background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBjyp4aIUkyIrpsmcAS3RvctUF0HoaV2dYvqjnRK5DHmKnBwwfDsqXlu3w9EyM31Zb53mHHmC8tQQ_PHTn4DGdBqxZOhscITCzDwfZAFiQaIY9EIoGN45S5rP9ySRMPFMe5fbmE8auo5k/s1600/Anime-Wallpaper-Images-J5P%255B1%255D.png')no-repeat center top fixed;-webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover;text-align:center;margin-bottom:50px;font-weight:400;font-size:45px;font-family:'Roboto',Arial,sans-serif;position:fixed;width:100%;height:100%;line-height:1.5em;z-index:9999;}
#error-text {top:30%;position:relative;font-size:50px;color:#fff;text-shadow: 0 4px 0 #ddd,0 8px 8px #aaa;}
#error-text a{color:#888;}
#error-text p {margin:0!important;}
#error-text span {color:#e47253;font-size:100px;text-shadow:0 4px 0 #a64126,0 8px 8px #aaa;letter-spacing:20px;transition:all 0.3s ease-in-out;}
#error-text span:hover {letter-spacing:30px;}
#error-text a {color:#e47253;}
#error-text a:hover {color:#394347;letter-spacing:-10px;}
/* CSS Error Page Responsive */
@media only screen and (max-width:640px){
#error-text {color:#888;font-size:30px;text-shadow:none;}
#error-text span {font-size:60px;text-shadow:none;letter-spacing:0;}
#error-text span:hover {letter-spacing:5px;}
#error-text a:hover {color:#394347;letter-spacing:5px;}}
</style>
<div id='error-text'>
<span>404</span>
<p>PAGE NOT FOUND!</p>
<p>Back To Homepage <a href='/'><i CLASS='fa fa-arrow-circle-right'/></a></p>
</div>
</div>
</b:if>3. Lalu Simpan/Save Template Sobat.
Untuk mencoba-nya tinggal tuliskan http://designz-chan.blogspot.com/404 ( ganti http://designz-chan.blogspot.com dengan alamat blog sobat )
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBjyp4aIUkyIrpsmcAS3RvctUF0HoaV2dYvqjnRK5DHmKnBwwfDsqXlu3w9EyM31Zb53mHHmC8tQQ_PHTn4DGdBqxZOhscITCzDwfZAFiQaIY9EIoGN45S5rP9ySRMPFMe5fbmE8auo5k/s1600/Anime-Wallpaper-Images-J5P%255B1%255D.png
Link URL Background 404 di CSS bisa di ganti dengan background sobat.
Selesai! Semoga bermanfaat ^o^)
