Kamis, 11 Juli 2019

Filled Under:

Cara Menciptakan Daftar Harga Pada Postingan


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

Seperti gambar dibawah ini;



Mungkin dapat bermanfaat bagi sobat yang sedang jualan online atau menciptakan artikel harga barang dan lainnya.

Ok, sepakat kita bahas ya sobat.

Pertama-tama sobat login dulu ke akun blog sobat, kemuadia sobat pilih Tema - Edit HTML, setelah itu sobat cari arahan berikut : ]]></b:skin>  , semoga lebih gampang sobat gunakan fungsi CTR + F  . Setelah ketemu arahan diatas, sobat tempelkan arahan dibawah ini sempurna 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 adalah menciptakan postingan atau artikel daftar harga barang atau yang lainnya sesuai kebutuhan. Jangan lupa untuk merubah mode HTML.

Berikut arahan 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 dapat edit kata-katanya atau rubah sesuai kebutuhan sobat.

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

Terima kasih






0 komentar:

Posting Komentar