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 Febriyanto 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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQUKRzuMueBmWv2HzfRBs29lGcQm2lbo-tB8zeXfUAj2xS8VcFp_Ryt-42Q010TrdLZPjhnUh2VXHHbIDXY1bGpEZGvnj_08oQIekGcrr-dUEm49JJl7PApWf8pDDupLIUh4se35vBdDs/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
dengan menaruh text 404.html di belakan link website kalian..
contoh : febriyantofr.blogspot.com/404.html
Terima kasih!
ReplyDeletesama-sama :)
DeleteWah gan... keyen gan ._. :)
Deletecendol mana cendol? :d
eh om syafuan :3 :o
Delete