Cara Mengonfigurasi Pricing Section

Ishar Yulian Satriani

March 01, 2023

Updated: May 22, 2023

Pricing Section adalah bagian dalam sebuah dokumen atau proposal yang menjelaskan tentang harga atau biaya yang terkait dengan produk atau layanan yang ditawarkan.

Bagian ini memberikan informasi terkait dengan harga, paket, opsi pembayaran, kebijakan pengembalian barang, dan syarat-syarat lainnya yang berkaitan dengan aspek keuangan produk atau layanan tersebut.

Tujuan dari bagian Pricing adalah memberikan transparansi kepada calon pelanggan atau mitra bisnis tentang biaya yang terkait dengan produk atau layanan yang ditawarkan.

Cara Mengonfigurasi Pricing Section

Masuk ke Dashboard Blogger > pilih menu Tata Letak.
Cari bagian yang berjudul Top Section.
Klik tombol edit (ikon pensil) di Gadget Pricing Section (Gadget HTML/JavaScript).
Akan muncul pop up konfigurasi Widget.
Pada kolom Judul, isikan sesuai keinginan (Opsional).

Pada kolom Konten isikan kode di bawah ini:

<div class="pricing_card">
  <h2>Pricing</h2>
  <div class="pricing_card_inner">
    <div class="pricing_card_start">
      <h3 class="hidden">Benefits you get</h3>
      <!-- Benefit -->
      <div class="pricing_card_benefit hidden" id="item1">
        <ul>
          <li><div class="icon"><svg viewbox="0 0 24 24"><path d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></div><div class="text">Full Version Bundle</div></li>
          <li><div class="icon"><svg viewbox="0 0 24 24"><path d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></div><div class="text">Suitable for multiple blogs</div></li>
          <li><div class="icon"><svg viewbox="0 0 24 24"><path d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></div><div class="text">Active period : <b>lifetime</b></div></li>
          <li><div class="icon"><svg viewbox="0 0 24 24"><path d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></div><div class="text">Update : <b>lifetime</b></div></li>
          <li><div class="icon"><svg viewbox="0 0 24 24"><path d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></div><div class="text">Full support</div></li>
          <li><div class="icon"><svg viewbox="0 0 24 24"><path d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></div><div class="text">Custom footer credit</div></li>
        </ul>
      </div>
      <!-- Benefit -->
      <div class="pricing_card_benefit hidden" id="item2">
        <ul>
          <li><div class="icon"><svg viewbox="0 0 24 24"><path d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></div><div class="text">Full Version Bundle</div></li>
          <li><div class="icon"><svg viewbox="0 0 24 24"><path d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></div><div class="text">Suitable for multiple blogs</div></li>
          <li><div class="icon"><svg viewbox="0 0 24 24"><path d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></div><div class="text">Active period : <b>lifetime</b></div></li>
          <li><div class="icon"><svg viewbox="0 0 24 24"><path d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></div><div class="text">Update : <b>lifetime</b></div></li>
          <li><div class="icon"><svg viewbox="0 0 24 24"><path d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></div><div class="text">Open source script</div></li>
          <li><div class="icon"><svg viewbox="0 0 24 24"><path d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></div><div class="text">Full support</div></li>
          <li><div class="icon"><svg viewbox="0 0 24 24"><path d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></div><div class="text">Custom footer credit</div></li>
        </ul>
      </div>
      <!-- Benefit -->
      <div class="pricing_card_benefit hidden" id="item3">
        <ul>
          <li><div class="icon"><svg viewbox="0 0 24 24"><path d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></div><div class="text">Full Version Bundle</div></li>
          <li><div class="icon"><svg viewbox="0 0 24 24"><path d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></div><div class="text">Suitable for multiple blogs</div></li>
          <li><div class="icon"><svg viewbox="0 0 24 24"><path d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></div><div class="text">Suitable for blog service business</div></li>
          <li><div class="icon"><svg viewbox="0 0 24 24"><path d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></div><div class="text">Active period : <b>lifetime</b></div></li>
          <li><div class="icon"><svg viewbox="0 0 24 24"><path d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></div><div class="text">Update : <b>lifetime</b></div></li>
          <li><div class="icon"><svg viewbox="0 0 24 24"><path d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></div><div class="text">Open source script</div></li>
          <li><div class="icon"><svg viewbox="0 0 24 24"><path d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></div><div class="text">Full support</div></li>
          <li><div class="icon"><svg viewbox="0 0 24 24"><path d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></div><div class="text">Custom footer credit</div></li>
        </ul>
      </div>

      <div class="pricing_blank">
        <div class="icon"><svg viewbox="0 0 24 24"><path d="M23.5 17L18.5 22L15 18.5L16.5 17L18.5 19L22 15.5L23.5 17M6 2C4.89 2 4 2.9 4 4V20C4 21.11 4.89 22 6 22H13.81C13.45 21.38 13.2 20.7 13.08 20H6V4H13V9H18V13.08C18.33 13.03 18.67 13 19 13C19.34 13 19.67 13.03 20 13.08V8L14 2M8 12V14H16V12M8 16V18H13V16Z"/></path></svg></div>
      </div>
    </div>
    <div class="pricing_card_end">
      <ul>
        <!-- Item -->
        <li data-target="item1" data-href="https://www.gilatemax.com/2022/06/vulia-theme-premium-blogger-template.html">
          <div class="pricing_card_left"><svg viewbox="0 0 24 24"><path d="M12,20A8,8 0 0,1 4,12A8,8 0 0,1 12,4A8,8 0 0,1 20,12A8,8 0 0,1 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z"/><path d="M12 2C6.5 2 2 6.5 2 12S6.5 22 12 22 22 17.5 22 12 17.5 2 12 2M10 17L5 12L6.41 10.59L10 14.17L17.59 6.58L19 8L10 17Z"/></path></path></svg></div>
          <div class="pricing_card_center">
            <h3>Regular</h3>
            <p>Save 10%</p>
          </div>
          <div class="pricing_card_right"><span>IDR 200K</span><span>lifetime</span></div>
        </li>
        <!-- Item -->
        <li data-target="item2" data-href="">
          <div class="pricing_card_left"><svg viewbox="0 0 24 24"><path d="M12,20A8,8 0 0,1 4,12A8,8 0 0,1 12,4A8,8 0 0,1 20,12A8,8 0 0,1 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z"/><path d="M12 2C6.5 2 2 6.5 2 12S6.5 22 12 22 22 17.5 22 12 17.5 2 12 2M10 17L5 12L6.41 10.59L10 14.17L17.59 6.58L19 8L10 17Z"/></path></path></svg></div>
          <div class="pricing_card_center">
            <h3>Pro</h3>
            <p>Save 10%</p>
          </div>
          <div class="pricing_card_right"><span>IDR 599K</span><span>lifetime</span></div>
        </li>
        <!-- Item -->
        <li data-target="item3" data-href="">
          <div class="pricing_card_left"><svg viewbox="0 0 24 24"><path d="M12,20A8,8 0 0,1 4,12A8,8 0 0,1 12,4A8,8 0 0,1 20,12A8,8 0 0,1 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z"/><path d="M12 2C6.5 2 2 6.5 2 12S6.5 22 12 22 22 17.5 22 12 17.5 2 12 2M10 17L5 12L6.41 10.59L10 14.17L17.59 6.58L19 8L10 17Z"/></path></path></svg></div>
          <div class="pricing_card_center">
            <h3>Business</h3>
            <p>Save 10%</p>
          </div>
          <div class="pricing_card_right"><span>IDR 1.499K</span><span>lifetime</span></div>
        </li>
      </ul>
    </div>
  </div>
  <div class="pricing_button"><a class="vulia_theme_button small elevated filled fwm disabled" href="#">Get Now</a></div>
</div>

Setelah semuanya dikonfigurasi, klik tombol SIMPAN di bagian bawah.
Selesai

Jika Anda ingin melaporkan beberapa bug, Anda dapat menuliskannya di bagian komentar pada halaman Bug Report dan jika Anda ingin meminta fitur baru atau ingin memberikan umpan balik, silakan tuliskan di bagian komentar pada halaman Request dan Feedback.