Cara Membuat Halaman Error 404 di Blog
- Masuk ke akun blogger
- Pilih menu Template lalu pilih Edit HTML
- Masukkan kode meta tag berikut tepat diatas kode </body>
<b:if cond='data:blog.pageType == "error_page"'>
<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=='')this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value=''' type='text' value='Cari dan Enter '/>
<button id='search-button' type='submit'/>
</form>
</div>
</div>
</div>
</b:if>
- 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:" ";
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="text"]{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;
}
- 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 == "index"'>
<title><data:blog.pageTitle/></title>
<b:else/>
<b:if cond='data:blog.pageType == "error_page"'>
<title>404: Page Not Found ~ <data:blog.title/></title>
<b:else/>
<title><data:blog.pageName/> ~ <data:blog.title/></title>
</b:if>
</b:if>
- 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