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

3/31/2026
Cara Membuat Tabel Harga Pricing Table Keren di Blogger dengan CSS Murni

Memiliki halaman penawaran yang rapi dan profesional sangat penting bagi pemilik blog yang menawarkan produk, jasa, paket layanan, atau produk digital. Salah satu elemen yang dapat membantu pengunjung memahami pilihan yang tersedia adalah pricing table atau tabel harga.

Dengan tabel harga, pengunjung dapat melihat perbedaan paket, harga, fitur, dan tombol pemesanan dalam satu tampilan. Informasi yang sebelumnya harus dibaca dari beberapa paragraf dapat disajikan secara lebih terstruktur sehingga lebih mudah dibandingkan.

Kabar baiknya, Anda tidak harus menggunakan plugin tambahan untuk membuat pricing table di Blogger. Dengan kombinasi HTML dan CSS murni, Anda dapat membuat tabel harga dengan desain modern, ringan, dan dapat disesuaikan dengan kebutuhan website.

Pada tutorial ini, kita akan membahas cara membuat pricing table keren di Blogger menggunakan CSS, mulai dari kode CSS, struktur HTML, cara pemasangan, hingga tips menyesuaikan desain dengan identitas blog.

Apa Itu Pricing Table?

Pricing table adalah komponen pada halaman website yang digunakan untuk menampilkan beberapa pilihan paket beserta harga dan fitur yang ditawarkan. Pengunjung dapat membandingkan setiap paket sebelum menentukan pilihan.

Pricing table biasanya digunakan pada website bisnis, jasa pembuatan website, layanan digital, hosting, software, kursus online, membership, maupun halaman penjualan produk.

Pada Blogger, pricing table dapat dibuat menggunakan HTML dan CSS sehingga tidak membutuhkan sistem khusus untuk menampilkan struktur paket tersebut.

Manfaat Menggunakan Pricing Table di Blogger

Penggunaan tabel harga dapat membuat informasi penawaran menjadi lebih mudah dipahami. Beberapa manfaatnya antara lain:

  • Memudahkan pengunjung membandingkan paket dalam satu halaman.
  • Membuat informasi harga lebih terstruktur dan mudah dipindai.
  • Memberikan tampilan halaman penawaran yang lebih profesional.
  • Memperjelas perbedaan fitur pada setiap paket.
  • Menyediakan tombol tindakan seperti Pilih Paket, Mulai Sekarang, atau Hubungi Kami.
  • Dapat disesuaikan dengan desain template Blogger menggunakan CSS.
  • Tidak membutuhkan plugin pricing table tambahan.

Pricing table bukan jaminan pengunjung akan melakukan pembelian. Namun, penyajian informasi yang jelas dapat membantu pengunjung memahami pilihan yang tersedia sebelum mengambil keputusan.

Kapan Sebaiknya Menggunakan Pricing Table?

Pricing table sangat cocok digunakan ketika Anda memiliki beberapa paket yang perlu dibandingkan. Misalnya, Anda menawarkan tiga pilihan layanan dengan fitur dan harga berbeda.

Contohnya adalah:

  • Paket Basic untuk kebutuhan dasar.
  • Paket Professional untuk pengguna dengan kebutuhan lebih lengkap.
  • Paket Enterprise untuk kebutuhan bisnis atau fitur khusus.

Anda juga dapat mengubah nama paket tersebut menjadi sesuai dengan produk atau layanan yang ditawarkan.

Kode CSS Pricing Table Blogger

Langkah pertama adalah menambahkan CSS yang mengatur tampilan seluruh komponen pricing table. Kode berikut mencakup desain kartu paket, harga, fitur, tombol, efek hover, dan penanda paket pilihan.

/* Pricing Table Blogger */
.pricing-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  padding: 20px;
}

.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;
  box-sizing: border-box;
}

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

.pricing-card h3 {
  color: #333;
  font-size: 24px;
  margin: 0 0 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;
}

Penjelasan CSS Pricing Table

Container Pricing Table

.pricing-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}

Class .pricing-container digunakan sebagai wadah seluruh kartu harga. Properti display: flex memungkinkan beberapa paket disusun dalam satu baris pada layar yang cukup lebar.

Sementara itu, flex-wrap: wrap memungkinkan kartu berpindah ke baris berikutnya ketika ruang yang tersedia tidak mencukupi.

Desain Kartu Paket

.pricing-card {
  background: #ffffff;
  border-radius: 15px;
  padding: 30px;
  text-align: center;
}

Class .pricing-card mengatur tampilan masing-masing paket. Anda dapat mengubah radius sudut, padding, border, bayangan, dan lebar kartu sesuai desain blog.

Tampilan Harga

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

Bagian ini digunakan untuk menampilkan harga dengan ukuran lebih besar sehingga informasi harga mudah ditemukan ketika pengunjung melihat tabel.

Tombol Paket

.pricing-button {
  display: block;
  background: #3498db;
  color: #fff;
  padding: 12px 25px;
  border-radius: 25px;
}

Class .pricing-button digunakan untuk membuat tombol pada setiap paket. Anda dapat mengganti warna tombol sesuai dengan identitas visual website.

Struktur HTML Pricing Table

Setelah CSS disiapkan, langkah berikutnya adalah memasukkan struktur HTML. Contoh berikut menggunakan tiga paket yang dapat Anda ubah sesuai kebutuhan.

<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 -->
  <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 Pricing Table di Blogger

1. Buka Dashboard Blogger

Masuk ke dashboard Blogger dan pilih blog yang ingin digunakan untuk membuat halaman pricing table.

2. Buat Halaman atau Edit Artikel

Pricing table dapat ditempatkan pada halaman statis, artikel, landing page, atau halaman penawaran jasa. Pilih lokasi yang sesuai dengan kebutuhan Anda.

3. Gunakan Tampilan HTML

Pada editor Blogger, pilih Tampilan HTML. Jangan memasukkan struktur kode tersebut melalui mode visual karena HTML dapat terbaca sebagai teks biasa.

4. Masukkan CSS

Jika pricing table hanya digunakan pada satu halaman, CSS dapat ditempatkan pada area yang sesuai di halaman tersebut. Jika ingin menggunakan desain yang sama pada banyak halaman, lebih baik menempatkan CSS pada stylesheet template Blogger.

5. Masukkan HTML Pricing Table

Setelah CSS tersedia, tempelkan struktur HTML pricing table pada lokasi yang ingin digunakan.

6. Simpan atau Publikasikan

Periksa kembali struktur kode kemudian simpan atau publikasikan halaman. Setelah itu, buka halaman menggunakan browser untuk memastikan seluruh kartu harga tampil dengan baik.

Cara Mengubah Harga dan Nama Paket

Anda dapat mengubah nama paket pada bagian:

<h3>Basic</h3>

Misalnya menjadi:

<h3>Paket Website Basic</h3>

Harga juga dapat diganti pada bagian:

<div class="pricing-price">
  Rp 99rb<span>/bln</span>
</div>

Jika Anda menjual jasa satu kali pembayaran, bagian /bln juga dapat dihapus atau diganti dengan keterangan lain.

Cara Mengubah Warna Pricing Table

Warna utama pada contoh ini menggunakan kode #3498db. Anda dapat menggantinya dengan warna yang sesuai dengan identitas brand.

Contohnya, warna tombol dikontrol melalui:

.pricing-button {
  background: #3498db;
}

Sedangkan warna tombol ketika kursor diarahkan ke atasnya menggunakan:

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

Dengan mengubah kedua nilai tersebut, Anda dapat menyesuaikan tampilan pricing table dengan warna utama template Blogger.

Membuat Paket Unggulan

Pada contoh di atas, paket Pro menggunakan class featured-card. Class ini digunakan untuk memberikan tampilan berbeda pada paket yang ingin Anda tonjolkan.

<div class="pricing-card featured-card">
  ...
</div>

Selain itu, tersedia label:

<div class="featured-label">
  Paling Populer
</div>

Anda dapat mengganti teks tersebut sesuai kebutuhan, misalnya Rekomendasi, Paket Favorit, atau Pilihan Utama. Sebaiknya gunakan label berdasarkan informasi yang memang sesuai dengan penawaran Anda.

Membuat Pricing Table Lebih Responsif

Kode menggunakan flex-wrap: wrap sehingga kartu dapat berpindah ke baris berikutnya ketika ruang layar tidak mencukupi. Namun, Anda tetap perlu menguji tampilan pada smartphone karena lebar area konten setiap template Blogger dapat berbeda.

Jika ingin memberikan aturan tambahan untuk layar kecil, Anda dapat menggunakan media query:

@media (max-width: 600px) {
  .pricing-container {
    padding: 10px;
  }

  .pricing-card {
    width: 100%;
    max-width: 400px;
  }

  .featured-card {
    transform: none;
  }
}

CSS tersebut membuat kartu pricing menggunakan lebar yang lebih fleksibel pada layar kecil dan menghilangkan efek pembesaran pada paket unggulan.

Tips Membuat Pricing Table yang Efektif

  • Gunakan nama paket yang mudah dipahami.
  • Tampilkan harga dengan format yang jelas.
  • Jelaskan fitur utama setiap paket secara singkat.
  • Jangan memasukkan terlalu banyak informasi dalam satu kartu.
  • Gunakan tombol dengan teks tindakan yang jelas.
  • Pastikan tautan tombol mengarah ke halaman atau layanan yang benar.
  • Gunakan desain yang konsisten dengan warna template.
  • Uji tampilan pricing table pada smartphone dan desktop.

Kesalahan yang Perlu Dihindari

Menggunakan Harga yang Tidak Jelas

Pastikan pengunjung dapat mengetahui harga dengan mudah. Hindari format yang dapat menimbulkan kebingungan mengenai biaya satu kali, bulanan, atau tahunan.

Tombol Masih Menggunakan Tanda #

Pada contoh kode, tombol menggunakan href="#" sebagai placeholder. Sebelum digunakan pada website sebenarnya, ganti URL tersebut dengan tautan tujuan yang sesuai.

<a href="URL-TUJUAN" class="pricing-button">
  Pilih Paket
</a>

Terlalu Banyak Paket

Pricing table tidak harus memiliki banyak pilihan. Terlalu banyak paket justru dapat membuat pengunjung kesulitan membandingkan pilihan. Gunakan jumlah paket yang memang diperlukan untuk produk atau layanan Anda.

Tidak Menguji Tampilan Mobile

Pricing table yang terlihat bagus pada desktop belum tentu tampil optimal pada smartphone. Selalu periksa tampilan pada beberapa ukuran layar sebelum halaman dipublikasikan.

FAQ Pricing Table Blogger

Apakah pricing table bisa dibuat di Blogger tanpa plugin?

Bisa. Pricing table sederhana dapat dibuat menggunakan HTML dan CSS tanpa membutuhkan plugin tambahan.

Apakah pricing table bisa digunakan pada halaman statis Blogger?

Bisa. Kode dapat ditempatkan pada halaman statis Blogger menggunakan mode Tampilan HTML.

Apakah warna pricing table bisa diubah?

Bisa. Warna background, border, harga, tombol, label, dan efek hover dapat disesuaikan melalui CSS.

Apakah pricing table responsive di HP?

Kode menggunakan Flexbox dan flex-wrap sehingga kartu dapat menyesuaikan susunan ketika ruang layar lebih sempit. Untuk hasil terbaik, tetap lakukan pengujian pada smartphone dan sesuaikan CSS dengan struktur template yang digunakan.

Apakah tombol pricing table bisa diarahkan ke WhatsApp?

Bisa. Anda dapat mengganti nilai href pada tombol dengan tautan WhatsApp atau halaman pemesanan yang digunakan untuk menerima order.

Apakah pricing table dapat digunakan untuk menjual jasa?

Bisa. Pricing table sangat cocok untuk menampilkan beberapa paket jasa, seperti jasa pembuatan website, desain, layanan digital, maintenance, maupun paket layanan lainnya.

Kesimpulan

Membuat pricing table di Blogger dengan CSS murni merupakan salah satu cara sederhana untuk menampilkan pilihan paket secara lebih terstruktur dan profesional. Dengan kombinasi HTML dan CSS, Anda dapat membuat kartu harga yang berisi nama paket, harga, fitur, serta tombol tindakan tanpa membutuhkan plugin tambahan.

Desain pricing table juga dapat disesuaikan dengan identitas blog, mulai dari warna, ukuran kartu, label paket unggulan, teks fitur, hingga tautan tombol pemesanan. Dengan tambahan media query, tampilan dapat dibuat lebih nyaman pada perangkat dengan layar kecil.

Jika digunakan untuk halaman penjualan, pastikan informasi harga dan fitur ditulis dengan jelas serta tombol diarahkan ke tujuan yang benar. Dengan struktur yang sederhana dan informasi yang mudah dibandingkan, pricing table Blogger dapat menjadi elemen yang berguna untuk halaman produk maupun jasa.

Baca Artikel Lainnya

Kembali ke Beranda
Link profil berhasil disalin!