For world peace, liberate Al-Aqsa, eliminate Israel and anyone who is with Israel, they are the real terrorists
Bacakan

Membuat purchase box (kotak pembelian) di blogger

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

Purchase

Rp
$
*Pembayaran dapat melalui Dana, OVO, Jenius dan lainnya. Detail info

Payment Method

Already made a payment? Confirm here

About the Author

Keindahanmu akan kuabadikan disetiap karyaku.

Post a Comment

Menghasilkan uang melalui survei berbayar
Best Viral Premium Blogger Templates from Icloudice


kami menawarkan berbagai template blogger dan produk istimewa untuk anda, support karya anak bangsa dengan membeli produk yang kami jual

Welcome to my store limited

  • Download theme blogger mirip xmlthemes

    Template mirip xmlthemes

    Template blogger terlaris nomor 1 di seluruh Indonesia bahkan di seluruh dunia lagi Diskon 50%
    Rp.153.000
  • Download theme blogger mirip xmlthemes

    Template mirip xmlthemes

    Template blogger terlaris nomor 1 di seluruh Indonesia bahkan di seluruh dunia lagi Diskon 50%
    Rp.153.000
  • Download theme blogger mirip xmlthemes

    Template mirip xmlthemes

    Template blogger terlaris nomor 1 di seluruh Indonesia bahkan di seluruh dunia lagi Diskon 50%
    Rp.153.000
  • Download theme blogger mirip xmlthemes

    Template mirip xmlthemes

    Template blogger terlaris nomor 1 di seluruh Indonesia bahkan di seluruh dunia lagi Diskon 50%
    Rp.153.000
  • Download theme blogger mirip xmlthemes

    Template mirip xmlthemes

    Template blogger terlaris nomor 1 di seluruh Indonesia bahkan di seluruh dunia lagi Diskon 50%
    Rp.153.000
  • Cookie Consent
    We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
    Oops!
    It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
    AdBlock Detected!
    We have detected that you are using adblocking plugin in your browser.
    The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
    Site is Blocked
    Sorry! This site is not available in your country.