Senin, 13 Februari 2017

Cara Membuat Custom Error Page 404 Not Found

Halo sobat Vetizens, setelah kemarin saya membagikan Tutorial tentang Cara Membuat Tombol Surprise Me / Random Post di Blog. Maka kali ini saya akan berbagi tutorial tentang Cara Membuat Custom Error Page 404 Not Found. Bagaimana cara kerjanya ? cara kerjanya jika kalian atau pengunjung mengetikkan url yang salah maka akan muncul halaman error tersebut, baiklah yuk langsung saja kita bahas

1. Login Blogger kalian

2. Blogger Kalian > Template > Edit HTML

3. Copykan scirpt ini lalu pastekan setelah kode <body>
<b:if cond='data:blog.pageType != &quot;error_page&quot;'>

4. 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/AVvXsEh_rCCLwHWj74JqTr5x5_IjdK_Qoe68uAh9AIYzYBdeo431KQYP9L0_vaKuJTP-n4_xBQ6u2OeIJ8jTb8daSsF7jBCajK80C2r43yDMsKFvG-keesCRh3uHnAHCXL0cpjaz1LuCxAyNku4/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>
Note : 
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_rCCLwHWj74JqTr5x5_IjdK_Qoe68uAh9AIYzYBdeo431KQYP9L0_vaKuJTP-n4_xBQ6u2OeIJ8jTb8daSsF7jBCajK80C2r43yDMsKFvG-keesCRh3uHnAHCXL0cpjaz1LuCxAyNku4/s1600/Anime-Wallpaper-Images-J5P%255B1%255D.png bisa kalian ganti sesuai keinginan kalian.

<span>404</span>
<p>PAGE NOT FOUND!</p>
<p>Back To Homepage <a href='/'><i CLASS='fa fa-arrow-circle-right'/></a></p>
Kalian juga bisa menggantinya sesuka kalian.

5. Save Template kalian.
Kalian bisa mengeceknya dengan memberi kata salah pada terakhirnya contoh www.vetizens.id/404.

Sekian untuk tutorial kali ini semoga bermanfaat dan bisa membantu kalian semua
Jika Masih Bingung Silahkan Berkomentar . . .
Kunjungi Vetizens terus untuk informasi terupdate . . . .

Load disqus comments

0 komentar