Selasa, 12 Juli 2016

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.

Kepoin 404!
Langsung ke Tutorial seperti biasa :

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 != &quot;error_page&quot;'>

2. Copy kode di bawah ini tepat di atas kode </body>

<b:if cond='data:blog.pageType == &quot;error_page&quot;'>
<div id='oopss'>
<style>
/* CSS Custom Error Page */
#oopss {background-position:center;background: url(&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEis2LT2tpB52zuUH1ZCuHg9HvmzPYfFBgAj3IPKIVZ75JV5pNkwMXLhyphenhyphenS4yYZH9RjNfMy9-3FwURPM9tSfWpi6nf4mZMzT1zChgtBAe_aoAWdVdS4C2gWiKeWAaXahVua1w1tZrQv9NRHA/s1600/Anime-Wallpaper-Images-J5P%255B1%255D.png&#39;)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:&#39;Roboto&#39;,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/AVvXsEis2LT2tpB52zuUH1ZCuHg9HvmzPYfFBgAj3IPKIVZ75JV5pNkwMXLhyphenhyphenS4yYZH9RjNfMy9-3FwURPM9tSfWpi6nf4mZMzT1zChgtBAe_aoAWdVdS4C2gWiKeWAaXahVua1w1tZrQv9NRHA/s1600/Anime-Wallpaper-Images-J5P%255B1%255D.png

Link URL Background 404 di CSS bisa di ganti dengan background sobat.

Selesai! Semoga bermanfaat ^o^)

 
Info Blog!!
Terima Kasih Atas Kunjungan diblog Baru Saya, karena Blog "Tenyom Erectus" Sedang Bermasalah, Kini Saya Mengambil Tindakan Yaitu Pindah Keblog "ARBlogzs", Terima Kasih Atas Partisipasinya
close