Cara Membuat Tabel Harga (Pricing Table) Keren di Blogger dengan CSS Murni

Memiliki halaman penawaran yang profesional sangat penting bagi Anda yang menawarkan jasa atau produk melalui blog. Salah satu elemen yang paling efektif untuk meningkatkan konversi adalah tabel harga atau pricing table. Dengan tabel harga yang rapi, pengunjung dapat dengan mudah membandingkan fitur dan memilih paket yang sesuai dengan kebutuhan mereka.

Kabar baiknya, Anda tidak memerlukan plugin berat untuk membuat tampilan ini di Blogger. Anda cukup menggunakan kombinasi CSS murni dan struktur HTML yang ringan. Hal ini akan menjaga kecepatan loading blog Anda tetap optimal dan tetap responsif saat dibuka melalui perangkat smartphone.

Menambahkan Kode CSS ke Blog Anda

Langkah pertama yang harus dilakukan adalah memasukkan kode gaya atau CSS ke dalam template blog atau langsung di halaman statis. Kode ini berfungsi untuk mengatur tampilan kotak, warna, efek hover, dan tata letak agar terlihat modern dan elegan.

/* Desain Pricing Table Blogger */
.pricing-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  padding: 20px;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.pricing-card {
  background: #ffffff;
  border-radius: 15px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
  width: 300px;
  padding: 30px;
  text-align: center;
  transition: transform 0.3s ease;
  border: 1px solid #eee;
}

.pricing-card:hover {
  transform: translateY(-10px);
  border-color: #3498db;
}

.pricing-card h3 {
  color: #333;
  font-size: 24px;
  margin-bottom: 10px;
}

.pricing-price {
  font-size: 40px;
  font-weight: bold;
  color: #2c3e50;
  margin: 20px 0;
}

.pricing-price span {
  font-size: 16px;
  color: #7f8c8d;
}

.pricing-features {
  margin: 25px 0;
  padding: 0;
  color: #555;
  line-height: 2;
}

.pricing-button {
  display: block;
  background: #3498db;
  color: #fff;
  padding: 12px 25px;
  border-radius: 25px;
  text-decoration: none;
  font-weight: bold;
  transition: background 0.3s ease;
}

.pricing-button:hover {
  background: #2980b9;
  color: #fff;
}

.featured-card {
  border: 2px solid #3498db;
  position: relative;
  transform: scale(1.05);
}

.featured-label {
  position: absolute;
  top: -15px;
  left: 50%;
  transform: translateX(-50%);
  background: #3498db;
  color: #fff;
  padding: 5px 15px;
  border-radius: 20px;
  font-size: 12px;
  text-transform: uppercase;
}

Menyiapkan Struktur HTML Tabel Harga

Setelah kode CSS terpasang, langkah selanjutnya adalah menambahkan struktur HTML di tempat Anda ingin menampilkan tabel tersebut. Kode di bawah ini terdiri dari tiga pilihan paket, yaitu Basic, Professional, dan Enterprise. Anda bisa menyesuaikan teks, harga, dan fitur sesuai dengan layanan yang Anda miliki.

<div class="pricing-container">
  <!-- Paket Basic -->
  <div class="pricing-card">
    <h3>Basic</h3>
    <div class="pricing-price">Rp 99rb<span>/bln</span></div>
    <div class="pricing-features">
      <p>Fitur Standar</p>
      <p>Support Email</p>
      <p>Akses Terbatas</p>
    </div>
    <a href="#" class="pricing-button">Pilih Paket</a>
  </div>

  <!-- Paket Professional (Featured) -->
  <div class="pricing-card featured-card">
    <div class="featured-label">Paling Populer</div>
    <h3>Pro</h3>
    <div class="pricing-price">Rp 199rb<span>/bln</span></div>
    <div class="pricing-features">
      <p>Semua Fitur Basic</p>
      <p>Support 24/7</p>
      <p>Akses Full</p>
    </div>
    <a href="#" class="pricing-button">Mulai Sekarang</a>
  </div>

  <!-- Paket Enterprise -->
  <div class="pricing-card">
    <h3>Enterprise</h3>
    <div class="pricing-price">Rp 499rb<span>/bln</span></div>
    <div class="pricing-features">
      <p>Custom Fitur</p>
      <p>Dedicated Manager</p>
      <p>Akses Prioritas</p>
    </div>
    <a href="#" class="pricing-button">Hubungi Kami</a>
  </div>
</div>

Cara Memasang di Halaman Blogger

Untuk menerapkan kode di atas, silakan masuk ke Dashboard Blogger Anda kemudian buat halaman baru atau edit halaman yang sudah ada. Pastikan Anda berpindah dari tampilan "Menulis" (Compose View) ke tampilan "Tampilan HTML" (HTML View) sebelum menempelkan kode.

Letakkan kode CSS di bagian paling atas, diikuti oleh kode HTML tepat di bawahnya. Anda bisa mengubah warna hex pada CSS (seperti #3498db) dengan warna identitas brand Anda agar terlihat lebih serasi dengan template blog yang digunakan.

Setelah selesai, klik simpan atau publikasikan. Sekarang halaman statis Anda telah memiliki tabel harga yang profesional, responsif, dan menarik tanpa perlu menggunakan plugin tambahan yang memberatkan blog.