Chia sẻ code bảng giá bằng html với css cho Blogger


Chia sẻ code bảng giá bằng html với css cho Blogger: Với người dùng thì Blogspot đang là mã nguồn và làm site vệ tinh rất tốt vì nó là con đẻ của Google tốc độ index và Seo khá tốt, đặc biệt là những bạn nào bán hàng và giới thiệu các gói hosting và tên miền.

Trong bài viết này mình sẽ chia sẻ cùng các bạn một code tạo bảng giá nhìn khá chất dành cho bạn. Nó rất dể tùy chỉnh và tùy biến theo ý thích của bạn

Chia sẻ code bảng giá bằng html với css cho Blogger

Thông thường chúng ta có rất nhiều phương pháp khác nhau để thực hiện một Pricing Table. Nếu website của bạn sử dụng nền tảng WordPress hay Joomla thì đã có những Plugin khá hay để thực hiện điều này. Nhưng nếu bạn muốn tự Code cho riêng mình một bảng giá thì vấn đề này thực sự không khó.

Trong bài viết này tôi sẽ Demo một bảng giá dành cho các dịch vụ Hosting với 4 cột dành cho 4 gói khác nhau để khách hàng dễ dàng lựa chọn. Trong đó, chúng ta sẽ làm nổi bật một gói lên để gây sự chú ý.

Chia sẻ code bảng giá bằng html với css cho Blogger

Chúng ta sẽ bắt đầu bằng công việc tạo ra một bảng giá Hositng với đoạn Code HTML như sau:

Code html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="pricing-container">
      <div class="plan">
        <h2>Basic</h2>
        <div class="price">$29.99 <span class="duration">/month</span></div>

        <ul class="features">
          <li>Speed</li>
          <li>Basic Security</li>
          <li>Email Support</li>
          <li>Plugins</li>
        </ul>

        <a href="#" class="get-plan-btn">
          Get Plan
        </a>
      </div>

      <div class="plan best-value">
        <h2>Gold</h2>
        <div class="price">$99.99 <span class="duration">/year</span></div>

        <ul class="features">
          <li>Speed</li>
          <li>Advanced Security</li>
          <li>Phone Support</li>
          <li>Plugins</li>
        </ul>

        <a href="#" class="get-plan-btn">
          Get Plan
        </a>
      </div>

      <div class="plan">
        <h2>Premium</h2>
        <div class="price">$49.99 <span class="duration">/month</span></div>

        <ul class="features">
          <li>Speed</li>
          <li>Advanced Security</li>
          <li>Phone Support</li>
          <li>Plugins & Themes</li>
        </ul>

        <a href="#" class="get-plan-btn">
          Get Plan
        </a>
      </div>
    </div>
  </body>
</html>

Viết CSS cho nó

.pricing-container {
  margin: 50px 0;
  font-family: "Roboto", sans-serif;
  display: flex;
  max-width: 800px;
  line-height: 1;
}

.pricing-container .plan {
  text-align: center;
  background: linear-gradient(125deg, #36f4de, #4094d6);
  margin: 0 8px;
  flex: 1;
  box-shadow: 0 4px 16px -2px rgba(0, 0, 0, 0.4);
  transition: 400ms;
  position: relative;
  overflow: hidden;
}

.pricing-container .plan.best-value::after {
  content: "Best";
  position: absolute;
  top: 4px;
  right: -34px;
  transform: rotate(40deg);
  padding: 10px 48px;
  font-weight: bold;
  background: #c51e1e;
  color: #fff;
}

.pricing-container h2 {
  margin: 0;
  font-size: 32px;
  padding: 20px;
  color: #143a46;
}

.pricing-container .price {
  padding: 16px;
  font-size: 36px;
  font-weight: bold;
  background: #222;
  color: #eee;
}

.pricing-container .duration {
  font-size: 16px;
  font-weight: normal;
}

.pricing-container .features {
  list-style: none;
  font-size: 20px;
  padding: 0;
  color: #131313;
}

.pricing-container .features li {
  margin: 16px 0;
}

.pricing-container .get-plan-btn {
  text-decoration: none;
  color: #222;
  margin-bottom: 24px;
  display: inline-block;
  background: transparent;
  border: 2px solid #292929;
  border-radius: 8px;
  padding: 8px 32px;
  font-size: 18px;
  text-transform: uppercase;
  font-weight: bold;
  transition: 400ms;
}

/* Hover */

.pricing-container .plan:hover {
  transform: translateY(-8px);
  box-shadow: 0 6px 16px 4px rgba(0, 0, 0, 0.4);
}

.pricing-container .get-plan-btn:hover {
  background: rgba(255, 255, 255, 0.4);
}

/* Media Queries */

@media (max-width: 740px) {
  .pricing-container {
    flex-direction: column;
  }

  .pricing-container .plan {
    margin: 16px 0;
  }
}

Khi các bạn đăng bài trên Blogspot thì bạn chuyển sang tab html và liên kết html và css lại với nhau.

Dưới đây là demo mình làm hoàn chỉnh luôn.

Document

Basic

$29.99 /month
  • Speed
  • Basic Security
  • Email Support
  • Plugins
Get Plan

Gold

$99.99 /year
  • Speed
  • Advanced Security
  • Phone Support
  • Plugins
Get Plan

Premium

$49.99 /month
  • Speed
  • Advanced Security
  • Phone Support
  • Plugins & Themes
Get Plan

Nhìn khá chất đúng không. Hi vọng với chia sẻ code bảng giá bằng html với css cho Blogger này sẽ có ích với các bạn. Chúc bạn thành công.

Xem thêm :Tại Đây
Blog Download Template Blogspot : Tại Đây
Blog Download Phần Mềm Free : Tại Đây
Blog Download Acapella : Tại Đây
Trang mã hóa URL : Tại Đây
Link liên kết : Downmienphi.top


Welcome to F4vnn.com - Blog Thủ Thuật, tất cả nội dung trên website được chúng tôi sưu tập trên Internet. Nếu có vấn đề về bản quyền với bài viết trên Blog vui lòng liên hệ với và chúng tôi sẽ xóa bài viết ngay lập tức . Liên lạc với Admin qua mail: hoangvansy90@gmail.com!

ĐỪNG QUÊN ĐĂNG KÝ FANPAGE ĐỂ NHẬN THỦ THUẬT MỚI NHẤT NHÉ!