Membuat Widget Tabel Harga Paket Hanya dengan CSS
Membuat Widget Tabel Harga Paket dengan CSS
Tabel harga pembelian atau para Blogger biasanya menyebut pricing table adalah sebuah tabel yang memuat harga dari suatu paket atau produk. Untuk lebih jelasnya silahkan anda lihat gambar diatas.

Tabel ini sangat cocok untuk anda yang memiliki usaha bisnis, apapun itu. Pelanggan bisa memilih paket atau barang yang anda sediakan sesuai dengan budget yang ia punya. Dari paket atau produk yang paling rendah harga dan kualitasnya, sampai yang paling mahal dan tinggi kualitas dan fiturnya.

Untuk demonya silahkan lihat disini.

DEMO

Berikut beberapa fitur yang tersedia pada tabel ini:

  1. Sangat ringan
    • Tanpa gambar
    • Tanpa Javascript (Pure CSS)
    • Tidak menggunakan font tambahan / eksternal
  2. SEO Friendly (menggunakan tag heading)
  3. Responsive / Mobile Friendly
  4. Terdapat 4 pilihan paket, beserta 1 paket dominan (paling sering dibeli)

Langsung saja, berikut cara pembuatannya.

Langkah Awal: Pemasangan CSS


Bila anda ingin memasukkan tabel seperti ini hanya 1-5 kali saja, saya sarankan untuk memasukkan kode CSSnya manual di setiap postingan. Tetapi, bila anda ingin menggunakan tabelnya berulang-ulang, ikuti saja langkah yang saya berikan.

1. Pertama, buka blogger.com > Tema > Edit HTML.

2. Lalu, cari kode </head> , masukkan kode ini tepat diatasnya.

<style>

#pricing-table {
 text-align: center;
}

#pricing-table .plan {
 font: 12px 'Lucida Sans', 'trebuchet MS', Arial, Helvetica;
 text-shadow: 0 1px rgba(255,255,255,.8);       
 background: #fff;     
 border: 1px solid #ddd;
 color: #333;
 padding: 20px;
 width: 180px;   
 float: left;
 position: relative;
}

#pricing-table #most-popular {
 z-index: 2;
 top: -13px;
 border-width: 3px;
 padding: 30px 20px;
 -moz-border-radius: 5px;
 -webkit-border-radius: 5px;
 border-radius: 5px;
 -moz-box-shadow: 20px 0 10px -10px rgba(0, 0, 0, .15), -20px 0 10px -10px rgba(0, 0, 0, .15);
 -webkit-box-shadow: 20px 0 10px -10px rgba(0, 0, 0, .15), -20px 0 10px -10px rgba(0, 0, 0, .15);
 box-shadow: 20px 0 10px -10px rgba(0, 0, 0, .15), -20px 0 10px -10px rgba(0, 0, 0, .15);   
}

#pricing-table .plan:nth-child(1) {
 -moz-border-radius: 5px 0 0 5px;
 -webkit-border-radius: 5px 0 0 5px;
 border-radius: 5px 0 0 5px;       
}

#pricing-table .plan:nth-child(4) {
 -moz-border-radius: 0 5px 5px 0;
 -webkit-border-radius: 0 5px 5px 0;
 border-radius: 0 5px 5px 0;       
}

/* --------------- */

#pricing-table h3 {
 font-size: 20px;
 font-weight: normal;
 padding: 20px;
 margin: -20px -20px 50px -20px;
 background-color: #eee;
 background-image: -moz-linear-gradient(#fff,#eee);
 background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#eee));   
 background-image: -webkit-linear-gradient(#fff, #eee);
 background-image: -o-linear-gradient(#fff, #eee);
 background-image: -ms-linear-gradient(#fff, #eee);
 background-image: linear-gradient(#fff, #eee);
}

#pricing-table #most-popular h3 {
 background-color: #ddd;
 background-image: -moz-linear-gradient(#eee,#ddd);
 background-image: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#ddd));   
 background-image: -webkit-linear-gradient(#eee, #ddd);
 background-image: -o-linear-gradient(#eee, #ddd);
 background-image: -ms-linear-gradient(#eee, #ddd);
 background-image: linear-gradient(#eee, #ddd);
 margin-top: -30px;
 padding-top: 30px;
 -moz-border-radius: 5px 5px 0 0;
 -webkit-border-radius: 5px 5px 0 0;
 border-radius: 5px 5px 0 0;  
}

#pricing-table .plan:nth-child(1) h3 {
 -moz-border-radius: 5px 0 0 0;
 -webkit-border-radius: 5px 0 0 0;
 border-radius: 5px 0 0 0;      
}

#pricing-table .plan:nth-child(4) h3 {
 -moz-border-radius: 0 5px 0 0;
 -webkit-border-radius: 0 5px 0 0;
 border-radius: 0 5px 0 0;      
}

#pricing-table h3 span {
 display: block;
 font: bold 25px/85px Georgia, Serif;
 color: #777;
 background: #fff;
 border: 5px solid #fff;
 height: 100px;
 width: 100px;
 margin: 10px auto -65px;
 -moz-border-radius: 100px;
 -webkit-border-radius: 100px;
 border-radius: 100px;
 -moz-box-shadow: 0 5px 20px #ddd inset, 0 3px 0 #999 inset;
 -webkit-box-shadow: 0 5px 20px #ddd inset, 0 3px 0 #999 inset;
 box-shadow: 0 5px 20px #ddd inset, 0 3px 0 #999 inset;
}

/* --------------- */

#pricing-table ul {
 margin: 20px 0 0 0;
 padding: 0;
 list-style: none;
}

#pricing-table li {
 border-top: 1px solid #ddd;
 padding: 10px 0;
}

/* --------------- */

#pricing-table .signup {
 position: relative;
 padding: 8px 20px;
 margin: 20px 0 0 0; 
 color: #fff;
 font: bold 14px Arial, Helvetica;
 text-transform: uppercase;
 text-decoration: none;
 display: inline-block;      
 background-color: #72ce3f;
 background-image: -moz-linear-gradient(#72ce3f, #62bc30);
 background-image: -webkit-gradient(linear, left top, left bottom, from(#72ce3f), to(#62bc30));   
 background-image: -webkit-linear-gradient(#72ce3f, #62bc30);
 background-image: -o-linear-gradient(#72ce3f, #62bc30);
 background-image: -ms-linear-gradient(#72ce3f, #62bc30);
 background-image: linear-gradient(#72ce3f, #62bc30);
 -moz-border-radius: 3px;
 -webkit-border-radius: 3px;
 border-radius: 3px;    
 text-shadow: 0 1px 0 rgba(0,0,0,.3);       
 -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, .5), 0 2px 0 rgba(0, 0, 0, .7);
 -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, .5), 0 2px 0 rgba(0, 0, 0, .7);
 box-shadow: 0 1px 0 rgba(255, 255, 255, .5), 0 2px 0 rgba(0, 0, 0, .7);
}

#pricing-table .signup:hover {
 background-color: #62bc30;
 background-image: -moz-linear-gradient(#62bc30, #72ce3f);
 background-image: -webkit-gradient(linear, left top, left bottom, from(#62bc30), to(#72ce3f));     
 background-image: -webkit-linear-gradient(#62bc30, #72ce3f);
 background-image: -o-linear-gradient(#62bc30, #72ce3f);
 background-image: -ms-linear-gradient(#62bc30, #72ce3f);
 background-image: linear-gradient(#62bc30, #72ce3f);
}

#pricing-table .signup:active, #pricing-table .signup:focus {
 background: #62bc30;      
 top: 2px;
 -moz-box-shadow: 0 0 3px rgba(0, 0, 0, .7) inset;
 -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, .7) inset;
 box-shadow: 0 0 3px rgba(0, 0, 0, .7) inset;
}

/* --------------- */

.clear:before, .clear:after {
  content:"";
  display:table
}

.clear:after {
  clear:both
}

</style>

3. Lalu, simpan template anda.

Langkah Terakhir: Pemasangan Widget


Silahkan anda cari dimana anda ingin menempatkan widget ini. Entah di sidebar, footer, atau dalam postingan. Kali ini saya akan memberikan contoh memasukannya di dalam postingan.

1. Pertama, buka blogger.com > Pos > Entri Baru

2. Lalu, tekan mode HTML (bukan compose). Tombol ini berada di bawah judul blog anda pada menu editor postingan.

3. Pastekan kode ini didalamnya.

<div class="clear" id="pricing-table">
<div class="plan">
<h3>
Orang Tajir<span class="harga">$59</span></h3>
<a class="signup" href="http://kodejarwo.blogspot.co.id/" rel="nofollow" target="_blank">Sign up</a>        
        <br />
<ul>
<li><b>10GB</b> Disk Space</li>
<li><b>100GB</b> Monthly Bandwidth</li>
<li><b>20</b> Email Accounts</li>
<li><b>Unlimited</b> subdomains</li>
</ul>
</div>
<div class="plan" id="most-popular">
<h3>
Okelah<span class="harga">$29</span></h3>
<a class="signup" href="http://kodejarwo.blogspot.co.id/" rel="nofollow" target="_blank">Sign up</a>       
        <br />
<ul>
<li><b>5GB</b> Disk Space</li>
<li><b>50GB</b> Monthly Bandwidth</li>
<li><b>10</b> Email Accounts</li>
<li><b>Unlimited</b> subdomains</li>
</ul>
</div>
<div class="plan">
<h3>
Biasa<span class="harga">$19</span></h3>
<a class="signup" href="http://kodejarwo.blogspot.co.id/" rel="nofollow" target="_blank">Sign up</a>
        <br />
<ul>
<li><b>3GB</b> Disk Space</li>
<li><b>25GB</b> Monthly Bandwidth</li>
<li><b>5</b> Email Accounts</li>
<li><b>Unlimited</b> subdomains</li>
</ul>
</div>
<div class="plan">
<h3>
Kere<span class="harga">$9</span></h3>
<a class="signup" href="http://kodejarwo.blogspot.co.id/" rel="nofollow" target="_blank">Sign up</a> 
        <br />
<ul>
<li><b>1GB</b> Disk Space</li>
<li><b>10GB</b> Monthly Bandwidth</li>
<li><b>2</b> Email Accounts</li>
<li><b>Unlimited</b> subdomains</li>
</ul>
</div>
</div>
Keterangan warna:
  • Hijau : Judul Paket
  • Kuning : Harga Paket
  • Ungu : Tombol Beli/Pesan
  • Merah & Orange : Deskripsi Paket

Simpan, lalu lihat hasilnya.

Bagaimana? Apakah widget bekerja dengan sempurna? Semoga widget diatas dapat membantu memudahkan anda dan pengunjung yang ingin membeli!
Silakan pilih sistem komentar anda ⇛   

Silakan berkomentar dengan sopan. Jangan buang-buang waktu anda hanya untuk melakukan SPAM, Fake Account, dan Flamming disini.

Ozik Jarwo Kode Jarwo
Ozik Jarwo author
# 30 Juli 2018 15.05

Nda bisa. Mungkin harus dirombak lagi kodenya supaya bisa.

Balas
Muhammad Nur Fauzi (New) Kode Jarwo
Muhammad Nur Fauzi (New)
# 30 Juli 2018 12.31

#ask
kalo itu mau dimasukkan gambar caranya gimana ya?

Balas