हैलो, दोस्तों स्वागत है आपका आज की खास पोस्ट में , इस पोस्ट में मैं आपको बताऊंगा की कैसे आप अपने ब्लॉगर वेबसाइट में Purchase Box Widget (खरीद बॉक्स विजेट) कैसे बनाया जाता है लगा सकते है । यह Widget उन लोगों के लिए है जो अपने ब्लॉगर पर उत्पाद बेचते हैं ।
|
| 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
- सबसे पहले अपने ब्लॉगर खाते में लॉग इन करें।
- फिर Theme Section में Edit Html पर जाएं।
- Ctrl+F प्रेस कर ]]></b:skin> टैग को सर्च करे ।
- सर्च करने के बाद ]]></b:skin> टैग हाइलाइट हो जाएगा ।
- हाइलाइट हो जाने के बाद नीचे दिए गए कोड़ को ]]></b:skin> टैग के ऊपर Paste करे ।
- फिर 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
- सबसे पहले अपने ब्लॉगर खाते में लॉग इन करें।
- फिर Post/Page Section में Post/Page Html पर जाएं।
- आप जिस भी पोस्ट या पेज में Purchase Box Widget लगा रहे हैं, उसमें नीचे दिए गए Code को उस पोस्ट के अंत में डाले ।
- फिर 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
- फिर उस Post/Page को खोले जिसमे आपने ऊपर वाला कोड डाला है ।
- नीचे दिए गए कोड को वहां पोस्ट में डाले जहां आप Buy Button को लगाना चाहते हैं ।
- फिर 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 देकर सहायता अवश्य की जाएगी ।
Conclusion
आज हमने इस बारे में चर्चा की है कि How to Create Responsive Purchase Box Widget in Blogger Website । मुझे आशा है कि आपको यह आर्टिकल बहुत उपयोगी लगा होगा। इस तरह की और पोस्ट के लिए रोजाना हमारे ब्लॉग को लाइक और फॉलो करें।
0 Comments