24/01/2019

Cara Membuat Halaman Error 404 di Blog

Cara Membuat Halaman Error 404 di Blog - Salah satu syarat dari navigasi blog yang baik adalah untuk memberikan tujuan dan pilihan yang jelas bagi pengunjung di halaman Anda. Demikian juga, halaman kesalahan 404. Kesalahan halaman 404 adalah halaman yang akan digunakan untuk menempatkan halaman yang tidak ada di blog Anda, baik karena halaman tersebut telah dihapus, tautannya terputus, atau alamat saluran telah salah mengubah url. Untuk blog yang menggunakan blogspot sendiri biasanya menyediakan 404 halaman kesalahan, tetapi 404 halaman kesalahan diberikan kekerasan yang bisa kita ubah sendiri.

Cara Membuat Halaman Error 404 di Blog
  1. Masuk ke akun blogger
  2. Pilih menu Template lalu pilih Edit HTML
  3. Masukkan kode meta tag berikut tepat 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 dan Enter '/>
            <button id='search-button' type='submit'/>
          </form>
        </div>
          </div>
        </div>
    </b:if>
  1. Masukkan kode CSS berikut diatas kode ]]></b:skin> atau </style>

/*Desain Halaman 404 Error Not Found*/
#error-page {
background-color:#e9e9e9;
position:fixed !important;
position:absolute;
text-align:center;
top:0;
right:0;
bottom:0;
left:0;
z-index:99999;
}
#error-inner {
margin:11% auto;
}
#error-inner .box-404 {
width:200px;
height:200px;
background:#EF5747;
color:#fff;
font-size:80px;
line-height:200px;
border-radius:10px;
margin:0 auto 50px;
position:relative;
}
#error-inner .box-404::after {
content:&quot; &quot;;
width:0;
height:0;
bottom:-8px;
border-color:#EF5747 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=&quot;text&quot;]{width:85%;padding:5px 20px 12px 0;color:#666;outline:none}
#search-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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjImnjEpJdgA9j9j0NLUznfwJYALztaUeZkp81X6hrmAJHc3NPfRqUF82OzZlRA5m5cWZbuGNMMTGs_DAfs3Qk6M2LyU-hYzQ89mKHBUTqTufGxRnq3_JbcGSBulLvzSbqwdJ84yknHOjA/s200/search-c.png) no-repeat;cursor:pointer}
#error-inner p {
line-height:1.3em;
font-size:15px;
}
  1. Masukkan meta tag berikut jika belum memilikinya tepat dibawah kode <head> tetapi jika sudah lewatkan saja poin berikut ini.

<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> 
  1. Klik Simpan Template

Demikian informasi tentang Cara Membuat Halaman Error 404 di Blog. Maaf jika ada kekurangan, silahkan tambahkan beberapa kekurangan pada artikel di kolom komentar. Saya harap informasi ini bermanfaat.

No comments:

Post a Comment