Cara membuat Tabel Harga Barang atau Jasa di Blog (Pricing Table)

HaiSob apa kabar? Pada kesempatan ini saya akan membagikan cara membuat tabel harga barang atau jasa di Blog (Pricing table).

Biasanya tabel harga seperti ini dipasang pada Blog/Web penyedia layanan Hosting, domain dan lain sebagainya, tapi bisa juga kamu gunakan jika ada jasa yang ingin kamu jual (asal jangan jasa yang itu yah sob.. 😆).

Pricing Table


Cara membuat Tabel Harga Barang atau Jasa di Blogger (Pricing Table)
Pricing Table




Di bawah ini adalah HTML, Script dan CSS yang telah digabungkan, jika sobat ingin memisah-misahkannya, silahkan saja, dan jangan lupa edit tulisannya sesuai dengan produk yang sobat dagangkan.

HTML JavaScript

<ul class="pricing_table">
  <li>
    <h3>Starter</h3>
    <div class="price_body">
      <div class="price">
        Free
      </div>
    </div>
    <div class="features">
      <ul>
        <li>Premium Profile Listing</li>
        <li>Unlimited File Access</li>
        <li>Free Appointments</li>
        <li><strong>5 Bonus Points</strong> every month</li>
        <li>Customizable Profile Page</li>
        <li><strong>2 months</strong> support</li>
      </ul>
    </div>
    <div class="footer">
      <a href="#" class="action_button">Get Started</a>
    </div>
  </li>
  <!-- Active/Hover styles -->
  <li class="active">
    <h3>Basic</h3>
    <div class="price_body">
      <div class="price">
        <span class="price_figure">$24</span>
        <span class="price_term">per month</span>
      </div>
    </div>
    <div class="features">
      <ul>
        <li>Premium Profile Listing</li>
        <li>Unlimited File Access</li>
        <li>Free Appointments</li>
        <li><strong>20 Bonus Points</strong> every month</li>
        <li>Customizable Profile Page</li>
        <li><strong>6 months</strong> support</li>
      </ul>
    </div>
    <div class="footer">
      <a href="#" class="action_button">Get Started</a>
    </div>
  </li>
  <li>
    <h3>Premium</h3>
    <div class="price_body">
      <div class="price">
        <span class="price_figure">$49</span>
        <span class="price_term">per month</span>
      </div>
    </div>
    <div class="features">
      <ul>
        <li>Premium Profile Listing</li>
        <li>Unlimited File Access</li>
        <li>Free Appointments</li>
        <li><strong>50 Bonus Points</strong> every month</li>
        <li>Customizable Profile Page</li>
        <li><strong>Lifetime</strong> support</li>
      </ul>
    </div>
    <div class="footer">
      <a href="#" class="action_button">Get Started</a>
    </div>
  </li>
 <div class="clr"></div>
</ul>
<script src="https://sites.google.com/site/seocips/seocips-script/prefixfree.js" type="text/javascript"></script>

CSS

@import url(http://fonts.googleapis.com/css?family=Ubuntu);
* {
  margin: 0;
  padding: 0;
}
.pricing_table {
  width: 600px;
  color: #fff;
  font-size: 12px;
  font-family: Ubuntu, arial, verdana;
  line-height: 150%;
  text-align: center;
  margin: 20px auto 0 auto;
}
.pricing_table>li {
  background: linear-gradient(#666, #333);
  width: 33.33%;
  float: left;
  list-style-type: none;
  transition: all 0.2s;
}
.pricing_table>li.active {
  background: linear-gradient(#F9B84A, #DB7224);
  transform: scale(1.03);
  box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.5);
}
.pricing_table h3 {
  text-transform: uppercase;
  padding: 15px 0;
  font-size: 14px;
  font-weight: bold;
}
.pricing_table .price_body {
  width: 125px;
  height: 125px;
  margin: 0 auto 15px auto;
  border: 2px solid #fff;
  border-radius: 100%;
  display: table;
}
.pricing_table .price {
  font-size: 30px;
  font-weight: bold;
  text-transform: uppercase;
  vertical-align: middle;
  display: table-cell;
}
.pricing_table .price .price_figure {
  display: block;
}
.pricing_table .price .price_term {
  font-size: 11px;
  font-weight: normal;
}
.pricing_table .features li {
  list-style-type: none;
  padding: 5px 0;
}
.pricing_table .footer {
  padding: 10px;
  background: #333;
  margin-top: 10px;
}
.pricing_table .footer .action_button {
  color: #fff;
  font-size: 11px;
  display: inline-block;
  text-decoration: none;
  font-weight: bold;
  background: #000;
  padding: 4px 20px;
  border-radius: 15px;
  background: linear-gradient(#666, #333);
}
.pricing_table li.active .footer .action_button {
  background: linear-gradient(#F9B84A, #DB7224);
}
.clr {
  clear: both;
}
Sekian, cara membuat Tabel Harga Barang atau Jasa di Blog (Pricing Table), semoga bermanfaat.