Tabel Harga Dengan CSS
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:
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.. :)
Setelah membuat code CSS untuk tabel harga diatas, selanjutnya salin kode HTML berikut untuk menampilkan tabel harga yang sebenarnya
Real Demo
Dan berikut hasil dari membuat tabel harga dg CSS di blog
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
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
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 TemplateSetelah 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
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
Posting Komentar
komentar teratas
Terbaru dulu