|
Pricing Table atau tabel harga merupakan elemen widget yang berfungsi untuk menampilkan detail paket suatu produk seperti harga, fitur yang ditawarkan dan tombol action.
Elemen ini banyak digunakan oleh situs web bisnis ataupun blog yang memasarkan suatu produk atau jasa sebagai visual informasi produk atau layanan secara sederhana.
Lalu bagaimana cara menambahkan tabel harga? Tutorial kali ini kita akan berbagi cara membuat pricing table di blog dengan tampilan yang responsive. Untuk demo nya kalian bisa lihat melalui tombol di bawah.
Table of Contents
Tutorial Membuat Pricing Table Responsive
Langkah #1: Buka dasbhoard Blogger Template > Edit HTML.
Langkah #2: Cari ]]></b:skin> atau </style>, kemudian salin dan tempatkan CSS berikut tepat di atas kode tersebut.
/* Pricing Table by Inputekno */
#pricing{padding-top:50px;width:100%;height:auto}
#pricing .plan-header{padding:20px 0;text-align:center;margin:0 0 1.7em 0;font-size:1.7rem}
#pricing .plan-header .plan-title{font-weight:700;line-height:1.4em;font-size:1.4rem}
#pricing .plan-header .plan-desc{margin:10px 0;font-size:1.2rem}
#pricing .content{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));grid-auto-rows:auto;grid-gap:20px}
#pricing .plan{background:#f0f4f7;border-radius:10px;padding:24px;position:relative;display:flex;flex-direction:column}
#pricing .plan[data-text]:before{content:attr(data-text);position:absolute;display:block;background-color:#3bbdee;color:#fff;text-align:center;right:15px;top:-25px;height:65px;width:65px;border-radius:50%;font-size:0.6rem;box-sizing:border-box;text-transform:uppercase;line-height:normal;padding-top:20px;letter-spacing:0.13em;transition:all 0.5s ease}
#pricing .plan[data-text]:hover:before{transform:rotate(360deg)}
#pricing .plan:nth-child(2){transform:scale(1.05)}
#pricing .plan:nth-child(2):hover{transform:scale(1.06)}
#pricing .plan:hover{transform:scale(1.02)}
#pricing ul{list-style:none;padding:0;flex:1 1 auto;height:1%;min-height:0}
#pricing ul li{margin:16px 0;line-height:1.8;display:flex;align-items:center;gap:10px}
#pricing .plan-name{font-size:30px;margin:0;position:relative}
#pricing .plan-name:after{content:"";display:inline-block;vertical-align:middle;width:15px;margin:0 10px;border-bottom:1px solid #989b9f;opacity:0.5}
#pricing .plan-cost{display:flex;align-items:baseline}
#pricing .plan-cost .plan-price{font-size:22px;font-weight:bold;position:relative}
#pricing .plan-cost .plan-type{font-size:11px;opacity:0.8;text-transform:uppercase}
#pricing .btn{text-align:center;background:#000;color:#fff;padding:8px 32px;width:100%;display:inline-block;border-radius:10px;transition:all 200ms ease;text-decoration:none}
#pricing .btn:hover{transform:scale(1.03)}
#pricing ul li:before{width:22px;height:22px;margin-right:10px}
#pricing ul li:before{content:"";background:#8300b6;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='currentColor' class='w-5 h-5'%3E%3Cpath fill-rule='evenodd' d='M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z' clip-rule='evenodd'/%3E%3C/svg%3E")}
#pricing ul li .features-content{flex:1}
@media (max-width:600px){
#pricing .plan-name:after{width:25px}
#pricing .plan[data-text]:before{top:25px}
#pricing .plan:nth-child(2){transform:none}
}
Sesuaikan CSS dengan tampilan blog kalian.
Keterangan:
#f0f4f7Default warna background tabel harga#3bbdeeDefault warna background label populer tabel harga#8300b6Default warna icon list
Langkah #3: Jika sudah, sekarang klik SIMPAN template.
Memasang Pricing Table di Blog
Sekarang untuk menampilkan pricing table kalian cukup memasang kode HTML berikut di halaman atau postingan blog.
<!--[ Price Table Responsive ]-->
<section id="pricing">
<div class='plan-header'>
<span class='plan-title'>Our Pricing</span>
<p class='plan-desc'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer egestas imperdiet ante nec auctor.</p>
</div>
<div class="content">
<div class="plan">
<h4 class="plan-name">Basic</h4>
<div class='plan-cost'>
<div class="plan-price">Free</div>
<div class="plan-type"></div>
</div>
<ul class="plan-features">
<li><span class='features-content'>50 Tasks</span></li>
<li><span class='features-content'>Deadline Tracking</span></li>
<li><span class='features-content'>Priority Settings</span></li>
<li><span class='features-content'>Basic Reporting</span></li>
<li><span class='features-content'>Email Notifications</span></li>
<li><span class='features-content'>24/7 Customer Support</span></li>
</ul>
<div class="plan-content">
<a href="#" class="btn">Select package</a>
</div>
</div>
<div class="plan" data-text='Most Popular'>
<h4 class="plan-name">Pro</h4>
<div class='plan-cost'>
<div class="plan-price">$29.99</div>
<div class="plan-type">/month</div>
</div>
<ul class="plan-features">
<li><span class='features-content'>All from Basic plan</span></li>
<li><span class='features-content'>Advanced Tasks</span></li>
<li><span class='features-content'>Subtasks</span></li>
<li><span class='features-content'>File Attachments</span></li>
<li><span class='features-content'>Gantt Chart View</span></li>
<li><span class='features-content'>Collaborations</span></li>
<li><span class='features-content'>Free Domain .com</span></li>
<li><span class='features-content'>Backup Daily</span></li>
<li><span class='features-content'>cPanel Acces</span></li>
</ul>
<div class="plan-content">
<a href="#" class="btn">Select package</a>
</div>
</div>
<div class="plan">
<h4 class="plan-name">Enterprise</h4>
<div class='plan-cost'>
<div class="plan-price">$39.99</div>
<div class="plan-type">/month</div>
</div>
<ul class="plan-features">
<li><span class='features-content'>All from Pro plan</span></li>
<li><span class='features-content'>Custom Branding</span></li>
<li><span class='features-content'>API Access</span></li>
<li><span class='features-content'>Data Export</span></li>
<li><span class='features-content'>Advanced Security</span></li>
<li><span class='features-content'>Custom Integrations</span></li>
</ul>
<div class="plan-content">
<a href="#" class="btn">Select package</a>
</div>
</div>
</div>
</section>
Untuk menampilkan label tambahkan data-text='Popular' di dalam tag div 'plan'. Contoh seperti berikut:
<div class='plan' data-text='Most Popular'>
...
</div>
Keterangan:
- Sesuaikan text label yang akan di tampilkan, contoh:
data-text='Popular',data-text='Promo'dsb.
Memasang Pricing Table di Wordpress
Jika kalian menggunakan platform wordpress bisa mengikuti langkah berikut ini:
Langkah #1: Buka dasbhoard Wordpress Appearance > Editor.
Pada tampilan antarmuka pratinjau kalian akan menemukan opsi 'CSS tambahan' untuk menambahkan CSS.
Langkah #2: Salin dan tempatkan CSS di atas tadi pada kotak CSS tambahan.
Langkah #3: Jika sudah klik "Publish".
Langkah #4: Terakhir tinggal tambahkan HTML pricing table di atas tadi pada postingan, halaman blog atau home page.
Alternatif Pricing Table Wordpress
Alternatif lain kalian dapat menggunakan plugin pricing tables yang tersedia seperti Easy Pricing Tables, Responsive Pricing Table atau Tiered Pricing Table for WooCommerce.
Penutup
Nah itu tadi Cara membuat pricing table responsive di Blog. Semoga artikel ini bisa bermanfaat. Kamu juga bisa share dan rekomendasikan ke teman-teman yang membutuhkan.