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


Các bạn có thể xem demo ở dưới đây:


Cách làm:


Các bạn chèn mã HTML này vào chỗ các bạn muốn nó hiện thị. ' Bắt buộc phải ở trong thẻ điều kiện <b:if cond='data:view.isError'> nha'


<div class="error__content" style="background-image:url(https://static.wikia.nocookie.net/qube-assets/f2/3962/images/404/404-page-theme-3.svg?v=4c575dc08cf493f936444e9f8c1d69ef2288d23c)">
<div class="error__text">
You can't always catch 'em all.
</div>
<div class="error__button">
<a href='/'>Back home</a>
</div>
</div>

Sau đó các bạn chèn mã CSS này lên trên thẻ đóng </head> hoặc ]]></b:skin>

.error__content {
background-color: #ee1a41;
}
.error__content {
background-position: center 10px;
background-repeat: no-repeat;
background-size: 74%;
color: #0e191a;
min-height: 24vw;
position: relative;
text-align: center;
border-radius: 10px;
}
.error__text {
-webkit-box-sizing: border-box;
box-sizing: border-box;
font-size: 20px;
font-weight: 500;
margin: auto!important;
padding-top: 14vw;
width: 55vw;
}
.error__button {
display: inline-block;
margin:10px 0 10%;
padding: 15px 20px;
border-radius: 8px;
font-size: 13px;
line-height: normal;
border: 3px solid #3b0610;
background: #fff;
}
.error__button a {
color: #0e191a;
}
@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;
}
@media only screen and (min-width: 640px) {
.error__text {
padding-top: 27vw;
}
Sau đó nhấn vào lưu lại là xong. Đơn giản đúng chưa ạ