Mendesain Halaman 404 Error Not Found - Mungkin kita pernah membagikan url postingan yang telah dibuat ke berbagai teman, sosial media, atau sebagainya. Tetapi jika url postingan tersebut telah kalian ubah atau sampai dihapus, akibatnya akan berpengaruh terhadap para pengunjung blog. Mereka yang membuka url salah (karena sudah diubah/dihapus) akan dialihkan ke halaman kosong. Hal tersebut membuat mereka merasa bingung, kesal, dan akhirnya meninggalkan blog kita. Dengan begitu juga, trafik/kunjungan ke blog kita lama-kelamaan akan menurun.
Oleh karena itu, kita perlu mendesain tampilan 404 Error Not Found pada blog untuk memberitahu kepada para pengunjung bahwa postingan yang akan dilihat telah dihapus atau telah diubah urlnya. Di halaman 404 Error Not Found juga ditampilkan tombol untuk pergi ke halaman utama dan kotak pencarian yang sangat berfungsi untuk memudahkan para pengunjung mencari apa yang diinginkannya. Kali ini Faisal Fachrureza Share akan memberikan caranya, langsung saja disimak.
Langkah-langkah membuat halaman Error 404 Not Found
- Masuk ke akun blogger
- Pilih menu Template lalu pilih Edit HTML
- Masukkan kode meta tag berikut tepat dibawah kode <head>
<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>
- Lalu 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:#21afa4;
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:#21afa4 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(http://1.bp.blogspot.com/_C6KkooKXCEw/TIBqtV6pdmI/AAAAAAAAGyM/QUBsym_R9V0/s200/search-c.png) no-repeat;cursor:pointer}
#error-inner p {
line-height:0.7em;
font-size:15px;
}
- Masukkan juga kode berikut 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 di sini ...'/>
<button id='search-button' type='submit'/>
</form>
</div>
</div>
</div>
</b:if>
- Terakhir klik Simpan Template
0 komentar:
Posting Komentar