Membuat Tabel Harga Dg CSS Di Blog ~ New Trick

Membuat Tabel Harga Dg CSS Di Blog

Membuat Tabel Harga Dg CSS Di Blog - Kemarin saya telah menjelaskan cara upload file CSS, Javascript dan HTML ke Google Drive, dan sesuai janji saya untuk menampilkan hasil dari upload CSS ke Google Drive maka dalam artikel membuat tabel harga dg CSS di blog ini adalah salah satu tampilan berhasilnya kode CSS yang saya upload
Dan ini adalah kode CSS yang telah di parse/kompress kedalam bentuk link:

atau silahkan lihat kode template blog ini secara langsung..

Dan seperti yang telah saya jelaskan, tabel harga dengan CSS seperti pada tampilan berikut ini adalah hasilnya

Baca juga Cara membuat tabel

Untuk membuat tabel harga dg CSS tersebut, adalah cukup mudah dengan mengikuti beberapa panduan berikut ini:
Buka halaman pengeditan kode template blog sobat dan masukkan link berikut setelah <head> atau sebelum </head> tapi jangan di dalam kode CSS ya.. gak wajar soalnya.. :)

Jika tidak mau menyalin link kode CSS diatas, silahkan gunakan kode CSS tabel harga berikut ini sebelum kode ]]></b:skin> atau </style>

.tabel_harga {
	width:100%;
	margin-top:10px;
	float:left;
}
.tabel_harga ul { 
	list-style:none; 
	float:left; 
	width:147px; 
	margin:0; 
	padding:0;
	text-align:center;
	background-color:#FFF;
}
.tabel_harga ul:hover { 
	-webkit-transform: scale(1.1);
 	-moz-transform: scale(1.1);
 	-o-transform: scale(1.1);
	cursor:pointer;
}
.tabel_harga ul li {  
	border-bottom:1px dashed #cfd2d2;
	padding:5px 0;
	list-style-type: none;
}
.tabel_harga ul li:first-child { 
	font-size:18px;
	font-weight:bold;
}
.tabel_harga ul li:nth-child(2) { 
	background:#fbfbfb;
}
.tabel_harga ul li:nth-child(3) { 
	font-size:12px;
	font-weight:bold;
}
.tabel_harga ul li:nth-child(n+4) { 
	font-size:14px;
}
.tabel_harga ul li:last-child a { 
	padding:2px;
	margin:5px 0;
	background: #e74c3c;
	background: -moz-linear-gradient(top, #e74c3c 0%, #d1d360 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e74c3c), color-stop(100%,#d1d360));
	background: -webkit-linear-gradient(top, #e74c3c 0%,#d1d360 100%);
	background: -o-linear-gradient(top, #e74c3c 0%,#d1d360 100%);
	background: -ms-linear-gradient(top, #e74c3c 0%,#d1d360 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e74c3c', endColorstr='#d1d360',GradientType=0 );
	background: linear-gradient(top, #e74c3c 0%,#d1d360 100%);
	color:#000;
	font-weight:bold;
	display:block;
}
.tabel_harga ul li:last-child a:hover { 
	color:#e74c3c;
}

Simpan Template..

Setelah membuat code CSS untuk tabel harga diatas, selanjutnya salin kode HTML berikut untuk menampilkan tabel harga yang sebenarnya

<div class="tabel_harga">
<ul>
<li>Gratis</li>
<li>FREE</li>
<li>Tidak bisa Upgrade</li>
<li>Upload 1 file</li>
<li>Kapasitas 150MB</li>
<li>1 pengguna</li>
<li>Penggunaan terbatas</li>
<li>Keamanan tidak terjamin</li>
<li></li>
<li><a href="" class="buy_now">BELI</a></li>
</ul>
<ul>
<li>Standart</li>
<li>Rp.100.000</li>
<li>Upgrade Diskon 50%</li>
<li>Upload 100 file</li>
<li>Kapasitas 5GB</li>
<li>5 pengguna</li>
<li>Penggunaan tidak terbatas</li>
<li>Keamanan terjamin</li>
<li></li>
<li><a href="" class="buy_now">BELI</a></li>
</ul>
<ul>
<li>Premium</li>
<li>Rp.150.000</li>
<li>Upgrade diskon 75%</li>
<li>Upload 1000 file</li>
<li>Kapasitas 7GB</li>
<li>10 pengguna</li>
<li>Penggunaan tidak terbatas</li>
<li>Keamanan terjamin</li>
<li></li>
<li><a href="" class="buy_now">BELI</a></li>
</ul>
<ul>
<li>Pro</li>
<li>Rp.300.000</li>
<li>Upgrade gratis</li>
<li>Upload 1 Juta file</li>
<li>Kapasitas 20GB</li>
<li>Bebas pengguna</li>
<li>Penggunaan tidak terbatas</li>
<li>Keamanan terjamin</li>
<li></li>
<li><a href="" class="buy_now">BELI</a></li>
</ul>
</div>

Untuk meletakkan kode HTML tabel harga diatas sesuai dengan selera sobat, jika jenis blog adalah bisnis yang menguraikan beberapa poin untuk sebuah harga produk atau layanan, bisa dipasang di landing page atau laman blog. Dan pastinya kode HTML tabel harga diatas juga bisa di masukkan ke dalam artikel blog!!

Real Demo
Dan berikut hasil dari membuat tabel harga dg CSS di blog

Gratis
FREE
Tidak bisa Upgrade
Upload 1 file
Kapasitas 150MB
1 pengguna
Penggunaan terbatas
Keamanan tidak terjamin
GRATIS

Standart
Rp.100.000
Upgrade Diskon 50%
Upload 100 file
Kapasitas 5GB
5 pengguna
Penggunaan tidak terbatas
Keamanan terjamin
BELI

Premium
Rp.150.000
Upgrade diskon 75%
Upload 1000 file
Kapasitas 7GB
10 pengguna
Penggunaan tidak terbatas
Keamanan terjamin
BELI

Pro
Rp.300.000
Upgrade gratis
Upload 1 Juta file
Kapasitas 20GB
Bebas pengguna
Penggunaan tidak terbatas
Keamanan terjamin
BELI

Bagaimana? Tertarik untuk membuat tabel harga di blog?
Silahkan ikuti panduan diatas dan jika sobat menginginkan tampilan yang lebih silahkan edit sendiri dan tambahkan kode-kode warna yang sesuai dengan keinginan sobat dengan melihat kode warna disini

Okey, semoga dengan artikel ini bermanfaat dan jika ada kurang dimengerti mari kita diskusikan bersama dengan meninggalkan komentar untuk artikel ini, Membuat Tabel Harga Dg CSS Di Blog

New Trick

About

Membuat Tabel Harga Dg CSS Di Blog

Label

Like Us