Cara Membuat Halaman 404 Error Not Found Elegant di Blog

Cara Membuat Halaman 404 Error Not Found Elegant di Blog

Cara Membuat Halaman 404 Error Not Found di Blogger merupakan cara selanjutnya yang kita lakukan setelah kita menghapus postingan secara benar pada blog kita, dengan menerapkan desain 404 ini akan membuat blog kita lebih nyaman untuk pengunjung karena adanya pemberitahuan halaman yang diminta tidak ada dan itu membuat pertahanan pada visitor blog kita tetap agar tidak berkurang.

Desain yang akan saya bagikan ini sangat cocok untuk tampilan halaman pada blog anda karena memiliki background yang lembut di dilihat dengan link balik ke home page beserta tombol Search untuk mempermudah pengunjung mencari artikel lainya pada halaman kita. Jika anda tertarik, di bawah telah saya sediakan cara penerapanya pada blog anda.

DEMO GAMBAR  HALAMAN ERROR 404

Cara Membuat Halaman Error 404 Not Found
1. Masuk ke akun blogger anda
2. Pilih menu Template dan pilih Edit HTML
3. Masukkan kode meta tag berikut tepat dibawah kode <head>
<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>404: Page Not Found ~ <data:blog.title/></title>
    <b:else/>
        <title><data:blog.pageName/> ~ <data:blog.title/></title>
    </b:if>
</b:if>
4. Masukkan kode CSS berikut diatas kode ]]></b:skin> atau </style>
/*Desain Halaman 404 Error Not Found*/ 

#error-page { background-color:#E3AD2D; position:fixed !important; position:absolute; text-align:center; top:0; right:0; bottom:0; left:0; z-index:99999; } #error-inner { margin:5% auto; } 
#error-inner .box-404 {width: 390px;height: 237px;background:#BF5E00;color: #FFF;font: 200px/220px Oswald;border-radius: 10px;margin: 0px auto 50px;position: relative;text-shadow: 0px 0px 2px #686868, 0px 1px 1px #DDD, 0px 2px 1px #D6D6D6, 0px 3px 1px #CCC, 0px 4px 1px #C5C5C5, 0px 5px 1px #C1C1C1, 0px 6px 1px #BBB, 0px 7px 1px #777, 0px 8px 3px rgba(100, 100, 100, 0.4), 0px 9px 5px rgba(100, 100, 100, 0.1), 0px 10px 7px rgba(100, 100, 100, 0.15), 0px 11px 9px, 0px 12px 11px rgba(100, 100, 100, 0.25), 0px 13px 15px rgba(100, 100, 100, 0.3);} 
#error-inner .box-404::after { content:" "; width:0; height:0; bottom:-8px; border-color:#BF5E00 transparent transparent; border-style:solid; border-width:9px 9px 0; position:absolute; left:47%; } 
#error-inner h1 { text-transform:uppercase; } 
#search-box{position:relative;width:350px;margin:10px auto} 
#cse-search-box{height:30px;border-radius:2px;background-color:#fff;overflow:hidden;border:1px solid #bbb} 
#search-text{font-size:12px;color:#ddd;border-width:0;background:transparent} 
#search-box input[type="text"]{width:85%;padding:5px 20px 12px 0;color:#666;outline:none} 
#search1-button{position:absolute;top:0;right:0;height:32px;width:20px;margin-top:10px;font-size:14px;color:#fff;text-align:center;line-height:0;border-width:0;background:url(http://1.bp.blogspot.com/_C6KkooKXCEw/TIBqtV6pdmI/AAAAAAAAGyM/QUBsym_R9V0/s200/search-c.png) no-repeat;cursor:pointer} 
#error-inner p { line-height:1.7em; font-size:15px; }
5. Selanjutnya Masukkan kode berikut ini diatas kode </body>
<b:if cond='data:blog.pageType == &quot;error_page&quot;'>
        <div id='error-page'>
          <div id='error-inner'>
            <div class='box-404'>404</div>
           <h1>Halaman tidak ditemukan</h1>
            <p>Kemungkinan halaman telah dihapus, atau Anda salah menulis URL</p>
            <p>Kembali ke <a expr:href='data:blog.homepageUrl'><data:blog.title/></a></p>
            <div id='search-box'>
          <form action='/search' id='cse-search-box' method='get'>
            <input id='search-text' name='q' onblur='if(this.value==&apos;&apos;)this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value=&apos;&apos;' type='text' value='Cari di sini ...'/>
            <button id='search-button' type='submit'/>
          </form>
        </div>
          </div>
        </div>
    </b:if> 
6. Terakhir klik Simpan Template dan lihat hasilnya.

INFO : Jika ada yang ingin dipertanyakan atau anda kurang paham, silahkan tinggalkan komentar anda pada kotak komentar yang telah di sediakan. Semoga Bermanfaat !

Saya merupakan anak ke 8 dari 8 bersaudara, berwatak keras kepala dan sangat mencintai dunia blogging serta desain.
"Love My Mom"

Previous
Next Post »