Cara Membuat Daftar Harga Pada Postingan

Hallo sahabat blog!!
Pada postingan kali ini, Sundaku akan membahas bagaimana membuat Daftar Harga Beserta Tombol Pesanan Pada postingan artikel sobat.

Seperti gambar dibawah ini;

Mungkin bisa bermanfaat bagi sobat yang sedang jualan online atau membuat artikel harga barang dan lainnya.

Ok, baiklah kita bahas ya sobat.

Pertama-tama sobat login dulu ke akun blog sobat, kemuadia sobat pilih Tema - Edit HTML, setelah itu sobat cari kode berikut : ]]></b:skin>  , agar lebih mudah sobat gunakan fungsi CTR + F  . Setelah ketemu kode diatas, sobat tempelkan kode dibawah ini tepat datasnya.

*{box-sizing:border-box;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;margin:0;padding:0}
.flex-container{display:flex;padding:.5em}
.flex-item{flex:1;margin-right:1em;width:0}
.flex-item:last-child{margin-right:0}
.harga{border:1px solid #eee;list-style-type:none;margin:0;padding:0;transition:0.25s}
.harga:hover{box-shadow:0 8px 12px 0 rgba(0,0,0,0.2);transform:scale(1.025)}
.harga .harga-judul{background-color:#333;color:#fff;font-size:1.5em}
.harga .highlight{background-color:#29b6f6}
.harga li{background-color:#fff;list-style-type:none;border-bottom:1px solid #eee;padding:1.2em;text-align:center}
.harga .wira{background-color:#eee;font-size:1.25em}
button{background-color:#29b6f6;border:none;border-radius:.15em;color:#fff;cursor:pointer;padding:.75em 1.5em;font-size:1em}
@media only screen and (max-width:700px){button{padding:.75em}}
@media only screen and (max-width:600px){.flex-container{flex-wrap:wrap}.flex-item{flex:0 0 100%;margin-bottom:1em;width:100%}.harga:hover{box-shadow:none;transform:none}button{padding:.75em 1.5em}}

Setelah itu, simpan.

Langkah selanjutnya yaitu membuat postingan atau artikel daftar harga barang atau yang lainnya sesuai kebutuhan. Jangan lupa untuk merubah mode HTML.

Berikut kode Table nya dibawah ini:

<div class="flex-container">
  <div class="flex-item">
    <ul class="harga">
      <li class="harga-judul">Basic</li>
      <li class="wira">Rp. 50.000,-</li>
      <li>1 Design</li>
      <li>1 Konsep</li>
      <li>1x Revisi</li>
      <li>JPG & PNG</li>
      <li class="wira">
        <button>Pesan Sekarang</button>
      </li>
    </ul>
  </div>
  <div class="flex-item">
    <ul class="harga">
      <li class="harga-judul highlight">Pro</li>  
      <li class="wira">Rp. 150.000,-</li>
      <li>4 Design</li>
      <li>2 Konsep</li>
      <li>3x Revisi</li>
      <li>JPG, PNG & PDF</li>
      <li class="wira">
        <button>Pesan Sekarang</button>
      </li>
    </ul>
  </div>
  <div class="flex-item">
   <ul class="harga">
      <li class="harga-judul">Premium</li>
      <li class="wira">Rp. 300.000,-</li>
      <li>5 Design</li>
      <li>3 Konsep</li>
      <li>Unlimited Revisi</li>
      <li>JPG, PNG, & PDF</li>
      <li class="wira">
        <button>Pesan Sekarang</button>
      </li>
    </ul>
  </div>
</div>

Sobat bisa edit kata-katanya atau rubah sesuai kebutuhan sobat.

Baiklah sobat, semoga artikel ini bisa bermanfaat dan selamat mencoba.

Terima kasih