Cara Membuat Custom 404 Error Page di Blogger

404
Muhfar24- Kali ini kita akan membahas tentang "Cara Membuat Custom 404 Error Page di Blogger".
Halaman Error 404 adalah halaman yang akan muncul ketika ada halaman yang tidak bisa di temukan.
Hal ini dilakukan untuk memodifikasi halaman error 404 agar lebih menarik.
Untuk Demonya/Previewnya lihat gambar dibawah ini :
demo 404

Kalau tertarik silahkan ikuti langkah-langkah berikut ini

Cara Membuat Custom 404 Error Page di Blogger

1. Pergi ke Blogger > Blog Kamu
2. Template > Edit HTML
3. Cari kode <meta charset='utf-8'/>
4. Salin kode di bawah ini dan Pastekan di bawah kode <meta charset='utf-8'/>
 <b:if cond='data:blog.pageType == &quot;index&quot;'>
<title><data:blog.pageTitle/></title>
<b:else/>
<b:if cond='data:blog.pageType != &quot;error_page&quot;'>
<title><data:blog.pageName/> - <data:blog.title/></title>
</b:if></b:if>
<b:if cond='data:blog.pageType == &quot;error_page&quot;'>
<title>Page Not Found - <data:blog.title/></title>
</b:if>
5. Cari kode </head>
6. Salin kode di bawah ini dan Pastekan di atas kode </head>
<b:if cond='data:blog.pageType == &quot;error_page&quot;'>
<style type='text/css'>
.error-container{background-image: url(http://1.bp.blogspot.com/-zHS2luoiNTM/VTZJiQmK7RI/AAAAAAAAJxw/D1Kiy-euLXM/s1600/blog-bg.jpg);}
div#undefined-sticky-wrapper,div#blog_header,.container,#footer-wrapper,.backtotop,.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:&#39;Patua One&#39;,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>
7. Cari kode <body>
8. Salin kode di bawah ini dan Pastekan di bawah kode <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'/>Back to Home</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>Oops!</span> That page can&#8217;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>
9. Simpan Template anda

Selamat anda telah berhasil membuat Custom 404 Error Page .


Share this

Related Posts

Previous
Next Post »

1 komentar:

komentar
18 Agustus 2015 00.09 delete

wah keren nih thanks gan untuk custom nya,. ijin praktek :D
jangan lupa main ke blog ane yah

Reply
avatar

Silahkan Tinggalkan Komentar . .