Berbagi Info Seputar Android: Cara Membuat Tabel Harga Atau Barang Di Blog

Salam jumpa kembali, kali ini kami akan membagikan cara Membuat Tabel Harga Atau Barang Di Blog. Cara ini sebetulnya sangat mudah jika kita mau mencoba dan teliti.

Cara Membuat Tabel Harga Atau Barang Di Blog

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>



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

}