Cara Membuat Pricing Table di Landing Page Blogspot

Membuat Pricing Table di Landing Page Penjualan Blogspot - Bagi yang ingin membuat landing page penjualan di blogspot, sudah disediakan tutorial Cara Membuat Landing Page di Lajang Spot.

Pricing table memiliki arti tabel harga, adalah sebuah perbandingan harga produk pada landing page penjualan dalam bentuk tabel.

Apa mannfaat membuat pricing table dan cara membuatnya di Landing Page Penjualan Blogspot?

Manfaat Membuat Pricing Table di Landing Page Penjualan

Membuat pricing table di landing page penjualan tentunya bermanfaat untuk memengaruhi keputusan pelanggan dalam membeli produk melalui penawaran tersebut.

Karena calon buyer, selanjutnya kita singkat dengan cabuy, dihadapkan dengan sebuah pilihan, mau pilih yang mana, bukan tentang pilih ya atau tidak.

Jika cabuy dihadapkan dengan beberapa pilihan, terkadang cabuy bingung dalam mempertimbangkan, mana nih yang harus dipilih.

Dalam keadaan bingung tersebut, kemudian kita memberi masukan "pilih ini saja" dengan memberikan alasan yang dapat diterima.

Kalau cocok dengan penawaran tersebut, si cabuy akan segera melakukan pembelian.

Tentu cara ini dapat memperbesar peluang konversi pengunjung yang datang ke landing page penjualan.

Kita hanya tinggal menampilkan pilihan produk, harga, serta deskripsi produk/layanan yang ditawarkan saja.

Cara Membuat Membuat Pricing Table di Blogspot

Dalam tutorial kali ini, kita akan membahas cara membuat pricing table pada landing page blogspot.

Misalnya, saya ingin menjual sebuah buku, dengan memberi tiga penawaran harga dengan deskripsi sebagai berikut.

• Paket 1 (Harga Rp 130.000): 1 pcs buku
• Paket 2 (Harga Rp 179.000): 1 pcs buku, 1 ebook, gratis ongkir.
• Paket 3 (Harga Rp 250.000): 2 pcs buku, 1 ebook, gratis ongkir.

Untuk membuat pricing table di blogspot, kita hanya membutuhakan kode html dan css berikut ini.

#1 Kode CSS Pricing Table

Berikut ini adalah kode css yang kita gunakan untuk membuat pricing table di blogspot.

.kolom-harga {
  float: left;
  width: 33.3%;
  padding: 8px;
}

.kolom-harga ul.harga-paket {
  margin: 0;
  padding: 0;
}

.harga-paket {
  list-style-type: none;
  border: 1px solid #eee;
  margin: 0;
  padding: 0;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}

.harga-paket:hover {
  box-shadow: 0 8px 12px 0 rgba(0,0,0,0.2)
}

.harga-paket .paket {
  background-color: #111;
  color: white;
  font-size: 25px;
}

.harga-paket li {
  border-bottom: 1px solid #eee;
  padding: 20px;
  text-align: center;
}

.harga-paket .grey {
  background-color: #eee;
  font-size: 20px;
}

.button-pt {
  background-color: #04AA6D;
  border: none;
  color: white;
  padding: 10px 25px;
  text-align: center;
  text-decoration: none;
  font-size: 18px;
}
a.button-pt {
  color: white;
}

@media only screen and (max-width: 600px) {
  .kolom-harga {
    width: 100%;
  }
}

Silahkan masukkan kode css pricing table di atas kode ]]></b:skin>.

atau di atas kode </head> dengan cara memasukkannya ke dalam tag style seperti di bawah.

<style>
kode css di sini
</style>
</head>

#1 Kode HTML Pricing Table

Berikut ini adalah kode html yang kita gunakan untuk membuat pricing table di blogspot.

<h2 style="text-align:center">Judul Pricing Tables</h2>
<p style="text-align:center">Bisa diisikan instruksi untuk memilih paket yang diinginkan, dll.</p>

<div class="kolom-harga">
  <ul class="harga-paket">
    <li class="paket">Paket 1</li>
    <li class="grey">Rp 130.000</li>
    <li>1 pcs Buku</li>
    <li>Tidak ada Ebook Premium</li>
    <li>Tidak Gratis Ongkir</li>
    <li class="grey"><a href="#" class="button-pt">Pesan Sekarang</a></li>
  </ul>
</div>

<div class="kolom-harga">
  <ul class="harga-paket">
    <li class="paket">Paket 2</li>
    <li class="grey">Rp 179.000</li>
    <li>1 pcs Buku</li>
    <li>1 Ebook Premium</li>
    <li>Gratis Ongkir</li>
    <li class="grey"><a href="#" class="button-pt">Pesan Sekarang</a></li>
  </ul>
</div>

<div class="kolom-harga">
  <ul class="harga-paket">
    <li class="paket">Paket 3</li>
    <li class="grey">Rp 250.000</li>
    <li>2 pcs Buku</li>
    <li>1 Ebook Premium</li>
    <li>Gratis Ongkir</li>
    <li class="grey"><a href="#" class="button-pt">Pesan Sekarang</a></li>
  </ul>
</div>

Letakkan kode di atas, di bagian harga dari html landing page penjualan blogspot Anda.

Hasilnya:

Note: Jika Anda menggunakan Template Lajang Spot untuk membuat landing page penjualan di blogspot, Anda bisa masukkan kode css di widget Custom CSS.

Demikian Membuat Pricing Table di Landing Page Penjualan Blogspot, semoga bermanfaat.