How to Create Purchase Box Widget in Blogger Website

Create Purchase Box Widget?

We will take the help of HTML CSS to create the purchase box widget, follow the steps given below carefully otherwise the purchase box widget will not work in your blogger.

Step 1. Adding CSS Codes

Copy the below css code and paste it before ]]></b:skin> in your theme.

/* Purchase Box Widget CSS Codes */

.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:#214ECF;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}}

Adding HTML Codes

Use the given court in whichever post you want to place the purchase box widget and add it to the end of the post.

<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>Purchase</h2>

<div class='wc-buyd' aria-label='Detail'>The Kathait</div>

<div class='wc-buyh' aria-label='Price'>$15</div>

<div class='wc-buyi'>*Purchase can be made through PayPal, Gumroad. <a href='#' target='_blank'>Detail info</a></div>  

</div>

<div class='wc-buy-right'>

<h2>Purchase Method</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'>Already made a payment? <a href='#' target='_blank'>Confirm here</a></div>

</div>

</div>

</div>

Now below is the HTML code of the buy box, on clicking, a popup box of the buy widget will appear, where you want to show the purchase box widget in any post, add this code.

<div style='text-align: center;'>

<label class='wc-pc-btn' for='wc-check-pc'>Buy Now!</label>

</div>

How to Create Purchase Box Widget in Blogger Website

Create Purchase Box Widget?

Adding HTML Codes

Contact Form