Cara membuat halaman daftar harga blogspot

Cua

23 Jun, 2023

Cara membuat halaman daftar harga blogspot

Halaman daftar harga atau tabel daftar paket harga yang sering di lihat di website yang menjual jasa servis atau menjual produk pasti udah pada tau kan!. Dan di artikel ini aku pengen kasi Cara membuat halaman daftar harga terutama untuk di blogspot atau blogger. Daftar harga ini sangat cocok untuk kamu yang yang punya usaha atau bisni di kalangan online.

Seringnya daftar harga ini di pakai untuk melihatkan harga dan deskripsi dari produk jasa yang di tawarkan, selain itu halaman daftar harga ini juga dipakai untuk landing pange affiliator yang menjual barang dagangan nya secara mandiri. Perlu kamu tau juga halaman daftar harga ini punya kelebihan dan kekurangan nya jadi patut untuk kamu pertimbangkan.

kekurangan dan kelebihan halaman daftar harga di blogspot

Kekurangan:

Render halaman blog jadi lambat
editnya cuma bisa di mode html

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

Jika kamu udah memutuskan untuk membutnya, Maka itu, aku mau bantu kamu memperlihatkan cara membuat halaman daftar harga untuk blogspot blogger. Berikut detailnya:

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.

Pertama edit bagian CSS nya dulu di template blog kamu, caranya:

Buka dasbor bogger kamu
Pilih tema di menu sebelah kiri
Klik tanda panah pada tombol sesuaikan dan pilih Edit HTML

Kalo sudah masuk di edit htlm tema, "Salin dan tempel kode css" berikut di atas ]]></b:skin>:

.pricing-section {font-family:&#039;Google Sans&#039;, 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}
.pricing-section i {font-size:3rem}
.ferisp-price {font-weight:700;font-size:22px}
.service-info {opacity:.9;color:#fff}
.ferisp-2-column .pricing-ferisp-column {width:50%}
.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}
.pricing-ferisp-column:nth-child(1):hover {border-color:#f80074}
.pricing-ferisp-column:nth-child(2):hover {border-color:#f80074}
.pricing-ferisp-column:nth-child(3):hover {border-color:#f80074}
.pricing-ferisp-column:nth-child(1) .pricing-tag,.pricing-ferisp-column:nth-child(1) a.ferisp-order-btn {background:#2b73f6}
.pricing-ferisp-column:nth-child(2) .pricing-tag,.pricing-ferisp-column:nth-child(2) a.ferisp-order-btn {background:#2b73f6}
.pricing-ferisp-column:nth-child(3) .pricing-tag,.pricing-ferisp-column:nth-child(3) a.ferisp-order-btn {background:#2b73f6}

@media screen and (max-width:580px) {
  .pricing-ferisp-column, .ferisp-2-column, .pricing-ferisp-column {width:auto}
  .pricing-container {display:block}
}

Kemudian tekan save di kanan atas

Nah, proses ~~pertama~~ selesai. Lanjut ke proses kedua tambahkan script html di halaman untuk daftar harga, berikut caranya:

Pada menu dasbor blogger pilih "halaman"
Lalu pilih tombo buat halaman baru di tombol + halaman baru
Buat judul halaman baru
Ganti tampilan menulis ke tampilan 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>

Lalu Tekan tomol publikasikan

Demo

Sekarang halaman daftar harga di blogspot kamu sudah jadi, untuk demo-nya kamu bisa liat seperti gambar di bawah berikut ini:

Note

Jika kamu ingin merubah icon, dekskipsi dan link untuk mengarahkan ke produkjualn kamu kamu bisa chek kode berikut:

Link untuk merubah icon

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVrqPVatpPJc2pUBrnYuDiciVU-1lB9PLN8X2issxGwVukEYokVYF-uDATVzVkRiZB4uB7My-qof2vTlH_KXzrF-dtOVjJVdA-aTQ861KFSmHGCqVbyZR6vOyknF00hfCwxpvtvw_iiCMLpaVMBeF17lVatUFlzhWMcVYD3RqFgx_QXd1WDpJsq7poTOWX/s1600/Basic.png

Yang ku kasi tanda, untuk edit deskripsi

<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>

Yang ada tanda pagar kamu bisa ganti dengan link

class="ferisp-order-btn"
        href="#"

Terakhir

itulah tadi Cara membuat halaman daftar harga di blogsot blogspot, kebetulan aku pakai template tema dari jettheme jadi script kode nya resposip. Aku juga gak bisa mastikan cara ini bisa di pakai pada tema kamu, namun apa salah nya untuk mencoba. Jika ada pertanyaan tulis aja di komentar ntar kita diskusi bareng-bareng.