All My Own customization. Do not Disturb The Fineshop Team.

How to Create Responsive Purchase Box Widget in Blogger Website

How to Create Purchase Box Widget in Blogger Website, this widget is for those people who sell products on their blogger so let's know....
Please wait 0 seconds...
Scroll Down and click on Go to Link for destination
Congrats! Link is Generated

हैलो, दोस्तों स्वागत है आपका आज की खास पोस्ट में , इस पोस्ट में मैं आपको बताऊंगा की कैसे आप अपने ब्लॉगर वेबसाइट में Purchase Box Widget (खरीद बॉक्स विजेट) कैसे बनाया जाता है लगा सकते है । यह Widget उन लोगों के लिए है जो अपने ब्लॉगर पर उत्पाद बेचते हैं । 

How to Create Responsive Purchase Box Widget in Blogger Website
How to Create Responsive Purchase Box Widget in Blogger Website


तो बिना टाइम बर्बाद किए आपको बताते है की How to Create Responsive Purchase Box Widget in Blogger Website, इस विजेट को लगाने के लिए Full Process नीचे बता रखा है ।

हमेशा की तरह शुरू करने से पहले किसी भी प्रकार की त्रुटि होने पर आसानी से Restore करने के लिए अपने ब्लॉग टेम्प्लेट का Backup जरूर लें ।

Purchase Box Widget बनाने के लिए हम HTML CSS की मदद लेंगे, नीचे दिए गए चरणों का ध्यानपूर्वक पालन करें अन्यथा Purchase Box Widget आपके ब्लॉगर में काम नहीं करेगा।

Create Responsive Purchase Box Widget?

CSS

  1. सबसे पहले अपने ब्लॉगर खाते में लॉग इन करें।
  2. फिर Theme Section में Edit Html पर जाएं।
  3. Ctrl+F प्रेस कर ]]></b:skin> टैग को सर्च करे ।
  4. सर्च करने के बाद ]]></b:skin> टैग हाइलाइट हो जाएगा ।
  5. हाइलाइट हो जाने के बाद नीचे दिए गए कोड़ को ]]></b:skin> टैग के ऊपर Paste करे ।
  6. फिर Theme को Save करें ।


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


HTML

  1. सबसे पहले अपने ब्लॉगर खाते में लॉग इन करें।
  2. फिर Post/Page Section में Post/Page Html पर जाएं।
  3. आप जिस भी पोस्ट या पेज में Purchase Box Widget लगा रहे  हैं, उसमें नीचे दिए गए Code को उस पोस्ट के अंत में डाले ।
  4. फिर Post/Page को Save करें ।

<input id='Ts-check-pc' type='checkbox'/>

<div class='Ts-Ofi-wrap'>

<div class='Ts-Ofi-pop'>

<label class='Ts-Ofi-close' for='Ts-check-pc'></label>

<div class='Ts-buy-left'>

<h2>Purchase</h2>

<div class='Ts-buyd' aria-label='Detail'>Technical Success Official</div>

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

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

</div>

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

<h2>Purchase Method</h2>

<a class='Ts-buyb' href='#' target='_blank'>

<svg class='Ts-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='Ts-buyp' href='#' target='_blank'>

<svg class='Ts-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='Ts-buyc'>Already made a payment? <a href='#' target='_blank'>Confirm here</a></div>

</div>

</div>

</div>

HTML Buy Button

  1. फिर उस Post/Page को खोले जिसमे आपने ऊपर वाला कोड डाला है ।
  2. नीचे दिए गए कोड को वहां पोस्ट में डाले जहां आप Buy Button को लगाना चाहते हैं ।
  3. फिर Post/Page को Save करें ।



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

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

</div>



तो उपरोक्त Steps को Follow करने के बाद मुझे आशा है कि आपने अपने ब्लॉग में Responsive Purchase Box Widget को सफलतापूर्वक स्थापित कर लिया है । अगर आपको कोई समस्या आ रही है तो आप नीचे Comment कर सकते है आपको Reply देकर सहायता अवश्य की जाएगी ।
PURCHASE BOX WIDGET.txt 5.7kb

Conclusion


आज हमने इस बारे में चर्चा की है कि How to Create Responsive Purchase Box Widget in Blogger Website । मुझे आशा है कि आपको यह आर्टिकल बहुत उपयोगी लगा होगा। इस तरह की और पोस्ट के लिए रोजाना हमारे ब्लॉग को लाइक और फॉलो करें।

Getting Info...

About the Author

Hello Friends, My Name is Bhupendra Jangid and Welcome To Our Website. My Passion is to Share Knowledge With Everyone. Also I am a Website Designer.

Post a Comment

Cookie Consent
OMG 🙄, Google is asking us to get cookies from you to make a seamless experience throught our website. Please Let us collect 😌
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.