Thiết kế trang báo lỗi 404 cho Blogger

Hôm nay Blogger cập nhật thêm rất nhiều tính năng về SEO vô cùng mạnh mẽ. Đầu tiên là Meta Description tag (trước đây muốn thêm nó chúng ta phải khai báo trong template), câu lệnh tương ứng là data:blog.metaDescription. Điều mình đánh giá cao nhất là có thể đặt Meta Description tag tương ứng trong từng bài viết, tính năng này mới giới thiệu chứ chưa thấy xuất hiện trong phần cài đặt bài viết. Tính năng thứ 2 là dễ dàng thêm rel="nofollow",target="_blank" cho thẻ liên kết. Tính năng thứ 3 là dễ dàng thêm alt, title cho ảnh. Và cuối cùng, tính năng được mong đợi từ lâu: Tạo trang báo lỗi 404.

Để 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...

Xem trước 

Thêm đoạn mã dưới đây vào sau thẻ <b:includable id='main' var='top'> trong template của bạn.
<b:if cond='data:numPosts == 0'> <data:navMessage/>
</b:if>
Về cơ bản đến đây là xong. Dòng thông báo chỉ xuất hiện khi số lượng bài viết trên blog bạn ở trang hiện tại là 0. Tức là khi tìm kiếm không thấy kết quả hoặc khi trang truy cập không tồn tại (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 blog demo.

<div class="" style="clear: both; text-align: center;">&nbsp;<img alt="404 page of brandstack" border="0" height="250" src="http://www.404notfound.fr/assets/images/pages/img/brandstackdotcom.jpg" width="400" /></div><h2>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Không tìm thấy trang web</h2><div><br /></div><div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Chúng tôi thành thật xin lỗi về sự bất tiện này, nguyên nhân có thể là:</div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; - Trang này không tồn tại.<br />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; - Trang này đã bị xóa/thay đổi.<br /><span style="text-align: center;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Xin vui lòng quay lại </span><a href="http://blogduykhanh.blogspot.com/" style="text-align: center;">Trang chủ</a><span style="text-align: center;"> Blog Duy Khánh h</span><span style="text-align: right;">oặc bạn có thể </span><a href="http://blogduykhanh.blogspot.com/2012/12/tim-kiem.html" style="text-align: right;">tìm kiếm</a><span style="text-align: right;"> các bài viết liên quan.</span>

Thiết kế trên đây chỉ mang tính gợi mở, hãy thể hiện sự sáng tạo của bạn trong việc thiết kế trang báo lỗi 404!