Cara Membuat Halaman Daftar Harga di Blogspot

Cua
23 Jun, 2023

Halaman daftar harga - Kamu pasti sering banget lihat halaman daftar harga atau tabel paket harga di website yang jualan jasa atau produk, kan? Nah, di artikel ini aku mau bantu kamu bikin halaman daftar harga seperti itu, khususnya buat kamu yang pakai Blogspot atau Blogger. Halaman daftar harga ini cocok banget buat kamu yang punya bisnis atau usaha online, entah itu jasa desain, pembuatan website, atau jualan produk digital.

Biasanya, daftar harga ini dipakai buat nunjukin harga dan detail dari produk atau layanan yang kamu tawarkan. Tapi gak cuma itu, halaman ini juga sering dijadiin landing page buat para affiliator atau reseller yang pengen jualan produk secara mandiri. Tapi sebelum kamu bikin, penting juga untuk tahu apa aja kelebihan dan kekurangan dari halaman daftar harga di Blogspot ini. Jadi kamu bisa pertimbangkan apakah cocok buat kebutuhan kamu.

kekurangan dan kelebihan halaman daftar harga di blogspot

Kelebihan:
  • Mudah untuk pelanggan melihat deskripsi produk atau jasa
  • Pelanggan jadi mudah melakukan order jasa dan produk
  • Tampilan keren untuk pilihan penawaran harga
  • Profesional dari segi bisnis
  • Bisa di percaya
Kekurangan:
  • Render halaman blog jadi lambat
  • editnya cuma bisa di mode html

Kalau kamu merasa halaman daftar harga ini penting buat bisnis kamu, yuk langsung aja aku tunjukin cara bikin halaman daftar harga di Blogspot dengan mudah. Gak ribet kok, cuma dua langkah aja!

Cara membuat halaman daftar harga di blogspot

Ada dua langkah yang harus kamu lakukan pertama edit css nya dulu di tema, baru tambahkan script html di halaman untuk daftar harga.

Langkah 1: Tambahkan Kode CSS ke Tema Blogspot

  • Masuk ke dashboard Blogger kamu.
  • Di menu sebelah kiri, klik Tema.
  • Klik tombol panah kecil di sebelah tombol Sesuaikan, lalu pilih Edit HTML.
  • Setelah masuk ke editor HTML, cari bagian ]]> (Tips: Tekan Ctrl + F lalu ketik ]]> biar cepat nemunya).
  • Salin dan tempel kode CSS berikut tepat di atas ]]>: 
    /* CSS untuk tampilan daftar harga */
.pricing-section {
  font-family: 'Google Sans', Arial, sans-serif;
  position: relative;
  overflow: hidden;
  display: block;
  margin: 15px 0;
  line-height: 1.7;
}
.pricing-section .pricing-title {
  font-size: 1.1rem;
  margin: 1rem 0 0;
  font-weight: 700;
  color: #fff;
}
.pricing-container {
  display: flex;
  max-width: 1000px;
  margin: 0 auto;
}
.pricing-tag {
  margin: .5rem 0 1rem;
  font-size: 13px;
  display: inline-block;
  background: #fff;
  color: #fff;
  padding: 3px 15px;
  border-radius: 20px;
}
a.ferisp-order-btn {
  font-size: 14px;
  text-transform: uppercase;
  text-decoration: none;
  background: #fff;
  color: #fff;
  display: inline-block;
  padding: 7px 20px;
  border-radius: 20px;
  transition: all .3s ease-in-out;
}
a.ferisp-order-btn:hover {
  transform: scale(1.1);
}
.pricing-ferisp-column {
  background: #222f3d;
  padding: 30px 15px;
  box-sizing: border-box;
  border-radius: 10px;
  text-align: center;
  width: 33%;
  margin: 10px;
  box-shadow: 0 7px 7px rgba(0, 0, 0, 0.06);
  border: 2px solid #3f364c;
  transition: all .3s ease-in-out;
}
.pricing-ferisp-column ul {
  list-style: none;
  padding: 10px 0;
  margin: 0;
  font-size: 14px;
  line-height: 2.2;
}
.pricing-ferisp-column img {
  width: 50px;
}
.ferisp-price {
  font-weight: 700;
  font-size: 22px;
}
.service-info {
  opacity: .9;
  color: #fff;
}
.ferisp-2-column .pricing-ferisp-column {
  width: 50%;
}
/* Warna tiap kolom */
.pricing-ferisp-column:nth-child(1) .ferisp-price,
.pricing-ferisp-column:nth-child(1) i {
  color: #2b73f6;
}
.pricing-ferisp-column:nth-child(2) .ferisp-price,
.pricing-ferisp-column:nth-child(2) i {
  color: #2b73f6;
}
.pricing-ferisp-column:nth-child(3) .ferisp-price,
.pricing-ferisp-column:nth-child(3) i {
  color: #2b73f6;
}
/* Efek hover */
.pricing-ferisp-column:nth-child(1):hover,
.pricing-ferisp-column:nth-child(2):hover,
.pricing-ferisp-column:nth-child(3):hover {
  border-color: #f80074;
}
/* Warna tombol dan tag */
.pricing-ferisp-column:nth-child(1) .pricing-tag,
.pricing-ferisp-column:nth-child(1) a.ferisp-order-btn,
.pricing-ferisp-column:nth-child(2) .pricing-tag,
.pricing-ferisp-column:nth-child(2) a.ferisp-order-btn,
.pricing-ferisp-column:nth-child(3) .pricing-tag,
.pricing-ferisp-column:nth-child(3) a.ferisp-order-btn {
  background: #2b73f6;
}

/* Responsive tampilan mobile */
@media screen and (max-width: 580px) {
  .pricing-ferisp-column,
  .ferisp-2-column,
  .pricing-ferisp-column {
    width: auto;
  }
  .pricing-container {
    display: block;
  }
}
  • Setelah selesai, klik Simpan (di pojok kanan atas).

Langkah 2: Buat Halaman Baru & Tambahkan Kode HTML

  • Kembali ke dashboard Blogger.
  • Pilih menu Halaman, lalu klik tombol + Halaman Baru.
  • Buat judul halaman, misalnya: Daftar Harga Layanan.
  • Ubah tampilan editor ke mode HTML.
  • Salin dan tempel kode HTML berikut:
    • <div class="pricing-section">
  <div class="pricing-container">
    <div class="pricing-ferisp-column">
      <img
        src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVrqPVatpPJc2pUBrnYuDiciVU-1lB9PLN8X2issxGwVukEYokVYF-uDATVzVkRiZB4uB7My-qof2vTlH_KXzrF-dtOVjJVdA-aTQ861KFSmHGCqVbyZR6vOyknF00hfCwxpvtvw_iiCMLpaVMBeF17lVatUFlzhWMcVYD3RqFgx_QXd1WDpJsq7poTOWX/s1600/Basic.png"
        alt="Basic"
      />
      <div class="pricing-title">Basic</div>
      <div class="pricing-tag">30% off</div>
      <div class="ferisp-price">Rp 180.000</div>
      <div class="service-info">
        <ul>
          <li>Documentation</li>
          <li>Premium Template</li>
          <li>1 License</li>
          <li>Full Optimization</li>
          <li>1 Month Full Support</li>
          <li>Easy Customize</li>
          <li>-</li>
        </ul>
      </div>
      <a
        class="ferisp-order-btn"
        href="https://www.ciacua.eu.org/"
        title="Basic"
        target="_blank"
        >Pesan Sekarang</a
      >
    </div>
    <div class="pricing-ferisp-column">
      <img
        src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicZC8u6ZTuFu6j9bnUKtecyJ_PoGgl_Mu5cvQGwBm0tUpc0QZ53XNLl5XjZDnwT4kG1yeQy7KWDWJNUEM6pXIgd9fDMHXIyE5jUCy93z3e22rfMihug3QwSAT2g-Bqc7w1hZqo9PcXOC2-ZX5JFQjeOsk2m1Xxtp5webEzingQGNlj2fnho_I6o2DnUiJO/s1600/Personal.png"
        alt="Personal"
      />
      <div class="pricing-title">Personal</div>
      <div class="pricing-tag">Best Value</div>
      <div class="ferisp-price">Rp 220.000</div>
      <div class="service-info">
        <ul>
          <li>Documentation</li>
          <li>Premium Template</li>
          <li>3 License</li>
          <li>Full Optimization</li>
          <li>3 Month Full Support</li>
          <li>Easy Customize</li>
          <li>-</li>
        </ul>
      </div>
      <a
        class="ferisp-order-btn"
        href="https://www.ciacua.eu.org/"
        title="Personal"
        target="_blank"
        >Pesan Sekarang</a
      >
    </div>
    <div class="pricing-ferisp-column">
      <img
        src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgR_qpGwtnipLiJ5-RG_xX0g8q4NLpv8McVskS8geZ9ZkQ4Xr6u_Wxk5vgepL_HUPX2GBtB7md1_2chmBTB6WleYoIUeRveY_Jwbo4mkqFoM87TRvqoRAkNMwKqYHRz5CGjtkPRojZUxSXiITmvXaMrlIHd8PKGAwaAvU5vuOKNgYZZ-CycCfOvDbJhg08n/s1600/Bisnis.png
"
        alt="Bisnis"
      />
      <div class="pricing-title">Professional</div>
      <div class="pricing-tag">For Business</div>
      <div class="ferisp-price">Rp 999.000</div>
      <div class="service-info">
        <ul>
          <li>Documentation</li>
          <li>Premium Template</li>
          <li>Unlimited License</li>
          <li>Full Optimization</li>
          <li>6 Month Full Support</li>
          <li>Easy Customize</li>
          <li>1 Bonus Template</li>
        </ul>
      </div>
      <a
        class="ferisp-order-btn"
        href="https://www.ciacua.eu.org/"
        title="Professional"
        target="_blank"
        >Pesan Sekarang</a
      >
    </div>
  </div>
</div>

Penutup

Sekarang kamu udah punya halaman daftar harga keren dan responsif di Blogspot!, yeaahhh!. Kalau kamu pakai tema dari JetTheme kayak aku, tampilannya akan langsung nyatu dan rapi. Tapi kalau pakai tema lain, bisa jadi tampilannya agak beda, jadi silakan dicoba-coba dulu, ya.

Kalau kamu butuh bantu edit teks harga, ikon, deskripsi, atau link tombol "Pesan Sekarang", tinggal cari bagian ini di HTML:


<div class="pricing-title">Basic</div>

<div class="pricing-tag">30% off</div>

<div class="ferisp-price">Rp 180.000</div>

Update: 2025

Cua

Cua

Happy to write, play gaming, learn coding and learn everything that I read. Also always share knowledge.

Next Post Previous Post