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 Anda 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 Anda, 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 Anda menginginkan tampilan yang lebih silahkan edit sendiri dan tambahkan kode-kode warna yang sesuai dengan keinginan Anda 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

8 komentar:

Anonim29 Oktober 2013 pukul 23.50
Mesti masukkan css lagi ya mbak ke templatenya supaya hasilnya seperti tabel diatas.Alternatif lain selain memasukkan css ada mbak?
BalasHapus
Balasan
Uni_Jeh16 November 2013 pukul 15.34
kl bikin kategori harga gmana y.......
misalkan untuk mencari harga 1000-1200
maka secara otomatis barangnya yang keliatan kisaran harga segitu.....
tolong kirim ke khusni.hakim2013@gmail.com
tolong y gan n makasi......
BalasHapus
Balasan
Aroon11 Februari 2014 pukul 09.29
salam
gimana cara edit ukuran kolom/row di plugin tablepress?
BalasHapus
Balasan
ahmad rivai (UcingCorp)17 Mei 2014 pukul 23.07
ane coba dlu yah di blog
BalasHapus
Balasan
Syuhada0512 Mei 2015 pukul 10.45
Terima kasih, artikel anda sangat membantu saya..
BalasHapus
Balasan