Tạo trang báo lỗi 404 Not Found cho Blog

Lê An    10/11/2013    Thủ thuật blog    Comments   

Để báo lỗi hiển thị thì template của bạn phải có hàm <b:include data='top' name='status-message'/> và hàm này phải được gọi ra. Theo mình biết thì phần lớn template hiện nay được chỉnh sửa đã xóa bỏ hàm này. Trong bài viết này mình sẽ hướng dẫn các bạn tùy chỉnh để có thể hiển thị được dòng thông báo khi không tìm thấy bài viết trong kết quả tìm kiếm và lỗi trang không tìm thấy (404). Dòng thông báo sẽ không xuất hiện khi truy cập Nhãn, Bài đăng Cũ hơn...

Cài đặt

Đầu tiên bạn đăng nhập vào Blopspot -> Mẫu -> Chỉnh sửa HTML
Bạn tìm đến đoạn code sau: <b:includable id='main' var='top'> 
(Mách nhỏ: Dùng tổ hợp phím Ctrl+F dán đoạn code trên vào để tìm nhanh)
Bạn dán toàn bộ đoạn code phía dưới vào ngay sau thẻ vừa tìm:

<b:if cond='data:numPosts == 0'>
<data:navMessage/>
</b:if>

Sau đó bạn tìm đến đoạn code ]]</skin> và dán đoạn code phía dưới ngay trước thẻ ]]</skin>

#error-custom{padding:5px 10px;margin:0 0 5px;}
.error-custom{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj59VCbP2kcn18XCg2pTAUmze6gqSWPZPGbBpcAez4QgzYFABadtOQ8ThYkJKkueFJyffTl34UEnJCv3yX5-oE6ssz1P7jXU_Rik9rS2xPhrB17aESkSgoAkypnDKE-B9GCYmqFKuiqTXM/s500/Abstract+Floral+Vector+Illustration.png);background-repeat:no-repeat;background-position:right bottom;padding-bottom:220px;line-height:1.5em;}
.error-custom h2{font-size:155%;font-weight:600;border-bottom:1px solid #C0C0C0;padding:0 0 5px 50px;color:#141414;margin-bottom:15px;}
.error-custom h2{padding-left:0;} 

Bạn lưu lại.

Tạo trang 404

Để thiết kế cho trang 404 bạn vào Cài đặt → Tùy chọn tìm kiếm. Ở mục Lỗi và chuyển hướng chọn Chỉnh sửa và viết dòng thông báo bạn muốn hiển thị (hỗ trợ cả mã HTML) hoặc sử dụng đoạn mã dưới đây để hiển thị giống Hình demo.

<div class='error-custom'>
<h2>404 Not Found</h2>
<p class='error-body'>Chúng tôi xin lỗi nhưng chúng tôi không thể tìm thấy trang bạn đang tìm kiếm.<br/>
Điều này có thể xảy ra nếu bạn đã nhập vào trang web url không chính xác hoặc trang này không còn tồn tại nữa.</p>
<p>Bạn có thể thử tìm kiếm lại trang hoặc trở về Trang chủ.</p>
<form action='/search' id='searchform' method='get'>
<input id='s' name='q' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Search...&quot;;}' onfocus='if (this.value == &quot;Search...&quot;) {this.value = &quot;&quot;;}' type='text' value='Search...'/>
<input id='searchsubmit' type='submit' value='Go'/>
</form>
</div>

Lưu lại.

Sau khi hoàn thành các bước thì trang 404Not Found của bạn có dạng như hình:

Hình DEMO 404