Cara buat widget payment method atau metode pembayaran. Jika situs sobat merupakan web e-commerce atau penyedia layanan jasa seperti halnya situs master dzgn, maka widget payment method ini sangat diperlukan. Tampilan yang minimalis akan memberi kesan elegan pada interface situs sobat.
Widget payment method ini bisa diterapkan pada semua template blog, selama benar dalam penempatan script CSS dan HTML-nya. Saya juga sudah mengujinya langsung pada template master dzgn ini, dan hasilnya work 100%, selain itu juga responsive ketika dibuka baik melalui versi mobile maupun desktop.
Sebenarnya apa kegunaan dari widget payment method? jawaban versi simpelnya ya untuk memberi informasi metode pembayaran yang disediakan kepada para customer atau klien. Pada dasarnya widget ini bisa sobat kreasikan sesuka hati, misal ingin mengubah warna background ataupun menambahkan hiasan css lainnya juga bisa.
Ada banyak referensi yang bisa digunakan untuk memberikan informasi metode pembayaran, sebagai contoh bisa menggunakan form.app, powr.io dan sebagainya. Namun saya lebih tertarik untuk membagikan script widget payment method hasil modifikasi karena lebih clean dan bagus dari segi tampilan.
Langsung saja simak tutorial cara membuat widget payment method pada ulasan berikut ini. Ikuti setiap instruksi step by step dan pastikan menempatkan script sesuai instruksi yang ada. Jika terjadi error maka itu kemungkinan karena kesalahan sobat dalam penempatan atau terdapat script yang tidak ter-copy secara sempurna.
1. Pertama, silahkan login ke dashboard blogger sobat. Lalu klik TEMA, pilih EDIT HTML.
2. Kedua, copy script CSS di bawah ini, kemudian paste-kan script tersebut di atas (sebelum) kode ]]></b:skin> lalu klik Simpan Tema.
.product-detail, .payment-method{display:flex;flex-wrap:wrap;}
.product, .payment{position:relative;width:48.5%;margin:0 3% 15px 0;padding:15px;background-color:#CFEDEB;border-radius:10px;box-shadow:0 6px 18px 0 rgba(9,32,76,.05);line-height:1em;}
.product:after,.payment:after{content:'';display:block;position:absolute;bottom:0;right:0;width:100px;height:90px;background:rgba(0,0,0,.025);border-radius:100px 0 10px 0;}
.product:nth-child(2n), .payment:nth-child(2n){margin-right:0}
.product .p-title, .payment .p-title{margin-bottom:10px;color:#161617;font-size:13px;font-weight:700;font-family:'Ubuntu', sans-serif}
.product .p-title span{display:inline-block;font-weight:400;font-size:11px;margin-left:5px;color:#505050}
.product .p-info, .payment .p-info{position:relative;display:flex;align-items:center;min-height:68px;z-index:2}
.product .p-info .p-price, .payment .p-price{width:45%;padding-right:15px;font-size:35px;font-weight:500;font-family:'Ubuntu', sans-serif;line-height:normal;color:#1a0e0e}
.product .p-info .p-price span, .payment .p-price span{display:inline-block;font-size:12px;}
.product .p-info .p-include, .payment .p-include{width:55%;margin:0;padding:0;list-style:none;font-size:11px;color:#505050}
.product .p-info .p-include li, .payment .p-include li{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}
.product .p-info .p-include li:before, .payment .p-include li:before{content:'';display:inline-block;vertical-align:bottom;width:16px;height:15px;background:url("data:image/svg+xml,<svg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'><path d='M362.6 192.9L345 174.8c-.7-.8-1.8-1.2-2.8-1.2-1.1 0-2.1.4-2.8 1.2l-122 122.9-44.4-44.4c-.8-.8-1.8-1.2-2.8-1.2-1 0-2 .4-2.8 1.2l-17.8 17.8c-1.6 1.6-1.6 4.1 0 5.7l56 56c3.6 3.6 8 5.7 11.7 5.7 5.3 0 9.9-3.9 11.6-5.5h.1l133.7-134.4c1.4-1.7 1.4-4.2-.1-5.7z' fill='%234d4d4d'/></svg>") center / 16px no-repeat;}
.payment{padding:15px 20px}
.payment.paypal{background-color:#34ADE3}
.payment.themeforest{background-color:#da4c3e}
.payment .p-title{font-weight:400}
.payment .p-title span{display:block;font-size:22px;font-weight:700;line-height:normal;}
.payment .p-icon{flex-grow:1;text-align:right;}
.payment .p-icon svg{width:50px;height:50px}
.payment .p-icon .bank{fill:none;stroke:#161617;stroke-linejoin:round;stroke-width:2px;}
.product, .payment{width:100%;margin-right:0}
.page-1 .landing-box .title{font-size:1.8rem}
.kotak-panduan .judul-panduan h4{font-size:1.1rem}
*,:after,:before{-webkit-box-sizing:border-box;box-sizing:border-box}
3. Ketiga, klik menu Halaman, kemudian buat halaman baru dan paste-kan script HTML di bawah ini pada mode HTML bukan Compose.
<div class='payment-method'><div class='payment bank'><div class='p-title'>Payment method<span>Bank transfer</span></div><div class='p-info'><ul class='p-include'><li>Bank MANDIRI</li>
<li>1234567890 </li>
<li>a/n Master Dzgn</li>
</ul><div class='p-icon'><svg class='bank' viewBox='0 0 32 32'><g><polyline points='14 26 1 26 1 4 31 4 31 13'/><line x1='1' x2='31' y1='9' y2='9'/><line x1='1' x2='14' y1='15' y2='15'/><line x1='4' x2='6' y1='20' y2='20'/><line x1='8' x2='10' y1='20' y2='20'/><circle cx='24' cy='21' r='7'/><polyline points='21 21 23 23 27 19'/></g></svg></div></div></div><a class='payment paypal' href='https://www.paypal.me/USERNAME_PAYPAL_ANDA' title='Pay with Paypal' rel='nofollow noreferrer' target='_blank'><div class='p-title'>Payment method<span>Paypal</span></div><div class='p-info'><div class='p-price'><span>$</span>24</div><div class='p-icon'><svg class='paypal' viewBox='0 0 32 32'><path d='M26.28,9.58A6.64,6.64,0,0,0,19.65,3H10a1,1,0,0,0-1,.84L5.58,25.29a1,1,0,0,0,.23.8,1,1,0,0,0,.76.36H10.7l-.22,1.39a1,1,0,0,0,1,1.16h4.65a1,1,0,0,0,1-.83l1-6.11h3.15a7.46,7.46,0,0,0,7.43-7.45v-.28A5.87,5.87,0,0,0,26.28,9.58ZM10.85,5h8.8a4.64,4.64,0,0,1,4.51,3.61,5.68,5.68,0,0,0-1.32-.15H14.5a1,1,0,0,0-1,.84L12.91,13a1,1,0,0,0,2,.32l.46-2.88h7.49a3.87,3.87,0,0,1,1.4.27,6.47,6.47,0,0,1-6.4,5.69H13.22a1,1,0,0,0-1,.83L11,24.45H7.74Zm15.86,9.61a5.46,5.46,0,0,1-5.43,5.45h-4a1,1,0,0,0-1,.83l-1,6.11H12.64l.22-1.39h0l1.2-7.19h3.78A8.46,8.46,0,0,0,26,12.1a3.82,3.82,0,0,1,.71,2.23Z'/></svg></div></div></a><a class='payment themeforest' href='URL_LINK_TUJUAN' title='Buy templates via Themeforest' rel='nofollow noreferrer'><div class='p-title'>Buy templates via<span>Themeforest</span></div><div class='p-info'><div class='p-price'><span>$</span>24</div><div class='p-icon'><svg class='themeforest' viewBox='0 0 1000 1000'><g><path d='M921.6,522.5c-0.2-0.2-0.4-0.3-0.5-0.5c-18.7-20-47.7-28.8-94-28.8c-16.6,0-39.1,1.2-61.2,3.5l0.3-372.1c0-29.1-23.7-52.8-52.8-52.8H62.7C33.6,71.8,10,95.5,10,124.6v650.6c0,29.2,23.6,52.8,52.7,52.8h174.7c3.5,5.3,7.1,10.6,11.2,15.6c46.1,56.1,126.7,84.6,239.6,84.6c86.1,0,175-16,233.9-26.5l21.5-3.8c71.5-12.4,110.5-28.2,134.9-54.1c10.5-4,24-11,29.3-21.8c2.7-5.8,3.1-12.1,1-18c-1.8-4.7-4.9-8.5-8.8-11.5c2.8-3.9,5.1-7.8,7.2-11.7c8.5-4.2,17.3-10.3,21.3-18.5c2.9-5.7,3.1-12.1,1-18c-2.3-6.1-6.9-10.6-12.5-14c-0.2-3.7-0.5-7.3-1-10.8c1.3-2,2.5-4,3.6-5.9c13-4.6,32-13.4,39-27.8c3.4-7,3.8-14.7,1.1-21.8c-4.6-12.6-17.3-19.8-30.7-24.1c0.3-1.6,1-3.2,2.3-4.6c2.9-5.5,7.1-11.1,10.6-17.3c15.8-5.9,36.7-16.5,44.7-32.9c4.2-8.5,4.6-18.1,1.4-26.8C978.6,533.4,944.4,525.3,921.6,522.5z M907.7,617.2l-80.8,12l77.5,8.6c6.1,18.6,11.1,53.5-20.8,83.3c0,0,0.3,0.8,0.9,2.2l-63.8,8.5l67.5,6.5c1.6,10.6,1.2,24.6-6.7,37.7l-53.1,15.5l43-1.2c-0.1,8.4-8.2,44-131.9,65.5C598.8,880.3,203.7,966.1,265,656.7C326.2,347.4,657,212.6,724.4,212.6v297.8c-36.5,5.8-68.9,12.1-97.4,18.5c-31.6-4.3-106.8-12.8-146.1-0.8l89.5,14.9c-80.6,22.1-115.6,41.7-115.6,41.7c93.7-27.1,199-43.4,247.9-50c83.1-9.2,174.8-3.3,193.2,16.3C927.2,584.5,917.2,606.5,907.7,617.2z'/></g></svg></div></div></a></div><br />
Silahkan ganti kode yang ditandai tersebut sesuai keinginan sobat, untuk url link paypal dan themeforest sesuaikan dengan url link akun sobat.
4. Keempat, silahkan klik publikasikan halaman dan kemudian lihat tampilan atau previewnya. Untuk icon pada widget payment method ini bisa sobat ganti sesuai keinginan, referensi icon svg lainnya bisa cek di SVG ICON MATERIAL.
Perlu sobat ketahui juga kalau widget payment method ini juga mirip dengan yang dipakai oleh situs jagodesain.com. Bagi para pengguna template fletro sangat cocok sekali jika ingin menambahkan widget ini untuk kebutuhan layanan jasa. Cek previewnya dengan klik tombol di bawah ini.
Perlu sobat ketahui juga kalau widget payment method ini juga mirip dengan yang dipakai oleh situs jagodesain.com. Bagi para pengguna template fletro sangat cocok sekali jika ingin menambahkan widget ini untuk kebutuhan layanan jasa. Cek previewnya dengan klik tombol di bawah ini.
Nantikan update artikel terbaru lainnya dari master dzgn, saya akan share tutorial menarik lagi yang pastinya tidak akan sobat temukan di situs lain. Jangan lupa tinggalkan jejak komentar di bawah postingan ini atau bisa berlangganan artikel gratis dari master dzgn melalui widget subscribe by email.