Senin, 23 Agustus 2021

How to Create Purchase Box Widget in Blogger

Hello Guys, Welcome to ASThemesWorld. 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.

नमस्कार दोस्तों, ASThemesWorld में आपका स्वागत है। आज इस लेख में मैं आपको ब्लॉगर वेबसाइट में खरीदारी बॉक्स विजेट बनाने के लिए कदम दर कदम मार्गदर्शन करने जा रहा हूँ। यह विजेट उन लोगों के लिए एकदम सही है जो अपने ब्लॉग पर उत्पाद बेचते हैं। तो, आसान चरणों का पालन करें और ब्लॉगर में खरीदारी बॉक्स विजेट बनाने के तरीके के बारे में और जानें।

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

Purchase Box Widget Demo

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.

हम HTML और CSS की मदद से परचेज बॉक्स विजेट बनाएंगे। यदि उन्हें कोड जोड़ने में कोई त्रुटि है तो यह विजेट ठीक से काम नहीं करेगा। इसलिए नीचे दिए गए स्टेप्स को ध्यान से फॉलो करें।

Step 1. Adding CSS Codes

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

नीचे दिए गए css कोड को कॉपी करें और अपनी थीम में ]]></b:skin> से पहले पेस्ट करें।

/* 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}}

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.

प्रत्येक पोस्ट में नीचे दिए गए HTML कोड का उपयोग करें जिसमें आप खरीद बॉक्स विजेट जोड़ना चाहते हैं, और उन्हें पोस्ट के अंत में जोड़ें।

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

अब नीचे बटन का HTML कोड है जिस पर क्लिक करने पर खरीद बॉक्स विजेट का पॉपअप दिखाई देगा। जहां भी आप खरीदारी बॉक्स विजेट दिखाना चाहते हैं, वहां ये कोड जोड़ें।

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

Note: If the code does not work or you’ve faced any error/problem then please download the source code files from the given download button.

यदि कोड काम नहीं करता है या आपको किसी त्रुटि/समस्या का सामना करना पड़ा है तो कृपया दिए गए डाउनलोड बटन से स्रोत कोड फ़ाइलें डाउनलोड करें।

Click To Download

This is all about how to create Purchase Box Widget in Blogger. I hope you will not have any trouble in making this widget. If you find this article useful, then do share it and stay connected to our blog for more such good tutorials.

यह सब ब्लॉगर में Purchase Box Widget बनाने के तरीके के बारे में है। मुझे उम्मीद है कि इस विजेट को बनाने में आपको कोई परेशानी नहीं होगी। अगर आपको यह लेख उपयोगी लगता है, तो इसे साझा करें और इस तरह के और अच्छे ट्यूटोरियल के लिए हमारे ब्लॉग से जुड़े रहें।

Source Code Reference: Wendy Code

0 komentar: