Thêm Pricing Table Vào Blogspot Bằng HTML/CSS

Xin chào các bạn đã đến với bài viết tiếp theo của Anh Tuấn Blog, hôm nay mình sẽ hướng dẫn cho các bạn cách để thêm Pricing Table vào bài viết Blogspot một cách đơn giản và hiệu quả nhất. Đây là một đoạn code CSS thuần, chỉ dùng HTML và CSS để thực hiện. Hi vọng các bạn sẽ thực hiện được nó

Các bảng Pricing Table này không được code JS nên chỉ show ra giá và nó không thực hiện được các tác động nào vào nó. Nếu muốn sử dụng đoạn Code này, các bạn vui lòng đọc kĩ toàn bộ bài viết này

Thêm Pricing Table Vào Blogspot Bằng HTML/CSS

Pricing Table là gì?

Pricing Table là cách mà chúng ta có thể dễ dàng hiển thị bất kỳ loại giá nào trong bảng. Bạn chắc hẳn đã thấy trên nhiều trang web rằng cùng với danh sách của một mặt hàng, giá của nó cũng được ghi trong bảng. Bảng định giá này được thực hiện với sự trợ giúp của HTML/CSS thuần. Việc không sử dụng JS sẽ giúp tốc độ tải trang nhanh hơn.

Các bước thức hiện

Bước 1: Đăng Nhập vào tài khoản Blogger.com

Bước 2: Backup lại Code, đề phòng các vấn đề không đáng có xảy ra

Bước 3: Sau đó nhấn vào Chủ đềChỉnh sửa HTML

Bước 4: Sau đó dán đoạn Code JS Awesome trước thẻ đóng </head>

<link crossorigin='anonymous' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css' integrity='sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==' referrerpolicy='no-referrer' rel='stylesheet'/>

Bước 5: Sau đó dán đoạn Code CSS trước thẻ đóng </head>


<style type='text/css'>
/* This Pricing Table Design By Www.Ngohoanganhtuan.Net */

:root {
--yellow-color: #ffd861;
--green-color: #43ef8b;
--ribbon-color: #a26bfa;
--basic-background: #ffecb3;
--premium-background: #d0b3ff;
--ultimate-background: #baf8d4;
}

.anhtuanblogWrapper{
  max-width: 1090px;
  width: 100%;
  margin: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.anhtuanblogWrapper .anhtuanblogTable{
  background: #fff;
  width: calc(33% - 20px);
  padding: 30px 30px;
  position: relative;
  box-shadow: 0 5px 10px rgba(0,0,0,0.1);
}
.anhtuanblogTable .price-section{
  display: flex;
  justify-content: center;
}
.anhtuanblogTable .anhtuanblog-Price-area{
  height: 120px;
  width: 120px;
  border-radius: 50%;
  padding: 2px;
}
.anhtuanblog-Price-area .inner-area{
  height: 100%;
  width: 100%;
  border-radius: 50%;
  border: 3px solid #fff;
  line-height: 117px;
  text-align: center;
  color: #fff;
  position: relative;
}
.anhtuanblog-Price-area .inner-area .text{
  font-size: 25px;
  font-weight: 400;
  position: absolute;
  top: -10px;
  left: 17px;
}
.anhtuanblog-Price-area .inner-area .price{
  font-size: 45px;
  font-weight: 500;
  margin-left: 16px;
}
.anhtuanblogTable .anhtuanblog-Package-name{
  width: 100%;
  height: 2px;
  margin: 35px 0;
  position: relative;
}
.anhtuanblogTable .anhtuanblog-Package-name::before{
  position: absolute;
  top: 50%;
  left: 50%;
  font-size: 25px;
  font-weight: 500;
  background: #fff;
  padding: 0 15px;
  transform: translate(-50%, -50%);
}
.anhtuanblogTable .features li{
  margin-bottom: 15px;
  list-style: none;
  display: flex;
  justify-content: space-between;
}
.features li .list-name{
  font-size: 17px;
  font-weight: 400;
}
.features li .icon{
  font-size: 15px;
}
.features li .icon.check{
  color: #2db94d;
}
.features li .icon.cross{
  color: #cd3241;
}
.anhtuanblogTable .btn{
  width: 100%;
  display: flex;
  margin-top: 35px;
  justify-content: center;
}
.anhtuanblogTable .btn button{
  width: 80%;
  height: 50px;
  color: #fff;
  font-size: 20px;
  font-weight: 500;
  border: none;
  outline: none;
  border-radius: 25px;
  cursor: pointer;
  transition: all 0.3s ease;
}
.anhtuanblogTable .btn button:hover{
  border-radius: 5px;
}
.anhtuanblog-Basic .features li::selection{
  background: var(--yellow-color);
}
.anhtuanblog-Basic ::selection,
.anhtuanblog-Basic .anhtuanblog-Price-area,
.anhtuanblog-Basic .inner-area{
  background: var(--yellow-color);
}
.anhtuanblog-Basic .btn button{
  border: 2px solid var(--yellow-color);
  background: #fff;
  color: var(--yellow-color);
}
.anhtuanblog-Basic .btn button:hover{
  background: var(--yellow-color);
  color: #fff;
}
.anhtuanblog-Premium ::selection,
.anhtuanblog-Premium .anhtuanblog-Price-area,
.anhtuanblog-Premium .inner-area,
.anhtuanblog-Premium .btn button{
  background: var(--ribbon-color);
}
.anhtuanblog-Premium .btn button:hover{
  background: #833af8;
}
.anhtuanblog-Ultimate ::selection,
.anhtuanblog-Ultimate .anhtuanblog-Price-area,
.anhtuanblog-Ultimate .inner-area{
  background: var(--green-color);
}
.anhtuanblog-Ultimate .btn button{
  border: 2px solid var(--green-color);
  color: var(--green-color);
  background: #fff;
}
.anhtuanblog-Ultimate .btn button:hover{
  background: var(--green-color);
  color: #fff;
}
.anhtuanblog-Basic .anhtuanblog-Package-name{
  background: var(--basic-background);
}
.anhtuanblog-Premium .anhtuanblog-Package-name{
  background: var(--premium-background);
}
.anhtuanblog-Ultimate .anhtuanblog-Package-name{
  background: var(--ultimate-background);
}
.anhtuanblog-Basic .anhtuanblog-Package-name::before{
  content: "Basic";
}
.anhtuanblog-Premium .anhtuanblog-Package-name::before{
  content: "Premium";
  font-size: 24px;
}
.anhtuanblog-Ultimate .anhtuanblog-Package-name::before{
  content: "Ultimate";
  font-size: 24px;
}
@media (max-width: 1020px) {
  .anhtuanblogWrapper .anhtuanblogTable{
    width: calc(50% - 20px);
    margin-bottom: 40px;
  }
}
@media (max-width: 698px) {
  .anhtuanblogWrapper .anhtuanblogTable{
    width: 100%;
  }
}
::selection{
  color: #fff;
}
.anhtuanblogTable .ribbon{
  width: 150px;
  height: 150px;
  position: absolute;
  top: -10px;
  left: -10px;
  overflow: hidden;
}
.anhtuanblogTable .ribbon::before,
.anhtuanblogTable .ribbon::after{
  position: absolute;
  content: "";
  z-index: -1;
  display: block;
  border: 7px solid #4606ac;
  border-top-color: transparent;
  border-left-color: transparent;
}
.anhtuanblogTable .ribbon::before{
  top: 0px;
  right: 15px;
}
.anhtuanblogTable .ribbon::after{
  bottom: 15px;
  left: 0px;
}
.anhtuanblogTable .ribbon span{
  position: absolute;
  top: 30px;
  right: 0;
  transform: rotate(-45deg);
  width: 200px;
  background: var(--ribbon-color);
  padding: 10px 0;
  color: #fff;
  text-align: center;
  font-size: 17px;
  text-transform: uppercase;
  box-shadow: 0 5px 10px rgba(0,0,0,0.12);
}</style>

Bước 6: Sau đó nhấn vào Lưu chủ đề

Bước 7: Bây giờ sao chép đoạn code HTML này của Pricing Table và dán đoạn Code HTML này vào nơi bạn muốn đặt nó.


<div class="anhtuanblogWrapper">
    <div class="anhtuanblogTable anhtuanblog-Basic">
      <div class="price-section">
        <div class="anhtuanblog-Price-area">
          <div class="inner-area">
            <span class="text">$</span>
            <span class="price">29</span>
          </div>
        </div>
      </div>
      <div class="anhtuanblog-Package-name"></div>
      <ul class="features">
        <li>
          <span class="list-name">One Selected Template</span>
          <span class="icon check"><i class="fas fa-check"></i></span>
        </li>
        <li>
          <span class="list-name">100% Responsive Design</span>
          <span class="icon check"><i class="fas fa-check"></i></span>
        </li>
        <li>
          <span class="list-name">Credit Remove Permission</span>
          <span class="icon cross"><i class="fas fa-times"></i></span>
        </li>
        <li>
          <span class="list-name">Lifetime Template Updates</span>
          <span class="icon cross"><i class="fas fa-times"></i></span>
        </li>
      </ul>
      <div class="btn"><button>Purchase</button></div>
    </div>
    <div class="anhtuanblogTable anhtuanblog-Premium">
      <div class="ribbon"><span>Recommend</span></div>
      <div class="price-section">
        <div class="anhtuanblog-Price-area">
          <div class="inner-area">
            <span class="text">$</span>
            <span class="price">59</span>
          </div>
        </div>
      </div>
      <div class="anhtuanblog-Package-name"></div>
      <ul class="features">
        <li>
          <span class="list-name">Five Existing Templates</span>
          <span class="icon check"><i class="fas fa-check"></i></span>
        </li>
        <li>
          <span class="list-name">100% Responsive Design</span>
          <span class="icon check"><i class="fas fa-check"></i></span>
        </li>
        <li>
          <span class="list-name">Credit Remove Permission</span>
          <span class="icon check"><i class="fas fa-check"></i></span>
        </li>
        <li>
          <span class="list-name">Lifetime Template Updates</span>
          <span class="icon cross"><i class="fas fa-times"></i></span>
        </li>
      </ul>
      <div class="btn"><button>Purchase</button></div>
    </div> 
    <div class="anhtuanblogTable anhtuanblog-Ultimate">
      <div class="price-section">
        <div class="anhtuanblog-Price-area">
          <div class="inner-area">
            <span class="text">$</span>
            <span class="price">99</span>
          </div>
        </div>
      </div>
      <div class="anhtuanblog-Package-name"></div>
      <ul class="features">
        <li>
          <span class="list-name">All Existing Templates</span>
          <span class="icon check"><i class="fas fa-check"></i></span>
        </li>
        <li>
          <span class="list-name">100% Responsive Design</span>
          <span class="icon check"><i class="fas fa-check"></i></span>
        </li>
        <li>
          <span class="list-name">Credit Remove Permission</span>
          <span class="icon check"><i class="fas fa-check"></i></span>
        </li>
        <li>
          <span class="list-name">Lifetime Template Updates</span>
          <span class="icon check"><i class="fas fa-check"></i></span>
        </li>
      </ul>
      <div class="btn"><button>Purchase</button></div>
    </div>
  </div>

Preview

$ 29
  • One Selected Template
  • 100% Responsive Design
  • Credit Remove Permission
  • Lifetime Template Updates
Recommend
$ 59
  • Five Existing Templates
  • 100% Responsive Design
  • Credit Remove Permission
  • Lifetime Template Updates
$ 99
  • All Existing Templates
  • 100% Responsive Design
  • Credit Remove Permission
  • Lifetime Template Updates

Trong bài viết này, Anh Tuấn Blog đã chia sẻ với các bạn Cách thêm Pricing Table cho Blogger. Vì vậy, làm thế nào bạn thích bài viết? Hãy comment bên dưới. Nếu bạn có bất kỳ câu hỏi nào thì bạn có thể bình luận. Cảm ơn bạn đã ghé thăm Anh Tuấn Blog.

Reference:
Www.SmartTechMukesh.Online