Cara membuat tabel barang atau jasa

Tabel barang atau jasa untuk blog

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