Cara MMembuat Tabel Harga Barang Atau Jasa Di Blogger

Ok sobat pada kesempatan ini seocips akan membagikan 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.

Ok langsung saja dibawah ini adalah kode HTML, script dan CSS yang telah digabungkan, jika sobat 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;
}



Nah selamat mencoba.
2 Komentar untuk "Membuat Tabel Harga Barang Atau Jasa Di Blog"

wah hebat juga ya bisa ternyata di blog yg gratisan ;-)

Iya sob, hanya untuk tabelnya saja..