Cara Membuat Tabel Harga Responsive di Blog

Cara Membuat Tabel Harga Responsive di Blog
Kali ini saya akan bagikan cara membuat tabel harga di blog. Anda mungkin sudah pernah melihat tabel harga yang seringkali dijumpai saaat berkunjung ke blog penyedia jasa hosting dan domain.

Tabel tersebut dibuat untuk menarik minat pembeli dengan menampilkan harga dari beberapa produk sehingga akan terlihat perbandingan yang cukup berbeda dari setiap produk.

Selain itu tampilan tabel yang menarik dan jelas akan memudahkan pengunjung memahami penjelasan tentang fitur apa saja yang ada pada setiap produk. Tidak hanya itu saja, terdapat diskon juga yang akan semakin menambah minat pembeli.

Jika Anda penasaran seperti apa tampilan tabel harga, bisa dilihat pada gambar di atas.

Menarikkan tampilannya!

Cara Membuat Tabel Harga Responsive di Blog


Jika Anda tertarik untuk menggunakan tabel harga ini, Anda dapat mengikut cara membuatnya di blog pada panduan yang ada di bawah ini. Tapi sebelum itu ada beberapa hal yang sebaiknya Anda tahu.

Tampilan tabel harga cukup besar, jadi jika Anda menggunakan template yang berukuran kecil maka akan terlihat berantakan. Tapi ini bisa diakali dengan menampilkan hanya beberapa tabel saja misalnya satu, dua atau tiga sesuai dengan ukuran lebar template.

Cara Memasang


Login ke Blogger > masuk ke menu Tema > klik Edit HTML. Kemudian tambahkan kode di bawah ini tepat di atas atau sebelum kode ]]></b:skin> atau </style>.

/* CSS Tabel Harga */
.tabel-produk{font-family:'Source Sans Pro',Arial,sans-serif;color:#000;text-align:left;font-size:16px;width:100%;max-width:1000px;margin:30px 10px}
.tabel-produk img{position:absolute;left:0;top:0;height:100%;z-index:-1}
.tabel-produk .daftar-produk{margin:0 0.5%;width:24%;padding-top:10px;position:relative;float:left;overflow:hidden;background-color:#fff;border-radius:8px;box-shadow:0 6px 20px rgba(17,26,104,.15);}
.tabel-produk .daftar-produk:hover i,.tabel-produk .daftar-produk.hover i{-webkit-transform:scale(1.2);transform:scale(1.2)}
.tabel-produk *{-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-transition:all 0.25s ease-out;transition:all 0.25s ease-out}
.tabel-produk header{color:#000}
.tabel-produk .nama-produk{line-height:60px;position:relative;margin:0;padding:0 20px;font-size:1.6em;letter-spacing:2px;font-weight:700}
.tabel-produk .nama-produk:after{position:absolute;content:'';top:100%;left:20px;width:30px;height:3px;background-color:#000}
.tabel-produk .harga-produk{padding:0 20px;margin:0}
.tabel-produk .biaya-produk{font-weight:400;font-size:2.8em;margin:10px 0;display:inline-block}
.tabel-produk .tipe-produk{opacity:0.8;font-size:0.7em;text-transform:uppercase}
.tabel-produk .fitur-produk{padding:0 0 20px;margin:0;list-style:outside none none;font-size:0.9em}
.tabel-produk .fitur-produk li{padding:8px 20px}
.tabel-produk .fitur-produk i{margin-right:8px;color:rgba(0,0,0,.8)}
.tabel-produk .pilih-produk{border-top:1px solid rgba(0,0,0,0.2);padding:20px;text-align:center}
.tabel-produk .pilih-produk a{background-color:#21aef9;color:#ffffff;text-decoration:none;padding:12px 20px;font-size:0.75em;font-weight:600;border-radius:8px;text-transform:uppercase;letter-spacing:4px;display:inline-block}
.tabel-produk .pilih-produk a:hover{background-color:#1b8ad8!important}
.tabel-produk .featured{margin-top:-10px;z-index:1;border-radius:8px;border:2px solid #21aef9;background-color:#21aef9}
.tabel-produk .featured .pilih-produk{padding:30px 20px}
.tabel-produk .featured .pilih-produk a{background-color:#10507e}
@media only screen and (max-width:767px){.tabel-produk .daftar-produk{width:49%;margin:0.5%}.tabel-produk .nama-produk,.tabel-produk .pilih-produk a{-webkit-transform:translateY(0);transform:translateY(0)}.tabel-produk .pilih-produk,.tabel-produk .featured .pilih-produk{padding:20px}.tabel-produk .featured{margin-top:0}.tabel-produk .featured header{line-height:70px}}
@media only screen and (max-width:440px){.tabel-produk .daftar-produk{margin:0.5% 0;width:100%}}

Klik Simpan tema untuk menyimpan pengaturan.

Cara Menggunakan


Setelah mengatur pengaturan kode CSS maka langkah yang harus dilakukan adalah menggunakan tabel harga pada halaman atau postingan artikel.

Masuk ke menu Halaman > Tambahkan Halaman Baru > copy kode di bawah ini dan letakan pada tab HTML.

<center>
<div class="tabel-produk">
   <div class="daftar-produk">
      <header>
         <h4 class="nama-produk">
            Starter
         </h4>
         <div class="harga-produk"><span class="biaya-produk">$9</span><span class="tipe-produk">/month</span></div>
      </header>
      <ul class="fitur-produk">
         <li><i class="fa fa-check"> </i>5GB Linux Web Space</li>
         <li><i class="fa fa-check"> </i>5 MySQL Databases</li>
         <li><i class="fa fa-check"> </i>Unlimited Email</li>
         <li><i class="fa fa-check"> </i>250Gb mo Transfer</li>
         <li><i class="fa fa-check"> </i>24/7 Tech Support</li>
         <li><i class="fa fa-check"> </i>Daily Backups</li>
      </ul>
      <div class="pilih-produk"><a href="">Select Plan</a></div>
   </div>
   <div class="daftar-produk">
      <header>
         <h4 class="nama-produk">
            Basic
         </h4>
         <div class="harga-produk"><span class="biaya-produk">$29</span><span class="tipe-produk">/month</span></div>
      </header>
      <ul class="fitur-produk">
         <li><i class="fa fa-check"> </i>10GB Linux Web Space</li>
         <li><i class="fa fa-check"> </i>10 MySQL Databases</li>
         <li><i class="fa fa-check"> </i>Unlimited Email</li>
         <li><i class="fa fa-check"> </i>500Gb mo Transfer</li>
         <li><i class="fa fa-check"> </i>24/7 Tech Support</li>
         <li><i class="fa fa-check"> </i>Daily Backups</li>
      </ul>
      <div class="pilih-produk"><a href="">Select Plan</a></div>
   </div>
   <div class="daftar-produk featured">
      <header>
         <h4 class="nama-produk">
            Professional
         </h4>
         <div class="harga-produk"><span class="biaya-produk">$49</span><span class="tipe-produk">/month</span></div>
      </header>
      <ul class="fitur-produk">
         <li><i class="fa fa-check"> </i>25GB Linux Web Space</li>
         <li><i class="fa fa-check"> </i>25 MySQL Databases</li>
         <li><i class="fa fa-check"> </i>Unlimited Email</li>
         <li><i class="fa fa-check"> </i>2000Gb mo Transfer</li>
         <li><i class="fa fa-check"> </i>24/7 Tech Support</li>
         <li><i class="fa fa-check"> </i>Daily Backups</li>
      </ul>
      <div class="pilih-produk"><a href="">Select Plan</a></div>
   </div>
   <div class="daftar-produk">
      <header>
         <h4 class="nama-produk">
            Ultra
         </h4>
         <div class="harga-produk"><span class="biaya-produk">$99</span><span class="tipe-produk">/month</span></div>
      </header>
      <ul class="fitur-produk">
         <li><i class="fa fa-check"> </i>100GB Linux Web Space</li>
         <li><i class="fa fa-check"> </i>Unlimited MySQL Databases</li>
         <li><i class="fa fa-check"> </i>Unlimited Email</li>
         <li><i class="fa fa-check"> </i>10000Gb mo Transfer</li>
         <li><i class="fa fa-check"> </i>24/7 Tech Support</li>
         <li><i class="fa fa-check"> </i>Daily Backups</li>
      </ul>
      <div class="pilih-produk"><a href="">Select Plan</a></div>
   </div>
</div>
</center>

<div class="daftar-produk featured"> adalah kotak yang diunggulkan (berwarna biru).

Checklist Tidak Muncul


Jika checklist tidak muncul, maka tambahkan kode di bawah ini tepat di atas kode </body>. Cara pemasangannya seperti pada langkah paling atas.

<link href='//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet' type='text/css'/>

Tulis Komentar

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel