Hướng dẫn Thay trang lỗi 404 bằng hộp tìm kiếm đẹp cho Blogspot

Với Những trang lỗi 404, nếu không chỉnh sửa gì thì nó trông rất sơ sài và nhàm chán.Vì thế, với mục đích làm đẹp cho những trang lỗi 404, blog's linkerpt sẽ hướng dẫn các bạn thay đổi các trang lỗi 404 bằng 1 hộp tìm kiếm đẹp cho Blogspot của bạn.

Trang lỗi 404 là gì?

Trang không tìm thấy (PAGE NOT FOUND) xuất hiện khi có trang web mình truy cập tới bị lỗi hoặc đã bị xóa bởi admin. Nói chung, 404 error page (usually a 404 HTTP status code) được trả lại khi truy cập một URL (địa chỉ) không tồn tại – do đã xóa hoặc được chỉnh sửa URL đó nhưng lại không chuyển hướng (301 redirect) URL cũ tới eURL mới hay có thể do sai lỗi chính tả trong liên kết đó...

Lợi ích của trang 404 là gi?

Như linkerpt đã nói ở trên, trang 404 thông báo cho người dùng biết được rằng đường dẫn này đã không tồn tại hay không còn tồn tại nữa. Ngoài ra trang 404 giúp thông báo với các bots tìm kiếm trang không tồn tại và điều hướng bots trên web, việc không có trang 404 sẽ làm cho website bị đánh giá thấp vì quá nhiều đường dẫn không tồn tại và báo lỗi như vậy.

-Hướng dẫn thay trang lỗi 404 bằng hộp tìm kiếm đẹp cho Blogspot:

Vì trang lỗi 404 mặc định của nó sẽ chẳng có gì, nhìn sẽ khá mất cảm tình. Vì thế, với thủ thuật blogspot khá hay này, linkerpt muốn đưa 1 hộp tìm kiếm vào trang này, nhằm giúp người dùng tìm kiếm nội dung mình cần nếu gặp phải trang lỗi 404.

Trang lỗi 404

- Truy cập vào trang quản trị Blogger.com

- Vào Cài đặt (Settings) -> Tùy chọn tìm kiếm (Search preferences):

- Tại mục Lỗi và chuyển hướng (Error and redirections) -> Không tìm thấy trang tùy chỉnh (Custom page not found), thêm vào đoạn code sau:

<style>
#search-button-links1 {
    position: relative;
    top: 0;
    right: 0;
    height: 60px;
    width: 580px;
    font-size: 18px;
    color: #000;
    text-align: center;
    text-decoration:none;
    line-height: 42px;
    border-width: 0;
    background-color: #5caddf;
margin:5px;
    cursor: pointer;
}
#search-box1 {
    position: relative;
    width: 100%;
    margin: 0;
}
#search-form1 {
    height: 40px;
    border: 1px solid #999;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    background-color: #fff;
    overflow: hidden;
}
#search-text1 {
    font-size: 14px;
    color: #ddd;
    border-width: 0;
    background: transparent;
}
#search-box input[type="text"] {
    width: 90%;
    padding: 11px 0 12px 1em;
    color: #333;
    outline: none;
}
#search-button1 {
    position: absolute;
    top: 0;
    right: 0;
    height: 42px;
    width: 80px;
    font-size: 14px;
    color: #fff;
    text-align: center;
    line-height: 42px;
    border-width: 0;
    background-color: #4d90fe;
    -webkit-border-radius: 0px 5px 5px 0px;
    -moz-border-radius: 0px 5px 5px 0px;
    border-radius: 0px 5px 5px 0px;
    cursor: pointer;
}
</style>
<div id='search-box1'>
  <form action='/search' id='search-form1' method='get' target='_top'>
    <input id='search-tex1t' name='q' placeholder='Tìm kiếm trên linkerpt.blogspot.com' type='text'/>
    <button id='search-button1' type='submit'><span>Tìm kiếm</span></button>
  </form>
</div>
<p style="color:#e33633; font-family:verdana, sans serif; font-size:16px; padding:24px; text-decoration:none">Trang này đã được xóa hoặc chưa từng tồn tại - Vui lòng truy cập <a href="http://www.linkerpt.blogspot.com">Blog's Linkerpt</a>

Xong rồi ,nếu muốn Bạn có thể thay các đoạn chữ và link màu xanh tùy theo ý của bạn, hoặc để nguyên đó cũng chẳng sao.@@

Sau khi chỉnh sửa xong thì bạn lưu lại. Và hãy kiếm 1 đường dẫn lỗi của bạn để xem kết quả nhé. 

Chúc bạn thành công .:))