Giao Diện Trang Báo Lỗi 404 Đẹp Và Đơn Giản


Hôm trước mình có chia sẻ tới anh em một giao diện trang thông báo lỗi 404 thì hôm nay mình sẽ chia sẻ thêm một mẫu nữa nè.

Bạn có thể xem lại bài đó tại đây: 

Tạo Trang Báo Lỗi 404 Đẹp Và Đơn Giản và đây : Tạo Trang Báo Lỗi 404 Cực Đẹp

Và giờ chúng ta bắt đầu nhé.


Một chút demo

Trước hết cần vào phần Chủ Đề -> Chỉnh Sửa HTML và thêm đoạn này vào chỗ cần hiển thị



<b:if cond='data:view.isError'>
<section class="error-container">
<div class="error-content">
<h3><span>404</span>Uh oh! That's an error.</h3>
<p>The page you've requested can't be found. Why don't you browse around?</p>
<a class="button" href="https://quangsangit.com/">Back to home</a>
</div>
</section>
</b:if>

Tiếp đó thêm CSS bạn có thẻ chèn nó vào ]]></b:skin> hoặc tạo cặp thẻ <style></style> và chèn nó vào



.error-container{margin:auto;width:90%;max-width:500px}
.error-container h3{font-size:1.414rem}
.error-container h3 span{display:block;font-size:140px;line-height:.8;margin-bottom:-2.4rem;color:#ebebf0} .dark-mode .error-container h3 span{color:rgba(0,0,0,.2)}
.error-container p{margin:15px 5% 30px;font-size:16px;line-height:1.4em}
.error-container .button{margin:0;padding:1em 2em;font-size:1em;font-weight:700;font-family:Poppins, sans-serif;line-height:1.2em}

Vậy là xong rồi nè. Lưu lại và hưởng thụ thành quả nhé