How To Add Modern Pricing Table in Blogger Website

नमस्कार दोस्तों ! स्वागत है आपका हमारी इस नयी Blogging Tips की पोस्ट में | तो आज के इस आर्टिकल में हम बात करने वाले How To Add Modern Pricing Table in Blogger Website के बारे में | और यह की Blogger me Pricing Table widget kaise lagaye के बारे में भी तो इन सभी बातो को हम आज की इस पोस्ट में जानेंगे | Blogger me Pricing Table Add kaise kare के बारे में जानिये पूरी Details में |

Pricing Table Widget in Blogger Website

So दोस्तों काफी लोग अपनी Blogger Website को अच्छा लुक देने या कोई चीज selling करते है तो उनके लिए यह Pricing widget काफी helpful होगा इस widget को आप Blogger And Wordpess दोनों ही Platform पर Add कर सकते हो क्यूंकि यह Pricing Table Widget Html और Css की सहायता से डिजाईन किया गया है 

इस Pricing Table Widget की सहायता से आप लोग अपने ग्राहकों को अपने product की Pricing और features को Show करा सकते हो और अपने product Buy की भी लिंक Add कर सकते हो और यह Widget आपके वेबसाइट के look और interface को काफी Attractive बना देगा |

तो चलिए अब बात करते है की Pricing Table ko Blogger Website me kese add kare. अब नीचे बात करते है की ब्लॉगर में इस Widget को install kaise kare?

Follow these Steps To Add Pricing Table Widget in Blogger

इस Widget को Blogger में Add करने से पहले अपने Blogger Theme का Backup जरुर ले लें ताकि इस Widget को add करने में कोई दिक्कत होने पर आप अपने Old theme को दोबारा Restore कर सको |

Step 1 :– सबसे पहले Blogger.com पर जाएँ | अब आपका Blogger Dashboard खुलेगा |

Step 2 :– Blogger Dashboard खुलने के बाद Theme section पर जाकर Edit HTML option पर click करें |

Step 3 :– अब आपको CTRL+F क्लिक करके ]]></b:skin> सर्च करना है| और निचे बॉक्स में जितना भी CSS Code है सभी को कॉपी करे| और  ]]></b:skin> tag के उपर Paste करके save करे|

.pricing-container { margin: 50px 0; font-family: "Roboto", sans-serif; display: flex; max-width: 800px; line-height: 1; } .pricing-container .plan { text-align: center; background: linear-gradient(125deg, #36f4de, #4094d6); margin: 0 8px; flex: 1; box-shadow: 0 4px 16px -2px rgba(0, 0, 0, 0.4); transition: 400ms; position: relative; overflow: hidden; } .pricing-container .plan.best-value::after { content: "Best"; position: absolute; top: 4px; right: -34px; transform: rotate(40deg); padding: 10px 48px; font-weight: bold; background: #c51e1e; color: #fff; } .pricing-container h2 { margin: 0; font-size: 32px; padding: 20px; color: #143a46; } .pricing-container .price { padding: 16px; font-size: 36px; font-weight: bold; background: #222; color: #eee; } .pricing-container .duration { font-size: 16px; font-weight: normal; } .pricing-container .features { list-style: none; font-size: 20px; padding: 0; color: #131313; } .pricing-container .features li { margin: 16px 0; } .pricing-container .get-plan-btn { text-decoration: none; color: #222; margin-bottom: 24px; display: inline-block; background: transparent; border: 2px solid #292929; border-radius: 8px; padding: 8px 32px; font-size: 18px; text-transform: uppercase; font-weight: bold; transition: 400ms; } /* Hover */ .pricing-container .plan:hover { transform: translateY(-8px); box-shadow: 0 6px 16px 4px rgba(0, 0, 0, 0.4); } .pricing-container .get-plan-btn:hover { background: rgba(255, 255, 255, 0.4); } /* Media Queries */ @media (max-width: 740px) { .pricing-container { flex-direction: column; } .pricing-container .plan { margin: 16px 0; } } (code-box)

Step 4 :– अब इस widget को आप अपनी इच्छानुसार कहीं भी install कर सकते हो अगर आप इस widget को Specific पोस्ट या पेज में add करना चाहते हो तो इसके लिए आप को Posts Section में जाकर Create a New Post करना होगा जब आप नयी पोस्ट create करोगे तो आपको Compose Mode को हटाकर Edit Html पर click करना होगा |

Step 5 :– अब नीचे दिए गए Html code को कॉपी करके वहां Paste करना होगा |

<div class="pricing-container"> <div class="plan"> <h2>Basic</h2> <div class="price">$29.99 <span class="duration">/month</span></div> <ul class="features"> <li>Speed</li> <li>Basic Security</li> <li>Email Support</li> <li>Plugins</li> </ul> <a href="#" class="get-plan-btn"> Get Plan </a> </div> <div class="plan best-value"> <h2>Gold</h2> <div class="price">$99.99 <span class="duration">/year</span></div> <ul class="features"> <li>Speed</li> <li>Advanced Security</li> <li>Phone Support</li> <li>Plugins</li> </ul> <a href="#" class="get-plan-btn"> Get Plan </a> </div> <div class="plan"> <h2>Premium</h2> <div class="price">$49.99 <span class="duration">/month</span></div> <ul class="features"> <li>Speed</li> <li>Advanced Security</li> <li>Phone Support</li> <li>Plugins & Themes</li> </ul> <a href="#" class="get-plan-btn"> Get Plan </a> </div> </div>(code-box)

अब आप अपनी पोस्ट या पेज पब्लिश करदे और आपकी pricing टेबल widget add हो चूका है |

निष्कर्ष – आपको यह How To Add Modern Pricing Table in Blogger Website का आर्टिकल कैसा लगा।आप नीचे कमेंट बॉक्स में कमेंट करके जरूर बताएं।या किसी प्रकार का Suggestion देना भी चाहते है तो आप नीचे Comment Box में अपनी राय हमारे साथ Share कर सकते है।