join grup whatsapp Join

material design widget pricing table

material design widget pricing table free untuk semua platform, yang berfungsi untuk menampilkan nama produk , harga , deskripsi dan tombol beli
material design widget pricing table

Hallo semua pada kesempatan kali ini saya akan membagikan cara membuat material design widget pricing table untuk harga jasa atau produk.

widget pricing table seperti ini biasanya dapat kita jumpai di situs yang menyediakan jasa / menjual produk seperti landing page yang berfungsi untuk menampilkan nama produk , harga , deskripsi dan tombol buy now / beli sekarang.

dengan menggunakan widget ini cukup memengaruhi keputusan pelanggan dalam membeli produk atau jasa yang di tawarkan. tentu cara ini akan menguntungkan anda sebagai pemilik bisnis karena dapat memperbesar peluang konversi pengunjung yang datang ke situs kalian.

widget ini bisa kalian letakkan di mana saja mau itu di halaman hompage atau di halaman artikel atau halaman statis, ok buat kalian yang ingin membuatnya mari simak caranya di bawah ini.

Widget Pricing Table

silakan masuk ke blogger pilih tema dan edit html salin css di bawah ini dan letakkan di atas kode ]]></b:skin>


.wendy-pricing{position:relative;padding:50px 0;text-align:center}
.wendy-pricing .container-pricing{display:grid;grid-template-columns:32% 32% 32%;grid-gap:30px;margin:30px auto 0}
.wendysec-pricing{padding:30px;margin:0 0 20px;position:relative;box-shadow:0 3px 20px 0 rgba(0,0,0,0.15);border-radius:5px;background:#fff;transition:all .2s ease-in-out;border-top:4px solid #fff}
.wendysec-pricing:hover{transform:translateY(-10px);box-shadow:0 3px 20px 0 rgba(0,0,0,0.25);border-color: #ffa200}
.wendysec-pricing .harga{font-size:50px;margin:15px 0;background:linear-gradient(to right, #ffa200,#f0b651);color:#fff;width:100px;height:100px;line-height:2;border-radius:100%}
.wendysec-pricing{box-shadow:none;border:1px solid #ddd}
.wendysec-pricing h3{color:#111;font-size:20px;font-weight:700}
.wendysec-pricing p{font-size:15px;color:#555}
.wendysec-pricing .harga{font-size:25px;font-weight:700;line-height:4;display:inline-block}
.wendy-pricing a.wendybutton{box-shadow:none;background:linear-gradient(to right, #ffa200,#f0b651)}
.wendybutton{display:inline-flex;align-items:center;margin:15px 15px 15px 0;padding:10px 20px;outline:0;border:0;color:#fefefe;background-color:#f09800;border-radius:3px;font-size:18px;line-height:22px;text-decoration:none}
a.wendybutton:hover{transform:scale(1.1)}
.wendysec-pricing.aktif,.wendysec-pricing:hover{box-shadow:0 3px 20px 0 rgba(0,0,0,0.15);border-color:#ddd;border-top:4px solid  #ffa200}
@media screen and (max-width:680px){.wendy-pricing .container-pricing{grid-template-columns:100%;display:block;margin:20px auto}}

catatan:
jika ingin mengubah warnanya silakan ubah kode warna yang telah saya tandai di atas

selanjtunya tambahkan html di bawah ini untuk menampilkan widget pricing tablenya, bisa di letkkan di tempat yang kalian inginkan, misalnya saja di tata letak atau di atas footer atau di halaman artikel dan statis.


<div class='wendy-pricing'>
<div class='container-pricing'>
<div class='wendysec-pricing'>
<h3>Consultation</h3>
<span class='harga'>20K</span>
<p>Graphic Design</p
><p>Web Design</p>
<p>Support</p>
<p>-</p>
<p>-</p>
<a class='wendybutton' href'=#' title='Buy Now'>Buy Now</a>
</div>
  
<div class='wendysec-pricing aktif'>
<h3>Small Business</h3>
<span class='harga'>120K</span>
<p>Graphic Design</p
><p>Web Design</p>
<p>Full Support</p>
<p>Themes</p>
<p>-</p>
<a class='wendybutton' href='#' title='Buy Now'>Buy Now</a>
</div>
  
<div class='wendysec-pricing'>
<h3>Corporate</h3>
<span class='harga'>20K</span>
<p>Graphic Design</p
><p>Web Design</p>
<p>Support</p>
<p>Unlimited Domain</p>
<p>-</p>
<a class='wendybutton' href='#' title='Buy Now'>Buy Now</a>
</div>
</div>
</div>

catatan:
bagian yang saya tandai bisa di ubah sesuai kebutuhan, dan tanda # bisa di ganti dengan url target jadi ketika tombol buy di klik akan mengarah ke mana

ok jadi sekian cara membuat material design widget pricing table untuk harga jasa atau produk semoga bermanfaat.

Baca juga :
Donasi untuk mendukung creator terus berkarya, mulai seribu rupiah saja

1 komentar

  1. Widget request:

    Please make a widget for featuring books on blog with a 'buy now' button.


image quote pre code
© Wendy Code Developed by Jago Desain

Pemblokir Iklan Terdeteksi

Matikan adBlock anda untuk dapat mengakses situs ini.

translate to english