PURCHASE BOX WIDGET FOR BLOGGER TEMPLATES FREE TO USE BEST FOR MEDIAN UI AND ONLINE STORES PAYMENT COLLECTION

vào


This widget is perfect for those of you who have an online store.

This widget is inspired from the theme.jagodesign.com site , and I intentionally didn't make it 100% exactly the same but still looks like it, for 100% CSS and html I wrote it myself, not just changing the class name and id and admitting it's homemade like the next blog that doesn't.

The first reason I didn't make it 100% the same was because I didn't like the author of Jagodesain.com because he was very kind to me and fellow bloggers should also be able to respect each other.

the second reason I want to develop my coding skills, if I continue to copy source code from other people's sites without trying it will be difficult for me to be able to develop in the future.

and besides, he also has a tutorial blog, so if you want the purchase box widget to be exactly the same, you can just direct it to him, or you can ask him for permission if you want to copy and paste directly on his blog.

Purchase Box Widget

please go to blogger > themes > edit html copy the css below and place it above the code ]]></b:skin> if it is done don't forget to click save.

/* purchase box by Anand nawal */
.an-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}
.an-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}
.an-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}
.an-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}
.an-pc-close:before{content:'Close';position:relative;right:35px;top:-2px;font-size:12px;color:#999}
.an-buy-left{position:relative;display:inline-block;margin-top:15px;width:50%;color:#48525c} 
.an-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} 
.an-buy-left h2,.an-buy-right h2{font-size:20px;margin:-10px auto 10px}
.an-buyd,.an-buyh{font-size:17px;font-weight:600;color:#48525c}.an-buyh{margin-top:-20px}
.an-buyd:before,.an-buyh:before{content:attr(aria-label);display:flex;font-size:12px;font-weight:400;color:#767676;margin:20px 0 0}
.an-buyi,.an-buyc{font-size:12px;color:#767676;margin-top:10px}.an-buyi a,.an-buyc a,.an-buy-right a{text-decoration:none}
.an-buy-right span{font-size:17px;color:#767676;margin-left:35px}
.an-buyb,.an-buyp{display:inline-block;width:calc(100% - 30px);border:1px solid #999;border-radius:3px;margin:10px auto 0;padding:10px}
svg.an-buysvg{width:20px;height:20px;position:absolute;fill:#767676;margin-top:5px}
svg.an-buysvg.line{fill:none!important;stroke:#767676;stroke-linecap:round;stroke-linejoin:round;stroke-width:2}
.an-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} 
#an-check-pc:checked ~ .an-pc-wrap{visibility:visible;opacity:1}
#an-check-pc{display:none}
@media screen and (max-width:600px){.an-buyd,.an-buyh{margin:15px 0}.an-buyd:before,.an-buyh:before{margin:5px 0}.an-buy-right,.an-buy-left,.an-buyb,.an-buyp{position:relative;width:calc(100% - 10px)}.an-buy-right{left:0;padding:0}.an-pc-pop{width:400px}.an-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){.an-pc-pop{width:300px;line-height:20px}.an-pc-pop:before{top:250px;width:300px}.an-buy-left{margin-bottom:0}.an-buyi{line-height:20px}.an-pc-close:before{top:5px}.an-buyd:before,.an-buyh:before{margin-bottom:10px}svg.an-buysvg{margin-top:0}}

Writing Format for Posts

use the html below in each of your product posts just put it at the end of the post, the part I marked # please replace it with your whatsapp url and your paypal url, the rest please adjust yourself.

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

and below is the buy button to display a pop up when clicked please place it in the paragraph where you want to display it.

<div style='text-align: center;'>
<label class='an-pc-btn' for='an-check-pc'> Buy now</label>
</div>

ok so that's the purchase box widget that I can share this time, hopefully it's useful and thank you for visiting.