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 ạ

You may like these posts

5 Comments

  1. Đức Hiền Technical
    Bài viết hay lắm anh ơi <-3
  2. Nguyễn Lâm Blog
    Thêm nút back to home nữa
  3. Hải Long
    Ý kiến giống ngay trên :-D
    • Hải Long
      Thêm vào sau dòng:
      You can't always catch 'em all.
  4. Nguyễn Quang Sáng
    Update: Đã thêm button back home
  1. Để chèn mã hay sử dụng: <i rel="pre">code_here</i>
  2. Để chèn một trích dẫn, hãy sử dụng: <b rel="quote">your_qoute</b>
  3. chèn ảnh, hãy sử dụng: <i rel="image">url_image_here</i>
Để lại bình luận theo chủ đề của bài viết, bình luận có Liên kết sẽ không được hiển thị.
Quản trị viên và tác giả blog có quyền hiển thị, xóa, đánh dấu spam, trên các nhận xét đã đăng
data-ad-format="link"