Cara Membuat Custom Error Page Di Blog
Halo sobat - Ketemu lagi nih,kali ini gua akan bagiin Tutorial Cara Membuat Custom Error Page Di Blog.Cocok banget nih bagi kalian yang mau ngerubah custom error page di blog.Penasaran?Langsung aja yok!

Tutorial Membuat Custom Error Page

1. Beranda Blog > Template > Edit HTML
2. Pasang kode dibawah diatas kode </head>

<b:if cond='data:blog.pageType == &quot;error_page&quot;'>
<style type='text/css'>
.ct-wrapper, .header-wrapper, #header, #post-wrapper, #outer-wrapper, #footer-wrapper, #sidebar-wrapper, #credit, #social_networks {display:none;}
.error-container{background-image: url(http://1.bp.blogspot.com/-zHS2luoiNTM/VTZJiQmK7RI/AAAAAAAAJxw/D1Kiy-euLXM/s1600/blog-bg.jpg);background-size:cover;}
.error-header{margin-top:-100px}
.error-title{line-height:42px}
.error-title span{background:#d44929;padding:2px 10px;}
.error-image img{display:block;font-size:72px;font-weight:700;height:150px;margin:10px auto 40px}
.error-container{background-color:#101524;display:table;height:100vh;overflow-x:hidden;width:100%}
.error404 .anonymous{margin:0 auto 20px;display:block}
.error-404{background:rgba(0,0,0,.7);display:table-cell;vertical-align:middle}
.error-404 .page-content p{color:#c8c8c8}
.error-title{color:#fff;font-family:&#39;Open Sans&#39;,sans-serif;font-size:42px;font-weight:700;text-transform:uppercase;margin:.67em 0;text-align:center;line-height:normal;}
.search-title{font-size:48px;color:#3f3f46}
.page-content,.page-content p{color:#797979;font-size:18px;text-align:center}
a.btn.back-to-home{background:#4fafe9;color:#fff;font-weight:400;left:40px;line-height:24px;padding:10px 30px;position:absolute;text-transform:capitalize;top:40px;z-index:99;border-radius:4px}
a.back-to-home:hover{background:#459dd3;color:#fff;}
a.back-to-home i{font-size:14px;margin-right:3px}
@media only screen and (max-width:479px){
.back-button-container{max-width:80%;width:80%}.page-content .back-to-home{width:100%;margin:10px auto}.error-header{margin-top:30px}.error-title{font-size:24px;line-height:32px}.page-content,.page-content p{font-size:14px}.error-404{padding-bottom:60px}.page-footer{padding:20px 10px}}
</style>
</b:if>
Sobat bisa custom sendiri tampilannya sesuai selera

3. Kemudian pasang juga kode dibawah,tepat dibawah <body>

<b:if cond='data:blog.pageType == &quot;error_page&quot;'>
<div class='error-container'>
<a class='btn back-to-home' expr:href='data:blog.homepageUrl'><i class='fa fa-home fa-fw'/>Kembali Ke Beranda</a>
<section class='error-404 not-found text-center'>
<header class='error-header'>
<div class='error-image'>
<img alt='404' src='http://1.bp.blogspot.com/-Gb2gYMW4VC0/VTZJg0pSIrI/AAAAAAAAJxo/CXhWMecSCNI/s1600/anonymous.png'/>
</div>
<h1 class='error-title'><p><span>Maaf!</span> Halaman Tidak Ditemukan.</p> </h1>
</header>
<div class='page-content'>
<p>Mungkin Telah Dihapus Atau Tidak Terserdia.</p>
</div>
</section>
</div>
</b:if>
4. Simpan Template,Selesai

Silahkan dicoba gan,Sekian- Silahkan bertanya jika ada kesulitan

Posting Komentar

 
Top