Tạo bảng giá bằng CSS với HTML cho Blogger

 Nếu bạn là người hay chia sẻ  Template hoặc bán Template,... Bạn cũng muốn làm một bảng giá trong Blogger để cho người xem tham khảo giá tiền có vừa túi mình không, thì bài viết này tôi sẽ hướng dẫn bạn tạo bảng giá trên Blogger. Trong bài đăng này, tôi sẽ hướng dẫn bạn từng bước về cách thêm bảng định giá trong Blogger.

tao-bang-gia-bang-css-voi-html-cho-blogger
Tạo bảng giá bằng CSS với HTML cho Blogger

Bảng giá là gì?

 Bảng giá là một yếu tố thiết kế yêu cầu người thiết kế truyền đạt thông tin rõ ràng và chính xác, thể hiện nhiều tính năng nhất có thể và giúp người dùng đưa ra lựa chọn tốt nhất dễ dàng và trực quan nhất có thể.

Các bước thực hiện thêm bảng giá cho Blogger

Bước1: Các bạn tìm đến ]]> </ b: skin> và dán đoạn code sau xuống dưới.

/* CSS Bang Gia */
a{text-decoration:none}
.pricingTable{text-align:center;background:#fff;margin:0 -15px;box-shadow:0 0 10px #ababab;padding-bottom:40px;border-radius:10px;color:#cad0de;transform:scale(1);transition:all .5s ease 0s}
.pricingTable:hover{transform:scale(1.05);z-index:1}
.pricingTable .pricingTable-header{padding:40px 0;background:#f5f6f9;border-radius:10px 10px 50% 50%;transition:all .5s ease 0s}
.pricingTable:hover .pricingTable-header{background:#ff9624}
.pricingTable .pricingTable-header i{font-size:50px;color:#858c9a;margin-bottom:10px;transition:all .5s ease 0s}
.pricingTable .price-value{font-size:35px;color:#ff9624;transition:all .5s ease 0s}
.pricingTable .month{display:block;font-size:14px;color:#cad0de}
.pricingTable:hover .month,.pricingTable:hover .price-value,.pricingTable:hover .pricingTable-header i{color:#fff}
.pricingTable .heading{font-size:24px;color:#ff9624;margin-bottom:20px;text-transform:uppercase}
.pricingTable .pricing-content ul{list-style:none;padding:0;margin-bottom:30px}
.pricingTable .pricing-content ul li{line-height:30px;color:#a7a8aa}
.pricingTable .pricingTable-signup a{display:inline-block;font-size:15px;color:#fff;padding:10px 35px;border-radius:20px;background:#ffa442;text-transform:uppercase;transition:all .3s ease 0s}
.pricingTable .pricingTable-signup a:hover{box-shadow:0 0 10px #ffa442}
.pricingTable.blue .heading,.pricingTable.blue .price-value{color:#4b64ff}
.pricingTable.blue .pricingTable-signup a,.pricingTable.blue:hover .pricingTable-header{background:#4b64ff}
.pricingTable.blue .pricingTable-signup a:hover{box-shadow:0 0 10px #4b64ff}
.pricingTable.red .heading,.pricingTable.red .price-value{color:#ff4b4b}
.pricingTable.red .pricingTable-signup a,.pricingTable.red:hover .pricingTable-header{background:#ff4b4b}
.pricingTable.red .pricingTable-signup a:hover{box-shadow:0 0 10px #ff4b4b}
.pricingTable.green .heading,.pricingTable.green .price-value{color:#40c952}
.pricingTable.green .pricingTable-signup a,.pricingTable.green:hover .pricingTable-header{background:#40c952}
.pricingTable.green .pricingTable-signup a:hover{box-shadow:0 0 10px #40c952}
.pricingTable.blue:hover .price-value,.pricingTable.green:hover .price-value,.pricingTable.red:hover .price-value{color:#fff}
@media screen and (max-width:990px){.pricingTable{margin:0 0 20px}}
Bước2: Khi bạn viết bài muốn thêm bảng định giá ở chỗ bạn cần đặt chỉ việc chuyển sang chế độ xem HTML và dán đoạn code dưới đây  vào là được.
<!-- HTML Bang Gia -->
<div class="demo">
<div class="container">
<div class="row">
<div class="col-md-3 col-sm-6">
<div class="pricingTable">
<div class="pricingTable-header">
<i class="fa fa-adjust"></i>
<div class="price-value"> $10.00 <span class="month">per month</span> </div>
      </div>
<h3 class="heading">Standard</h3>
<div class="pricing-content">
 <ul>
  <li><b>50GB</b> Disk Space</li>
  <li><b>50</b> Email Accounts</li>
  <li><b>50GB</b> Monthly Bandwidth</li>
  <li><b>10</b> subdomains</li>
  <li><b>15</b> Domains</li>
 </ul></div>
 <div class="pricingTable-signup">
  <a href="#">sign up</a>
  </div></div></div>

<div class="col-md-3 col-sm-6">
<div class="pricingTable green">
<div class="pricingTable-header">
<i class="fa fa-briefcase"></i>
<div class="price-value"> $20.00 <span class="month">per month</span> </div>
 </div>
<h3 class="heading">Business</h3>
 <div class="pricing-content">
  <ul>
   <li><b>60GB</b> Disk Space</li>
   <li><b>60</b> Email Accounts</li>
   <li><b>60GB</b> Monthly Bandwidth</li>
   <li><b>15</b> subdomains</li>
   <li><b>20</b> Domains</li>
  </ul></div>
<div class="pricingTable-signup">
  <a href="#">sign up</a>
  </div></div></div>
 <div class="col-md-3 col-sm-6">
 <div class="pricingTable blue">
 <div class="pricingTable-header">
  <i class="fa fa-diamond"></i>
   <div class="price-value"> $30.00 <span class="month">per month</span> </div>
 </div>
  <h3 class="heading">Premium</h3>
  <div class="pricing-content">
  <ul>
   <li><b>70GB</b> Disk Space</li>
   <li><b>70</b> Email Accounts</li>
   <li><b>70GB</b> Monthly Bandwidth</li>
   <li><b>20</b> subdomains</li>
   <li><b>25</b> Domains</li>
  </ul>
 </div>
<div class="pricingTable-signup">
 <a href="#">sign up</a>
</div></div></div>
<div class="col-md-3 col-sm-6">
<div class="pricingTable red">
<div class="pricingTable-header">
<i class="fa fa-cube"></i>
<div class="price-value"> $40.00 <span class="month">per month</span> </div>
</div>
<h3 class="heading">Extra</h3>
<div class="pricing-content">
 <ul>
  <li><b>80GB</b> Disk Space</li>
  <li><b>80</b> Email Accounts</li>
  <li><b>80GB</b> Monthly Bandwidth</li>
  <li><b>25</b> subdomains</li>
  <li><b>30</b> Domains</li>
 </ul> </div>
<div class="pricingTable-signup">
 <a href="#">sign up</a>
 </div></div></div></div></div></div>

Kết luận:

Trên đây là tất cả về cách thêm bảng giá trong Blogger, tôi hy vọng nó sẽ hữu ích với bạn. Nếu bạn gặp bất kỳ vấn đề nào liên quan đến hướng dẫn này, hãy cho tôi biết dưới phần comment. Chúc bạn thành công!

Đăng nhận xét

Mới hơn Cũ hơn

Nhận xét Mới