Selasa, 29 Oktober 2013

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:
<link href='https://googledrive.com/host/0B-jHSSDExNykOEQ0MC1QeGVJSUk' rel='stylesheet' type='text/css'/>
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

Membuat Tabel Harga Dg CSS Di Blog

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.. :)

<link href='https://googledrive.com/host/0B-jHSSDExNykOEQ0MC1QeGVJSUk' rel='stylesheet' type='text/css'/>

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

Membuat Tabel Harga Dg CSS Di Blog Rating: 4.5 Diposkan Oleh: ana sriwahyuni

8 komentar:

  1. Mesti masukkan css lagi ya mbak ke templatenya supaya hasilnya seperti tabel diatas.Alternatif lain selain memasukkan css ada mbak?

    BalasHapus
    Balasan
    1. masukkan link css diatas itu saja mas, biar ga' terlalu numpuk cssnya..

      Hapus
  2. 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
    1. untuk mencari yang spesifik seperti itu saya kira tidak bisa kecuali menggunakan plugin khusus untuk wordpress

      Hapus
  3. salam
    gimana cara edit ukuran kolom/row di plugin tablepress?

    BalasHapus
    Balasan
    1. kalau sebuah plugin memang agak sulit mas karena banyak kode CSS yang digunakan selain itu tapi untuk setiap tabel secara umum ukuran kolom ditentukan pada kode th, dan td
      dan setelah saya download pluginnya, kode th dan td terdapat pada elemen .tablepress th, .tablepress td

      Hapus
  4. Terima kasih, artikel anda sangat membantu saya..

    BalasHapus

Demi kenyamanan bersama, tidak boleh memasang link dalam bentuk apapun, komentar yang berisi link tidak akan diterbitkan
Terimakasih

Direktori

direktori weblogger
Direktori WeBlog Indonesia