Trang báo lỗi 404 not found 2 với khung tìm kiếm cho Blogspot

Trong blog của bạn đôi khi do một bài blog bị xóa hay một trang bị xóa hoặc cũng co thể do vị khách của chúng ta viết nhầm. Khi trang báo lỗi mặc định của Blogger hiện ra thì nó thường đơn điệu vì vậy chúng ta cần cải tiến nó để cho trang báo lỗi của chúng ta thêm sinh động. Hôm nay, mình giới thiệu với các bạn một mẫu có khung seach. Hãy nhớ: bài viết chỉ có tính chất gợi mở và bạn hoàn toàn có thể dựa vào vốn kiến thức của mình để tạo nên một trang báo lỗi của riêng mình.

XEM DEMO

#Cách thực hiện

1. Đăng nhập Blogger
2. > Cài đặt > Tùy chọn tìm kiếm > "Không tìm thấy trang tùy chỉnh" > Chỉnh sửa

3. > Dán code dưới vào và save lại.

<h2>404 not found !!!</h2>
<b>-Liên kết bạn vừa truy cập không hề tồn tại trong blog này.</b><br/>
<b>-Snap! Looks like you've messed up and got nothing.</b>
<b>-Hãy <a href="/" rel="nofollow">quay về trang chủ</a> hoặc sử dụng khung tìm kiếm ở bên dưới.</b><br/>
<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='Search Khanh Blog' type='text'/>
    <button id='search-button1' type='submit'><span>Search</span></button>
  </form>
</div>

Lưu ý:

• Thay những đoạn màu vàng sao cho phù hợp với blog của bạn
• Kiểm tra bằng cách nhập một liên kết không tồn tại trên blog của bạn. (vd: khanh98.blogspot.com/blabla)