How to Add Responsive Pricing Table in Blogger Website
Hello Guys, Welcome to ASThemesWorld. If you are searching for How to Add Pricing Table in Blogger then this article will be very helpful for you. In this post, I'm going to guide you step by step on How to Add Pricing Table in Blogger. So, follow the easy steps and learn more about how to add pricing table in Blogger.
नमस्कार दोस्तों, ASThemesWorld में आपका स्वागत है। अगर आप ब्लॉगर में Pricing Table को कैसे जोड़े खोज रहे हैं तो यह लेख आपके लिए बहुत मददगार होगा। इस पोस्ट में, मैं आपको ब्लॉगर में प्राइसिंग टेबल को कैसे जोड़ें पर चरण दर चरण मार्गदर्शन करने जा रहा हूँ। तो, आसान चरणों का पालन करें और ब्लॉगर में प्राइसिंग टेबल जोड़ने के तरीके के बारे में और जानें।
What is Pricing Table?
Maybe most of the readers of this article already know what Pricing Table is, but as a reminder, it will be explained again here. Pricing Table is a design element that requires the designer to communicate information clearly and precisely, exposing as many features as possible and making it as easy and as intuitive as possible for a user to make the best choice
Pricing Table क्या होती है?
हो सकता है कि इस लेख के अधिकांश पाठक पहले से ही जानते हों कि मूल्य निर्धारण तालिका क्या है, लेकिन एक अनुस्मारक के रूप में, इसे यहाँ फिर से समझाया जाएगा। मूल्य निर्धारण तालिका एक डिज़ाइन तत्व है जिसके लिए डिज़ाइनर को जानकारी को स्पष्ट और सटीक रूप से संप्रेषित करने की आवश्यकता होती है, जितनी संभव हो उतनी सुविधाओं को उजागर करना और उपयोगकर्ता के लिए सर्वोत्तम विकल्प बनाने के लिए जितना संभव हो उतना आसान और सहज बनाना।
How to Add Pricing Table?
We will add the pricing table in two steps, first adding css codes and second adding html codes, both are very easy, just follow the steps given below carefully.
Step 1. Adding CSS Codes
Look for the code ]]></b:skin> and paste the following CSS Codes above it.
Pricing Table को कैसे जोड़ें?
हम प्राइसिंग टेबल को दो चरणों में जोड़ेंगे, पहला सीएसएस कोड जोड़ना और दूसरा एचटीएमएल कोड जोड़ना, दोनों बहुत आसान हैं, बस नीचे दिए गए चरणों का ध्यानपूर्वक पालन करें।
Step 1. CSS Code जोड़ना
अपनी थीम में कोड ]]></b:skin> को खोजें और उसके ऊपर निम्नलिखित CSS कोड पेस्ट करें।.
/* Pricing Table CSS */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400&display=swap');*{box-sizing:border-box}
.card_container{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:40px;height:70%;padding:20px;align-items:center;justify-content:center}
.card_container .single_card{box-shadow:0 0 4px #0001,0 1px 25px #0001;padding:20px;border-radius:10px;position:relative;background-color:#fff;border:2px solid transparent;user-select:none;transition:0.3s ease-in-out}
.card_container .single_card .popular{position:absolute;top:-1px;left:50%;transform:translateX(-50%);background-image:linear-gradient(180deg,#f49228,#ff6a00);color:#fff;box-shadow:0 2px 6px #0003;border-radius:0 0 15px 15px;padding:6px 20px}
.card_container .single_card.active,.card_container .single_card:hover{box-shadow:0 0 10px #0001,0 1px 35px #0002;transform:scale(1.06);transform-origin:50% 100%;border-color:rgb(255,123,0)}
.card_container .single_card .header{text-align:center;padding:30px 0 20px}
.card_container .single_card .header .slogan{font-size:14px;color:#777;display:block}
.card_container .single_card .header .package_name{font-size:18px;font-weight:bold;text-transform:uppercase;color:#ff6a00;letter-spacing:1px;padding:15px 0;display:block}
.card_container .single_card .body{text-align:center}
.card_container .single_card .body .price{font-size:55px;display:block;color:#444;padding-bottom:15px;border-bottom:2px solid #3331}
.card_container .single_card .body .price sup,.card_container .single_card .body .price sub{color:#aaa;font-size:40px}
.card_container .single_card .body .price sub{font-size:14px}
.card_container .single_card .body .package_featur{text-align:left;list-style:none;padding-left:55px}
.card_container .single_card .body .package_featur li{position:relative;padding:10px 0;color:#333;font-size:15px}
.card_container .single_card .body .package_featur li::after{content:'';display:inline-block;width:15px;height:15px;background:linear-gradient(45deg,#ff4500,rgb(255,68,0));box-shadow:0 0 4px rgba(255,68,0,0.4),0 0 8px rgba(255,68,0,0.5);border-radius:50%;position:absolute;top:50%;left:-30px;transform:translateY(-50%)}
.card_container .single_card .footer{padding:15px 0;display:flex;align-items:center;justify-content:center}
.card_container .single_card .footer a{text-decoration:none;display:block;border:1px solid red;border-radius:30px;color:#fff;background-image:linear-gradient(45deg,#ff4500,rgb(255,68,0));box-shadow:0 2px 14px #4443,0 0 0 4px rgba(255,68,0,0.15);position:relative;width:100%;padding:12px 15px;transition:0.2s ease-in-out}
.card_container .single_card .footer a:hover{border-radius:6px;transform:scale(1.05);box-shadow:0 1px 4px #4445,0 2px 14px #0004}
.card_container .single_card .footer a:active{transform:scale(1)}
.card_container .single_card .footer .icon{display:inline-block;position:absolute;right:0;top:50%;transform:translate(-10%,-50%);width:35px;height:35px;border-radius:50%;padding:8px;border:1px solid #fffc;background-image:linear-gradient(45deg,rgb(255,136,0),#ff4500);box-shadow:0 2px 6px #4442;transition:0.2s ease-in-out}
.card_container .single_card .footer .icon svg{fill:#fff;width:100%;height:100%}
.card_container .single_card .footer a:hover .icon{transform:translate(-40%,-50%) scale(0.9)}Step 2. Adding HTML Codes
Now paste the following HTML Codes in post/page where you want to add Pricing Table.
Step 2. HTML Code जोड़ना
अब निम्नलिखित HTML कोड को पोस्ट/पेज में पेस्ट करें जहां आप प्राइसिंग टेबल जोड़ना चाहते हैं।
<div class="card_container">
<div class="single_card">
<div class="header">
<span class="slogan">Invision account for</span>
<span class="package_name">Professional</span>
</div>
<div class="body">
<span class="price">
<sup>$</sup>
25
<sub>/mo</sub>
</span>
<ul class="package_featur">
<li><span class="txt">Up to 12 users</span></li>
<li><span class="txt">24 hour trusted support</span></li>
<li><span class="txt">Unlimited number of projects</span></li>
<li><span class="txt">+All Pro Features</span></li>
</ul>
</div>
<div class="footer">
<a href="#">
<span class="text">Buy This package</span>
<span class="icon">
<svg viewBox="0 0 451.846 451.847">
<path
d="M345.441,248.292L151.154,442.573c-12.359,12.365-32.397,12.365-44.75,0c-12.354-12.354-12.354-32.391,0-44.744 L278.318,225.92L106.409,54.017c-12.354-12.359-12.354-32.394,0-44.748c12.354-12.359,32.391-12.359,44.75,0l194.287,194.284 c6.177,6.18,9.262,14.271,9.262,22.366C354.708,234.018,351.617,242.115,345.441,248.292z" />
</svg>
</span>
</a>
</div>
</div>
<div class="single_card active">
<span class="popular">Popular</span>
<div class="header">
<span class="slogan">Invision account for</span>
<span class="package_name">Professional</span>
</div>
<div class="body">
<span class="price">
<sup>$</sup>
25
<sub>/mo</sub>
</span>
<ul class="package_featur">
<li><span class="txt">Up to 12 users</span></li>
<li><span class="txt">24 hour trusted support</span></li>
<li><span class="txt">Unlimited number of projects</span></li>
<li><span class="txt">+All Pro Features</span></li>
</ul>
</div>
<div class="footer">
<a href="#">
<span class="text">Buy This package</span>
<span class="icon">
<svg viewBox="0 0 451.846 451.847">
<path
d="M345.441,248.292L151.154,442.573c-12.359,12.365-32.397,12.365-44.75,0c-12.354-12.354-12.354-32.391,0-44.744 L278.318,225.92L106.409,54.017c-12.354-12.359-12.354-32.394,0-44.748c12.354-12.359,32.391-12.359,44.75,0l194.287,194.284 c6.177,6.18,9.262,14.271,9.262,22.366C354.708,234.018,351.617,242.115,345.441,248.292z" />
</svg>
</span>
</a>
</div>
</div>
<div class="single_card">
<div class="header">
<span class="slogan">Invision account for</span>
<span class="package_name">Professional</span>
</div>
<div class="body">
<span class="price">
<sup>$</sup>
25
<sub>/mo</sub>
</span>
<ul class="package_featur">
<li><span class="txt">Up to 12 users</span></li>
<li><span class="txt">24 hour trusted support</span></li>
<li><span class="txt">Unlimited number of projects</span></li>
<li><span class="txt">+All Pro Features</span></li>
</ul>
</div>
<div class="footer">
<a href="#">
<span class="text">Buy This package</span>
<span class="icon">
<svg viewBox="0 0 451.846 451.847">
<path
d="M345.441,248.292L151.154,442.573c-12.359,12.365-32.397,12.365-44.75,0c-12.354-12.354-12.354-32.391,0-44.744 L278.318,225.92L106.409,54.017c-12.354-12.359-12.354-32.394,0-44.748c12.354-12.359,32.391-12.359,44.75,0l194.287,194.284 c6.177,6.18,9.262,14.271,9.262,22.366C354.708,234.018,351.617,242.115,345.441,248.292z" />
</svg>
</span>
</a>
</div>
</div>
Another Method
This method is easier than the above, in this you will not have to follow two steps for the pricing table. In this, just paste the codes given below where you have to add the pricing table.
यह तरीका ऊपर वाले से आसान है, इसमें आपको प्राइसिंग टेबल के लिए दो स्टेप फॉलो नहीं करने होंगे। इसमें बस नीचे दिए गए कोड को वहा पेस्ट करें जहां आपको प्राइसिंग टेबल जोड़ना है।
<div class="card_container">
<div class="single_card">
<div class="header">
<span class="slogan">Invision account for</span>
<span class="package_name">Professional</span>
</div>
<div class="body">
<span class="price">
<sup>$</sup>
25
<sub>/mo</sub>
</span>
<ul class="package_featur">
<li><span class="txt">Up to 12 users</span></li>
<li><span class="txt">24 hour trusted support</span></li>
<li><span class="txt">Unlimited number of projects</span></li>
<li><span class="txt">+All Pro Features</span></li>
</ul>
</div>
<div class="footer">
<a href="#">
<span class="text">Buy This package</span>
<span class="icon">
<svg viewBox="0 0 451.846 451.847">
<path
d="M345.441,248.292L151.154,442.573c-12.359,12.365-32.397,12.365-44.75,0c-12.354-12.354-12.354-32.391,0-44.744 L278.318,225.92L106.409,54.017c-12.354-12.359-12.354-32.394,0-44.748c12.354-12.359,32.391-12.359,44.75,0l194.287,194.284 c6.177,6.18,9.262,14.271,9.262,22.366C354.708,234.018,351.617,242.115,345.441,248.292z" />
</svg>
</span>
</a>
</div>
</div>
<div class="single_card active">
<span class="popular">Popular</span>
<div class="header">
<span class="slogan">Invision account for</span>
<span class="package_name">Professional</span>
</div>
<div class="body">
<span class="price">
<sup>$</sup>
25
<sub>/mo</sub>
</span>
<ul class="package_featur">
<li><span class="txt">Up to 12 users</span></li>
<li><span class="txt">24 hour trusted support</span></li>
<li><span class="txt">Unlimited number of projects</span></li>
<li><span class="txt">+All Pro Features</span></li>
</ul>
</div>
<div class="footer">
<a href="#">
<span class="text">Buy This package</span>
<span class="icon">
<svg viewBox="0 0 451.846 451.847">
<path
d="M345.441,248.292L151.154,442.573c-12.359,12.365-32.397,12.365-44.75,0c-12.354-12.354-12.354-32.391,0-44.744 L278.318,225.92L106.409,54.017c-12.354-12.359-12.354-32.394,0-44.748c12.354-12.359,32.391-12.359,44.75,0l194.287,194.284 c6.177,6.18,9.262,14.271,9.262,22.366C354.708,234.018,351.617,242.115,345.441,248.292z" />
</svg>
</span>
</a>
</div>
</div>
<div class="single_card">
<div class="header">
<span class="slogan">Invision account for</span>
<span class="package_name">Professional</span>
</div>
<div class="body">
<span class="price">
<sup>$</sup>
25
<sub>/mo</sub>
</span>
<ul class="package_featur">
<li><span class="txt">Up to 12 users</span></li>
<li><span class="txt">24 hour trusted support</span></li>
<li><span class="txt">Unlimited number of projects</span></li>
<li><span class="txt">+All Pro Features</span></li>
</ul>
</div>
<div class="footer">
<a href="#">
<span class="text">Buy This package</span>
<span class="icon">
<svg viewBox="0 0 451.846 451.847">
<path
d="M345.441,248.292L151.154,442.573c-12.359,12.365-32.397,12.365-44.75,0c-12.354-12.354-12.354-32.391,0-44.744 L278.318,225.92L106.409,54.017c-12.354-12.359-12.354-32.394,0-44.748c12.354-12.359,32.391-12.359,44.75,0l194.287,194.284 c6.177,6.18,9.262,14.271,9.262,22.366C354.708,234.018,351.617,242.115,345.441,248.292z" />
</svg>
</span>
</a>
</div>
</div>
<style>
/* Pricing Table CSS */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400&display=swap');*{box-sizing:border-box}
.card_container{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:40px;height:70%;padding:20px;align-items:center;justify-content:center}
.card_container .single_card{box-shadow:0 0 4px #0001,0 1px 25px #0001;padding:20px;border-radius:10px;position:relative;background-color:#fff;border:2px solid transparent;user-select:none;transition:0.3s ease-in-out}
.card_container .single_card .popular{position:absolute;top:-1px;left:50%;transform:translateX(-50%);background-image:linear-gradient(180deg,#f49228,#ff6a00);color:#fff;box-shadow:0 2px 6px #0003;border-radius:0 0 15px 15px;padding:6px 20px}
.card_container .single_card.active,.card_container .single_card:hover{box-shadow:0 0 10px #0001,0 1px 35px #0002;transform:scale(1.06);transform-origin:50% 100%;border-color:rgb(255,123,0)}
.card_container .single_card .header{text-align:center;padding:30px 0 20px}
.card_container .single_card .header .slogan{font-size:14px;color:#777;display:block}
.card_container .single_card .header .package_name{font-size:18px;font-weight:bold;text-transform:uppercase;color:#ff6a00;letter-spacing:1px;padding:15px 0;display:block}
.card_container .single_card .body{text-align:center}
.card_container .single_card .body .price{font-size:55px;display:block;color:#444;padding-bottom:15px;border-bottom:2px solid #3331}
.card_container .single_card .body .price sup,.card_container .single_card .body .price sub{color:#aaa;font-size:40px}
.card_container .single_card .body .price sub{font-size:14px}
.card_container .single_card .body .package_featur{text-align:left;list-style:none;padding-left:55px}
.card_container .single_card .body .package_featur li{position:relative;padding:10px 0;color:#333;font-size:15px}
.card_container .single_card .body .package_featur li::after{content:'';display:inline-block;width:15px;height:15px;background:linear-gradient(45deg,#ff4500,rgb(255,68,0));box-shadow:0 0 4px rgba(255,68,0,0.4),0 0 8px rgba(255,68,0,0.5);border-radius:50%;position:absolute;top:50%;left:-30px;transform:translateY(-50%)}
.card_container .single_card .footer{padding:15px 0;display:flex;align-items:center;justify-content:center}
.card_container .single_card .footer a{text-decoration:none;display:block;border:1px solid red;border-radius:30px;color:#fff;background-image:linear-gradient(45deg,#ff4500,rgb(255,68,0));box-shadow:0 2px 14px #4443,0 0 0 4px rgba(255,68,0,0.15);position:relative;width:100%;padding:12px 15px;transition:0.2s ease-in-out}
.card_container .single_card .footer a:hover{border-radius:6px;transform:scale(1.05);box-shadow:0 1px 4px #4445,0 2px 14px #0004}
.card_container .single_card .footer a:active{transform:scale(1)}
.card_container .single_card .footer .icon{display:inline-block;position:absolute;right:0;top:50%;transform:translate(-10%,-50%);width:35px;height:35px;border-radius:50%;padding:8px;border:1px solid #fffc;background-image:linear-gradient(45deg,rgb(255,136,0),#ff4500);box-shadow:0 2px 6px #4442;transition:0.2s ease-in-out}
.card_container .single_card .footer .icon svg{fill:#fff;width:100%;height:100%}
.card_container .single_card .footer a:hover .icon{transform:translate(-40%,-50%) scale(0.9)}
</style>
If your code does not work or you’ve faced any error/problem then please download the source code files from the given download button.
यदि कोड काम नहीं करता है या आपको किसी त्रुटि/समस्या का सामना करना पड़ा है तो कृपया दिए गए डाउनलोड बटन से स्रोत कोड फ़ाइलें डाउनलोड करें।
So this is all about how to add pricing table in blogger, I hope you will not have any problem to make it and you have created pricing table well. If you facing any problem regarding this tutorial then let me know in comments.
If you find this article helpful then do share it with your friends and give us your feedback.
तो यह सब ब्लॉगर में प्राइसिंग टेबल जोड़ने के बारे में है, मुझे आशा है कि आपको इसे बनाने में कोई समस्या नहीं होगी और आपने प्राइसिंग टेबल अच्छी तरह से बनाई है। अगर आपको इस ट्यूटोरियल के बारे में किसी भी समस्या का सामना करना पड़ रहा है तो मुझे टिप्पणियों में बताएं।
अगर आपको यह लेख मददगार लगता है तो इसे अपने दोस्तों के साथ शेयर करें और हमें अपनी प्रतिक्रिया दें।