Join our telegram group Join Now!

How To Put Purchase Box Widget In Blogger

How To Put Purchase Box Widget In Blogger
Please wait 0 seconds...
Scroll Down and click on Go to Link for destination
Congrats! Link is Generated

Introduction

Welcome to my blog SR7Themes!
Today the topic is How To Put Purchase Box Widget In Blogger Hope this post might be useful to you and please stay tuned to our blog for further updates. Remember the end contains surprises!


 


Hello Guys, Welcome to SR7Themes. Today in this article I'm going to guide you step by step to Create Purchase Box Widget in Blogger Website. This widget is perfect for those who sell products on their blog. So, follow the easy steps and learn more about how to create purchase box widget in the Blogger.


Check out the demo of the Purchase Box widget before creating it.

How to Create Purchase Box Widget?

We will create the Purchase Box Widget with the help of HTML and CSS. If there is any error in adding codes them this widget will not work properly. So follow the below steps carefully.


Step 1. Adding CSS Codes

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


/* Purchase Box Widget CSS Codes By SR7THEMES */

.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}}

Step 2. Adding HTML Codes

Use the HTML code below in each post to which you want to add the purchase box widget, and add them at 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'>iMagz Theme</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 button which when clicked will show a popup of purchase box widget. Add these code wherever you want the purchase box widget to appear.


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

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

</div>

Conclusion

I expressed my views on the topic 'How To Put Purchase Box Widget In Blogger'. Hope you are furnished my opinion. The post mustn't be copied without prior permission by emailing or telegram.

Source:
https://www.sr7themes.eu.org/2021/12/how-to-put-purchase-box-widget-in.html?hl=ar

About the Author

Hey there! My name is Saim Rahmani aka Saim, a professional Web Designer, Graphic Designer, UI / Blogger as well as Content Creator. I love to Code

Buy Me A Coffee

إرسال تعليق

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.