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

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

Demo

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 ạ