widget purchase box

widget pop up purchase box mirip situs jago desain

Hallo semua pada kesempatan kali ini saya kembali membuatkan reguestan kalian lagi yaitu widget purchase box dengan html dan css.

widget ini di reguest oleh Finix forest melalui komentar youtube dan beberapa orang lainnya lagi, buat kalian yang mau reguest tutorial maupun widget silakan bisa komentar ke salah satu artikel saya maupun halaman forum dan sosial media kami, jika bagus atau menarik akan saya buatkan di masa mendatang. dan perlu di ingat saya tidak terima reguestan dari kalian yang mengcopas artikel saya dan membagikan source code saya tanpa izin!

widget ini cocok sekali buat kalian yang memiliki toko online khususnya produk digital, pada postingan sebelumnya saya juga sudah pernah membagikan formulir order via whatsapp dan email di blogger , formulir order menuju whatsapp dan formulir order menuju email

widget ini terinspirasi dari situs theme.jagodesain.com, dan sengaja tidak saya buat 100% sama persis namun masih menyerupai, untuk css dan html 100% saya tulis sendiri bukan hanya sekedar mengganti nama class dan id dan mengakui buatan sendiri seperti blog sebelah yang tidak punya malu nyindir dulu.

alasan pertama saya tidak membuat 100% sama karena saya tidak enak dengan author jagodesain.com karena beliau sangat baik sekali sama saya dan sesama blogger juga harus bisa menghargai satu sama lain.

alasan kedua saya ingin mengembangkan skil coding saya, jika saya terus mengcopy source code dari situs orang lain tanpa berusaha maka akan sulit untuk saya bisa berkembang kedepannya.

dan lagi pula beliau juga memiliki blog tutorial jadi jika kalian ingin widget purchase box ini sama persis kalian bisa reguest langsung ke beliau saja, atau kalian bisa meminta izin dengan beliau jika ingin mengcopas langsung di blognya.

untuk demonya kalian bisa melihat melalui tombol di bawah ini, ok buat kalian yang ingin membuatnya mari simak caranya di bawah ini.

Widget Purchase Box

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

/* purchase box by wendy code */
.wc-pc-wrap{position:fixed;height:100%;width:100%;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.5);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);z-index:9999999;visibility:hidden;opacity:0;transition:all .2s ease}
.wc-pc-pop{position:relative;top:50%;left:50%;padding:20px;display:flex;background:#fff;flex-direction:column;width:80%;max-width:800px;line-height:30px;border-radius:5px;transform: translate(-50% , -50%) scale(0.97);overflow:hidden;box-sizing:border-box}
.wc-pc-pop:before{content:'';display:block;position:absolute;right:-5px;top:-80px;width:50%;height:450px;border-top-left-radius:50%;border-bottom-left-radius:50%;background-color:#f1f1f0}
.wc-pc-close{position:absolute;top:5px;right:-10px;width:50px;height:50px;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M278.6 256l68.2-68.2c6.2-6.2 6.2-16.4 0-22.6-6.2-6.2-16.4-6.2-22.6 0L256 233.4l-68.2-68.2c-6.2-6.2-16.4-6.2-22.6 0-3.1 3.1-4.7 7.2-4.7 11.3 0 4.1 1.6 8.2 4.7 11.3l68.2 68.2-68.2 68.2c-3.1 3.1-4.7 7.2-4.7 11.3 0 4.1 1.6 8.2 4.7 11.3 6.2 6.2 16.4 6.2 22.6 0l68.2-68.2 68.2 68.2c6.2 6.2 16.4 6.2 22.6 0 6.2-6.2 6.2-16.4 0-22.6L278.6 256z' fill='%23878787'/%3E%3C/svg%3E");background-repeat:no-repeat;background-size:30px}
.wc-pc-close:before{content:'Close';position:relative;right:35px;top:-2px;font-size:12px;color:#999}
.wc-buy-left{position:relative;display:inline-block;margin-top:15px;width:50%;color:#48525c} 
.wc-buy-right{position:absolute;display:inline-block;margin-top:30px;left:50%;width:50%;color:#48525c;align-items:right;text-align:left;padding-left:50px} 
.wc-buy-left h2,.wc-buy-right h2{font-size:20px;margin:-10px auto 10px}
.wc-buyd,.wc-buyh{font-size:17px;font-weight:600;color:#48525c}.wc-buyh{margin-top:-20px}
.wc-buyd:before,.wc-buyh:before{content:attr(aria-label);display:flex;font-size:12px;font-weight:400;color:#767676;margin:20px 0 0}
.wc-buyi,.wc-buyc{font-size:12px;color:#767676;margin-top:10px}.wc-buyi a,.wc-buyc a,.wc-buy-right a{text-decoration:none}
.wc-buy-right span{font-size:17px;color:#767676;margin-left:35px}
.wc-buyb,.wc-buyp{display:inline-block;width:calc(100% - 30px);border:1px solid #999;border-radius:3px;margin:10px auto 0;padding:10px}
svg.wc-buysvg{width:20px;height:20px;position:absolute;fill:#767676;margin-top:5px}
svg.wc-buysvg.line{fill:none!important;stroke:#767676;stroke-linecap:round;stroke-linejoin:round;stroke-width:2}
.wc-pc-btn{display:inline-flex;align-items:center;margin:15px 15px;padding:10px 20px;outline:0;border:0;border-radius:2px;color:#fefefe;background-color:#f89000;font-size:14px;white-space:nowrap;overflow:hidden;max-width:100%;line-height:2em} 
#wc-check-pc:checked ~ .wc-pc-wrap{visibility:visible;opacity:1}
#wc-check-pc{display:none}
@media screen and (max-width:600px){.wc-buyd,.wc-buyh{margin:15px 0}.wc-buyd:before,.wc-buyh:before{margin:5px 0}.wc-buy-right,.wc-buy-left,.wc-buyb,.wc-buyp{position:relative;width:calc(100% - 10px)}.wc-buy-right{left:0;padding:0}.wc-pc-pop{width:400px}.wc-pc-pop:before{content:'';display:block;position:absolute;left:0;top:270px;width:400px;height:400px;background-color:#f1f1f0;border-top-left-radius:15px;border-top-right-radius:15px;border-bottom-left-radius:0}}
@media screen and (max-width:420px){.wc-pc-pop{width:300px;line-height:20px}.wc-pc-pop:before{top:250px;width:300px}.wc-buy-left{margin-bottom:0}.wc-buyi{line-height:20px}.wc-pc-close:before{top:5px}.wc-buyd:before,.wc-buyh:before{margin-bottom:10px}svg.wc-buysvg{margin-top:0}}

Format Penulisan Pada Postingan

gunakan html di bawah ini pada setiap post produk kalian letakkan saja di akhir postingan, bagian yang saya tandai # silakan di ganti dengan url whatsapp kalian dan url paypal kalian, selebihnya silakan di sesuaikan sendiri.

<input id='wc-check-pc' type='checkbox'/>
<div class='wc-pc-wrap'>
<div class='wc-pc-pop'>
<label class='wc-pc-close' for='wc-check-pc'></label>
<div class='wc-buy-left'>
<h2>pembelian</h2>
<div class='wc-buyd' aria-label='Detail'>Template wendy pro</div>
<div class='wc-buyh' aria-label='Harga'>Rp. 150rb / $12</div>
<div class='wc-buyi'>*Pembelian dapat melalui Gopay, OVO dan lainnya <a href='#' target='_blank'>detail info</a></div>  
</div>
<div class='wc-buy-right'>
<h2>Metode pembayaran</h2>
<a class='wc-buyb' href='#' target='_blank'>
<svg class='wc-buysvg 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='wc-buyp' href='#' target='_blank'>
<svg class='wc-buysvg' 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>
<div class='wc-buyc'>sudah membayar? konfirmasi <a href='#' target='_blank'>di sini</a></div>
</div>
</div>
</div>

dan di bawah ini adalah tombol belinya untuk menampilkan pop up ketika di klik silakan letakkan di paragraf di mana kalian ingin menampilkannya.

<div style='text-align: center;'>
<label class='wc-pc-btn' for='wc-check-pc'>Beli Sekarang</label>
</div>

ok jadi sekian widget purchase box yang bisa saya bagikan kali ini semoga bermanfaat dan terima kasih telah berkunjung.