Modifikasi page error 404 blogger - Page error 404 merupakan kejadian dimana warga net mengakses halaman dengan alamat yang tidak valid, pada zaman dahulu Page error 404 hanya menampilkan halaman kosong dengan tampilan error ala kadarnya. Seiring perkembangan dunia internet Page error 404 sudah dapat dimodifikasi sehingga menjadi tampilan yang lebih menarik


Contoh kasus terjadinya Page error 404, coba kamu akses alamat ini http://www.asis10.com/2017/04/fontawesomeerror.html, secara otomatis kamu akan mendapatkan tampilan seperti dibawah ini


Memahami logika page error 404

Saat kamu mencoba mengakses alamat webite yang salah, maka terjadilah Page Error 404, cara kerja kode yang akan digunakan untuk memodifikasi tampilan page error 404 sebagai berikut :

Menghilangkan seluruh elemen yang digunakan pada themplate, dari header blog sampai bagian footer blog, jika dalam proses ini berhenti maka kamu akan mendapati tampilan blank putih tanpa petunjuk apapun

Saat tampilan halaman blank maka dijalankanlah halaman khusus yang dibuat untuk modifikasi tampilan page error 404

Modifikasi page error 404 blogger

Langkah pertam silahkan log in ke akun blogger, pilih Thema, pilih Edit HTML

Cari kode ini <meta charset='utf-8'/>, copy kode dibawah ini dan letakkan tepat dibawah kode  <meta charset='utf-8'/> dan diatas kode ini <b:skin><![CDATA[/*

<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>

Cari kode dibawah ini (harap perhatikan baik baik)

</head>
<body expr:class='data:blog.pageType'>

Pastekan kode dibawah ini tepat dibawah kode diaatas

<b:if cond='data:blog.pageType == &quot;error_page&quot;'>
<style type='text/css'>
.error-container{background-image: url(https://3.bp.blogspot.com/-FyeIfyo-G9Y/Vtv9dIvwmxI/AAAAAAAAAU8/9_3fAhoPuOo/s1600/MinanDesign-Poto.jpg);}
.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}

.navipager,.content-wrapper, .goo-wrap, #menu .widget, body#layout .featured-sec .widget, .details, .figcaption, .figure, .footer, .header, .hgroup, .menu, .nav, .section {display:none!important;margin:0;padding:0;overflow:hidden;}

@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>

Bagi blogger pemula hal ini agak susah ya, coba perhatikan kode yang saya cetak tebal, kode kode tersebut merupakan id elemen yang ada pada blog ini, dan biasanya setiap themplate mempunyai elemen dengan id yang berbeda

Petunjuk untuk mengetahui elemen yang ada pada thempalte ada dipengaturan CSS bagian global, biasanya diawali dengan kode . (titik) atau # (Tagar)

Saya anggap semua sudah paham kode CSS, langkah terakhir adalah copy kode dibawah lalu letakan diatas 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='https://4.bp.blogspot.com/-maXgs2OC-pM/Vtv8y1OCLaI/AAAAAAAAAUw/d-vTbdMHYz8/s1600/minandesign.png'/>
            </div>
          <h1 class='error-title'><p><span>Asis10</span> Temukan asisten pribadi anda</p> </h1>
        </header>
        <div class='page-content'>
            <p>Halaman yang anda akses sudah tidak tersedia lagi atau sudah dihapus</p>
            <p>Cek alamat yang anda akses</p>
          <p><br/>Wasis Zain</p>
        </div>
</section>
</div>
</b:if>

Selesai simpan themplate
Demikianlah Modifikasi page error 404 blogger, semoga bermanfaat

No comments