Hướng dẫn tạo trang báo lỗi 404 đẹp cho blogspot

Code quảng cáo là hai hình này

Ở một bài trước, mình đã hướng dẫn các bạn chuyển hướng trang bị lỗi 404 về trang chủ rồi đúng không ạ?

Nhưng bạn lại không thích như vậy. Bạn muốn sẽ có một trang báo lỗi 404 đẹp cho blog của mình?
Hôm nay Việt Blogger xin hướng dẫn các bạn tạo một trang báo lỗi theo đúng như ý của bạn.

Bước 1:

Các bạn hãy copy và chèn đoạn css này vào trước thẻ </style> trong blog của bạn

/* Error 404 Rip By Tips24h.net*/
#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-404{margin:11% auto}
#error-404 .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-404 .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-404 h1{text-transform:uppercase}
#error-404 p{line-height:1.7em;font-size:15px;font-family:arial}

Bước 2:

Chính là bước quan trọng nhất. Bước hiển thị trang báo lỗi ra màn hình.

Ở bước này chúng ta có hai cách nhé.

Cách 1:

Chèn bộ code báo lỗi ngay trên blog của bạn.

Bạn hãy chèn đoạn code sau trước thẻ </body> trong blog của bạn:

<b:if cond='data:blog.pageType == &quot;error_page&quot;'>
<div id='error-page'>
<div id='error-404'>
<div class='box-404'>404</div>
<h1>Địa chỉ ỦL không tồn tại</h1>
<p>Có thể URL bị hỏng hoặc đã bị Admin blog gỡ bỏ</p>
<p>Trở về trang chủ <a expr:href='data:blog.homepageUrl'><data:blog.title/></a></p>
</div>
</div>
</b:if>

Cách 2:
Nhúng trang báo lỗi vào blog của bạn.
Với cách này, trước tiên chúng ta cần phải soạn thảo ra một trang báo lỗi riêng cho mình. Sau đó bạn up nó lên một host nào đó để có thể truy cập được vào tệp tin đó.
Sau khi là được những công việc đó rồi các bạn hãy dùng code này để chèn trang báo lỗi vào blog của bạn nhé. Cũng chèn trước thẻ </body> nhé

<b:if cond='data:blog.pageType == &quot;error_page&quot;'>
<div id='error-page'>
  <iframe height='100%' width='100%' src='link trang báo lỗi'/>
</div>
</b:if>

Xong rồi. Bây giờ lưu lại và ra xem kết quả nào:

DEMO: http://www.vietbg.com/trang-loi-404

Chúc các bạn có được một trang báo lỗi 404 như ý nhé!