---

Cara membuat tabel harga barang atau jasa di Blog Blogger dengan CSS3. Biasanya tabel harga seperti ini dipasang pada Blog/Web penyedia layanan Hosting, domain dan lain sebagainya.

Dibawah ini adalah kode HTML, script dan CSS yang telah digabungkan, jika Agan ingin memisah-misahkannya , silahkan, dan jangan lupa edit tulisannya sesuai dengan produk yang sobat dagangkan.

HTML & SCRIPT

<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;
}

Selamat mencoba.

Salam blogger dari motivator seo

---