Hello sobat Icloudzer kali ini admin baklan memberikan informasi mengenai bagaimana caranya membuat purchase box untuk menampilkan harga dan informasi produk di blogger
Info: Oke sobat jika kamu sudah penasaran dengan pembahasan kita kali ini yuk langsung aja kita bahas bersama sama
Purchase Box
Apakah sebenarnya purchase box? purchase dalam bahasa Inggris berarti pembelian, jika di maknai berarti purchase box adalah kotak pembelian! seusai dengan nama nya penggunaan fungsi dari purchase box adalah untuk menampilkan informasi pembelian produk, semisal harga produk, cara melakukan pembayaran dan sebagainnya
Menggunakan CSS
Untuk membuat purchase box di blogger hanya cukup menggunakan kode CSS saja, tanpa ada unsur penggunaan kode javascript, dan di bantu dengan penggunaan kode HTML untuk menampilkan purchase bix tersebut
Mode Popup
Yang unik dari purchase box tersebut adalah tampilan nya menggunakan mode popup atau mengambang, jadi untuk menampilkan purchase bix tersebut harus di dukung sebuah tombol, ataupun text kamu bisa membuat tombol purchase box kamu sendiri, sesuka mu, semisal tombol custom yang kamu peroleh dari internet ataupun sebagainya
Contoh Tampilan
Jika kamu penasaran denga bagaimana kah contoh tampilan dari purchase bix tersebut silahkan kamu bisa menggunakan tombol di bawah ini untuk melihatnya
Info: Bagaimana sobat dengan contoh tampilan nya keren sekali kan
Cara pembuatan
Baiklah sekarang saatnya admin bakalan menjabarkan mehgenai bagaimana kah cara membuat purchase box ataupun kotak pembelian di blogger, teruskan membaca nya hingga selesai ok
Kode CSS
Seperti biasa langkah pertama yang bisa kamu lakukan adalah menyalin kode CSS di bawah ini, kemudian kamu bisa meletakkan nya di atas kode ]]></b:skin>
.rahPrcse{position:fixed;bottom:0;left:0;right:0;margin:0;padding:40px 0;width:100%;height:100%;background-color:#fefefe;font-size:15px;z-index:22;-webkit-transition:all .1s ease;transition:all .1s ease;overflow-y:auto;opacity:0;visibility:hidden;background-color:rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center;padding:0;overflow:hidden}.rahPrcseCn{width:calc(100% - 40px);max-width:780px;max-height:calc(100% - 40px);overflow-y:auto;position:relative;background-color:#fefefe;display:flex;flex-wrap:wrap;border-radius:12px;margin-top:-100%;-webkit-transition:all .1s ease;transition:all .1s ease;z-index:3}.rahPrcseDe{width:55%;flex-shrink:0;background-color:#f1f1f0;padding:50px 25px 20px}.rahPrcseMethod{width:45%;flex-shrink:0;padding:50px 25px 20px}.pS .rahPrcseTitle{margin-top:0;margin-bottom:30px;font-size:1.3rem}.rahPrcseName, .rahPrcsePrice{font-weight:900;margin-bottom:20px;color:#262d3d}.rahPrcseName:before, .rahPrcsePrice:before{content:attr(data-text);font-size:12px;display:block;font-weight:400;color:#08102b}.rahPrcsePrice{font-size:2rem}.rahPrcsePrice span{font-size:15px}.rahPrcsePrice .Paypal:before{content:'/ $'}.rahPrcseInfo{font-size:13px;line-height:1.7em;margin-top:40px}.rahPrcseLink .button{display:flex;margin-right:0;padding:12px 20px}.rahPrcseLink .button svg{margin-right:12px}.rahPrcseLink .button svg.line{fill:none;stroke-width:1.8}.rahPrcseLink .transfer svg{height:18px;stroke:#1d1d1d}.rahPrcseLink .paypal svg{fill:#1d1d1d}.rahPrcseLink .payoneer{}.rahPrcseLink .stripe{}.rahPrcseLink .gumroad svg{height:18px;fill:#1d1d1d}.rahPrcseLink .themeforest{}.rahPrcseConfirm{font-size:13px;text-align:right;margin-top:35px}.rahPrcseIn:checked ~ .rahPrcse .rahPrcseCn{margin-top:0}.rahPrcseCl{display:flex;align-items:center;height:22px;position:absolute;top:20px;right:25px}.rahPrcseCl:before{content:'Close';font-size:11px;padding-right:8px}.rahPrcseIn:checked ~ .rahPrcse, .rahPrcseIn:checked ~ .rahPrcse .fCls{opacity:1;visibility:visible}@media screen and (max-width:480px){.rahPrcseCn{display:block}.rahPrcseDe{width:100%;background-color:transparent;padding-top:16px}.rahPrcseMethod{width:100%;background-color:#f1f1f0;border-radius:5px 5px 0 0;padding-top:25px}.rahPrcseName{display:none}.rahPrcseInfo{margin-top:0;font-size:12px}.pS .rahPrcseDe .rahPrcseTitle{margin-bottom:10px}}.rahPrcsePrice i{font-style:normal}.rahPrcsePrice i:before, .rahPrcsePrice span.Paypal:after{content:attr(data-text)}.rahPrcseName:after{content:attr(data-title)}.button.outline{color:#08102b;background-color:transparent;border:1px solid #323232}.button.outline:hover{border-color:#DE3535}Info: Atau kamu bisa menggunakan tag kode < style> untuk meletakkan kode CSS di atas
Kode HTML
Lagkah selanjutnya yang bisa kamu lakukan adalah dengan menyali lagi kode HTML di bawah ini kemudian kamu bisa meletakkan nya di atas kode </body>
<input class='rahPrcseIn hidden' id='rahPrcseIn' type='checkbox'/>
<div class='rahPrcse'>
<div class='rahPrcseCn'>
<label class='rahPrcseCl' for='rahPrcseIn'>
<svg class='line' viewBox='0 0 24 24'><line x1='18' x2='6' y1='6' y2='18'/><line x1='6' x2='18' y1='6' y2='18'/></svg>
</label>
<div class='rahPrcseDe'>
<h2 class='rahPrcseTitle'>Purchase</h2>
<div class='rahPrcseName' data-text='Detail' data-title='Beli template Rah UI premium'></div>
<div class='rahPrcsePrice' data-text='Price'><span>Rp</span> <i data-text='53rb'></i> <span class='Paypal' data-text='3'></span></div>
<div class='rahPrcsePrice' data-text='Price'><span>$</span> <i data-text='1'></i></div>
<div class='rahPrcseInfo'>*Pembayaran dapat melalui Dana, OVO, Jenius dan lainnya. <a href='/p/rahPrcse.html' target='_blank'>Detail info</a></div>
</div>
<div class='rahPrcseMethod'>
<h2 class='rahPrcseTitle'>Payment Method</h2>
<div class='rahPrcseLink'>
<a class='button outline transfer' href='https://api.whatsapp.com/send?phone=6285834306926&text=Assalamualaikum' rel='noreferrer noopener' target='_blank'>
<svg class='line' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><rect height='16' rx='2' ry='2' width='22' x='1' y='4'></rect><line x1='1' x2='23' y1='10' y2='10'></line></svg>
<span>Bank Transfer</span>
</a>
<a class='button outline paypal' href='https://www.paypal.me/icloudice' rel='noreferrer noopener' target='_blank'>
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><g><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'/></g></svg>
<span>Paypal</span>
</a>
<a class='button payoneer' href='#' rel='noreferrer noopener' target='_blank'>Payoneer</a>
<a class='button stripe' href='#' rel='noreferrer noopener' target='_blank'>Stripe</a>
<a class='button themeforest' href='#' rel='noreferrer noopener' target='_blank'>ThemeForest</a>
<span>Other method</span>
<a class='button outline gumroad' href='#' rel='noreferrer noopener' target='_blank' style='cursor:not-allowed'>
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path d='M337.6,321.5c29,0,29,43.4,0,43.4C308.7,364.9,308.7,321.5,337.6,321.5z M455,23.7c28.9,0,28.9,43.4,0,43.4 C426,67.1,426,23.7,455,23.7z M70.8,66.3h343.8c7.8,15.1,23.3,24.6,40.3,24.6c25.1,0,45.4-20.3,45.4-45.4C500.4,20.3,480.1,0,455,0 c-19,0-35.3,11.7-42.1,28.3H70.8c-33.2,0-59.2,25.2-59.2,57.4v366c0,32.7,27.2,60.3,59.2,60.3h366c32.3,0,58.4-27,58.4-60.3V234.6 c0-32.7-26.2-59.2-58.4-59.2H219.7c-33.2,0-61.2,27.2-61.2,59.2v68.3c0,31.7,27.4,57.4,61.2,57.4h75.8c6.9,17.2,23.6,28.3,42,28.3 c25.1,0,45.4-20.3,45.4-45.4c0-25.1-20.3-45.4-45.4-45.4c-16.9,0-32.5,9.5-40.3,24.6h-77.6c-11.2,0-23.2-7.4-23.2-19.5v-68.2 c0-11.2,11.1-21.3,23.2-21.3h217.1c11.5,0,20.5,9.4,20.5,21.3v217.2c0,12.1-9.4,22.3-20.5,22.3h-366c-11.3,0-21.3-10.5-21.3-22.3 v-366C49.5,74.7,58.8,66.3,70.8,66.3L70.8,66.3z'></path></svg>
<span>Gumroad</span>
</a>
</div>
<div class='rahPrcseConfirm'>Already made a payment? <a href='/p/confirm.html'>Confirm here</a></div>
</div>
</div>
<label class='fCls' for='rahPrcseIn'></label>
</div>Info: Fungsi dari kode HTML di atas adalah untuk menampilkan purchasse box tersebut
Tombol Penampil
Seperti yag sudah admin jelaskan sebelumnya bahwa untuk menampilkan purchasse box di blogger tersebut adalah dengan menggunakan sebuah tombol, so periksa disini berbagai tombol yang bisa kamu gunakan untuk menampilkan purchasse box tersebut
<label for='rahPrcseIn'>
<!-- SVG --><label>Info: Silahkan sobat praktekkan kode yang saya jabarkan di atas dalam membuat purchasse box atau kotak pembelian di blogger, semoga bermanfaat