Tạo Trang Báo Lỗi 404 Đẹp Và Đơn Giản

Monday, September 28, 2020

Tạo Trang Báo Lỗi 404 Đẹp Và Đơn Giản

Monday, September 28, 2020

Tạo Trang Báo Lỗi 404 Đẹp Và Đơn Giản

Trong bài viết này, mình sẽ hướng dẫn cách tạo trang lỗi 404 đẹp và đơn giản trên blogspot.

Bạn có thể xem demo bên dưới:

Demo

Cách tạo trang báo lỗi 404:

Bước 1: Vào Blogger ➤ Chủ đề ➤ Chỉnh sửa HTML.

Bước 2: Bạn hãy chèn mã HTML này vào nơi bạn muốn nó được hiển thị. Nhưng cũng không phải dán bừa đâu, hải ở trong thẻ điều kiện <b:if cond='data:view.isError'>

<div class="error__content">
<div class="error__text">
Quay xe đi bạn, hết đường rùi!
</div>
</div>

Bước 3: Các bạn chèn mã CSS này vào thẻ đóng </head> hoặc ]]></b:skin>

.error__content {
background-image: url(https://static.wikia.nocookie.net/qube-assets/f2/3962/images/404/404-page-theme-3.svg)
background-position: center 10px;
background-repeat: no-repeat;
background-size: 150%;
background-color: #ee1a41;
color: #0e191a;
min-height: 70vw;
position: relative;
text-align: center;
}
.error__text {
-webkit-box-sizing: border-box;
box-sizing: border-box;
font-size: 20px;
font-weight: 500;
margin: auto!important;
padding-top: 44vw;
width: 60vw;
}
@media only screen and (max-width: 1023px) and (min-width: 768px)
.error__text {
width: 732px;
}
@media only screen and (min-width: 768px)
.error__text {
margin: 0 auto;
}