Cara Membuat Page Error 404 DiBlog Ala MinanDesign - Sore kali ini akan saya bagi sebuah tutorial bagaimana cara membuat page error didalam blog sobat. Page error digunakan untuk memberitahukan kalau didalam blog tidak terdapat apa yang dicari, nantinya akan ditunjukkan seperti gambar diatas.
Bagi sobat yang ingin memasang page error ini silahkan ikuti langkah dibawah ini.
Langkah Membuat Page Error 404 DiBlog Ala MinanDesign
1. Buka Blogger sobat > Klik Template > Klik Edit HTML
2. Masukkan kode dibawah ini tepat dibawah kode <meta charset='utf-8'/>
<b:if cond='data:blog.pageType == "index"'>
<title><data:blog.pageTitle/></title>
<b:else/>
<b:if cond='data:blog.pageType != "error_page"'>
<title><data:blog.pageName/> - <data:blog.title/></title>
</b:if></b:if>
<b:if cond='data:blog.pageType == "error_page"'>
<title>Page Not Found - <data:blog.title/></title>
</b:if>Kalau sudah ada ditemplate sobat, langsung aja ke langkah ke 3
3. Masukkan kode CSS dibawah ini tepat diatas kode </head>
<b:if cond='data:blog.pageType == "error_page"'>
<style type='text/css'>
.error-container{background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHgcdE-z043nT4oc9CMDeS7w1zin6jIQzeubjzJamTYvgzx27WPbuPpU5J9oO-nYQM-MMlIkJ1Z1bu84sv5bj_0L6c4v0rgfsUZg6MLL1-cuOs6dOwOh9Z9XZdIcjAhngx7zRKIHUn3M43/s1600/MinanDesign-Poto.jpg);}
div#inseopage,div.minan-menutop-wrapper,.container,#minan-footer, #downindz, #minanHeader, div.back-to-top,.top-menu,span.bg-opacity-inner,.bg-opacity p{display:none!important;margin:0;padding:0;overflow:hidden;}
#copyright {background-color:rgba(0,0,0,0.3);margin:auto;margin-top:-70px;}
.error-header{margin-top:-100px}
.error-title{line-height:42px}
.error-title span{background:#ed522e;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:'Patua One',sans-serif;font-size:42px;font-weight:400;text-transform:uppercase;margin:.67em 0;text-align:center}
.search-title{font-size:48px;color:#3f3f46}
.page-content,.page-content p{color:#797979;font-size:18px;text-align:center}
.btn.back-to-home{background:none;border-radius:0;color:#fff;font-weight:400;left:40px;line-height:24px;opacity:.8;padding:10px 30px;position:absolute;text-transform:capitalize;top:40px;z-index:99}
.back-to-home:hover{color:#c9a96e;}
.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>Ganti kode yang warna ORANGE dengan kode template yang sibat pakai.
4. Langkah selanjutnya memasang Page ERROR nya, caranya masukkan kode dibawah ini tepat dibawah kode <body>
<b:if cond='data:blog.pageType == "error_page"'>
<div class='error-container'>
<a class='btn back-to-home' expr:href='data:blog.homepageUrl'><i class='fa fa-home fa-fw'/>Back to Home</a>
<section class='error-404 not-found text-center'>
<header class='error-header'>
<div class='error-image'>
<img alt='404' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoMT7O8H4RXZCQQ6B0uzcjsF1t0Ip_NCNF8uCJm71oRMylJXODKH4k-RCOsrKpNGccxEoNiQn4LGYKdcNN-GKkPASKx3yweT0cI2ZuQuLtzX2c_QfMWV0KWpYwEAPecGywd_coay1SPq_S/s1600/minandesign.png'/>
</div>
<h1 class='error-title'><p><span>Oops!</span> That page can’t be found.</p> </h1>
</header>
<div class='page-content'>
<p>It looks like nothing was found at this location.</p>
</div>
</section>
</div>
</b:if>5. Save dan lihat hasilnya.
Sekian untuk Cara Membuat Page Error 404 DiBlog Ala MinanDesign. Terimakasih
0 comments: