What tutorial do you want for the next article! Request Here!

How to Create a Purchase Box Button Widget

If you want to add purchase box button widget to your blogger site. Buy Button Widget, Purchase box button, buy box widget, Purchase Box Pop-up Widget
Please wait 0 seconds...
Scroll Down and click on Go to Link for destination
Congrats! Link is Generated
how-to-create-purchase-box-button-widget

Good day, everyone! Greetings, and welcome to TheWebTrick. Today in this blog, we'll show you how to add a buy box button widget to your blogger site step by step. This widget is ideal for website owners that sell product & things. So, read more about how to create a purchase box button widget on Blogger by following the simple steps below.

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

Purchase Box Button Demo

How to Make Purchase Button Box Widget?

We will be creating the purchase button box widget using HTML and CSS. If there is an error in adding the codes, this widget will not work properly. Then carefully follow the steps below.

Step 1. Adding CSS Codes

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

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

Step 2. Adding HTML Codes

In each post to which you wish to add the buy box widget, paste the HTML code below at the end of the post.

<input id='twt-check-pc' type='checkbox'/>
<div class='twt-pc-wrap'>
<div class='twt-pc-pop'>
<label class='twt-pc-close' for='twt-check-pc'></label>
<div class='twt-buy-left'>
<h2>Purchase</h2>
<div class='twt-buyd' aria-label='Detail'>iMagz Theme</div>
<div class='twt-buyh' aria-label='Price'>$15</div>
<div class='twt-buyi'>*Purchase can be made through PayPal, Gumroad. <a href='#' target='_blank'>Detail info</a></div>  
</div>
<div class='twt-buy-right'>
<h2>Purchase Method</h2>
<a class='twt-buyb' href='#' target='_blank'>
<svg class='twt-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='twt-buyp' href='#' target='_blank'>
<svg class='twt-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='twt-buyc'>Already made a payment? <a href='#' target='_blank'>Confirm here</a></div>
</div>
</div>
</div>

Now, here is the HTML code for the button that, when pressed, displays a buy box widget popup. Wherever you want the buy box widget to display, paste this code.

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

This tutorial will show you how to make a Purchase Button Box Widget in Blogger. We hope you have no trouble creating this widget. If you found this article helpful, please share it and stay tuned to our blog for more useful tutorials.

You May Like These Posts:

Post a Comment

To avoid SPAM comments, all comments will be moderated before being displayed.
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.