Kamis, 26 Agustus 2021

How to Add Responsive Pricing Table in Blogger

How to Add Responsive Pricing Table in Blogger

How to Add Responsive Pricing Table in Blogger

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 Demo

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.

अपनी थीम में कोड ]]></b:skin> को खोजें और उसके ऊपर निम्नलिखित CSS कोड पेस्ट करें।.

/* Pricing Table CSS Codes */
a{text-decoration:none}
.pricingTable{text-align:center;background:#fff;margin:0 -15px;box-shadow:0 0 10px #ababab;padding-bottom:40px;border-radius:10px;color:#cad0de;transform:scale(1);transition:all .5s ease 0s}
.pricingTable:hover{transform:scale(1.05);z-index:1}
.pricingTable .pricingTable-header{padding:40px 0;background:#f5f6f9;border-radius:10px 10px 50% 50%;transition:all .5s ease 0s}
.pricingTable:hover .pricingTable-header{background:#ff9624}
.pricingTable .pricingTable-header i{font-size:50px;color:#858c9a;margin-bottom:10px;transition:all .5s ease 0s}
.pricingTable .price-value{font-size:35px;color:#ff9624;transition:all .5s ease 0s}
.pricingTable .month{display:block;font-size:14px;color:#cad0de}
.pricingTable:hover .month,.pricingTable:hover .price-value,.pricingTable:hover .pricingTable-header i{color:#fff}
.pricingTable .heading{font-size:24px;color:#ff9624;margin-bottom:20px;text-transform:uppercase}
.pricingTable .pricing-content ul{list-style:none;padding:0;margin-bottom:30px}
.pricingTable .pricing-content ul li{line-height:30px;color:#a7a8aa}
.pricingTable .pricingTable-signup a{display:inline-block;font-size:15px;color:#fff;padding:10px 35px;border-radius:20px;background:#ffa442;text-transform:uppercase;transition:all .3s ease 0s}
.pricingTable .pricingTable-signup a:hover{box-shadow:0 0 10px #ffa442}
.pricingTable.blue .heading,.pricingTable.blue .price-value{color:#4b64ff}
.pricingTable.blue .pricingTable-signup a,.pricingTable.blue:hover .pricingTable-header{background:#4b64ff}
.pricingTable.blue .pricingTable-signup a:hover{box-shadow:0 0 10px #4b64ff}
.pricingTable.red .heading,.pricingTable.red .price-value{color:#ff4b4b}
.pricingTable.red .pricingTable-signup a,.pricingTable.red:hover .pricingTable-header{background:#ff4b4b}
.pricingTable.red .pricingTable-signup a:hover{box-shadow:0 0 10px #ff4b4b}
.pricingTable.green .heading,.pricingTable.green .price-value{color:#40c952}
.pricingTable.green .pricingTable-signup a,.pricingTable.green:hover .pricingTable-header{background:#40c952}
.pricingTable.green .pricingTable-signup a:hover{box-shadow:0 0 10px #40c952}
.pricingTable.blue:hover .price-value,.pricingTable.green:hover .price-value,.pricingTable.red:hover .price-value{color:#fff}
@media screen and (max-width:990px){.pricingTable{margin:0 0 20px}}

Step 2. Adding HTML Codes

Now paste the following HTML Codes in post/page where you want to add Pricing Table.

अब निम्नलिखित HTML कोड को पोस्ट/पेज में पेस्ट करें जहां आप प्राइसिंग टेबल जोड़ना चाहते हैं।

<!-- Pricing Table HTML Codes -->
<div class="demo">
<div class="container">
<div class="row">
<div class="col-md-3 col-sm-6">
<div class="pricingTable">
<div class="pricingTable-header">
<i class="fa fa-adjust"></i>
<div class="price-value"> $10.00 <span class="month">per month</span> </div>
</div>
<h3 class="heading">Standard</h3>
<div class="pricing-content">
<ul>
<li><b>50GB</b> Disk Space</li>
<li><b>50</b> Email Accounts</li>
<li><b>50GB</b> Monthly Bandwidth</li>
<li><b>10</b> subdomains</li>
<li><b>15</b> Domains</li>
</ul></div>
<div class="pricingTable-signup">
<a href="#">sign up</a>
</div></div></div>

<div class="col-md-3 col-sm-6">
<div class="pricingTable green">
<div class="pricingTable-header">
<i class="fa fa-briefcase"></i>
<div class="price-value"> $20.00 <span class="month">per month</span> </div>
</div>
<h3 class="heading">Business</h3>
<div class="pricing-content">
<ul>
<li><b>60GB</b> Disk Space</li>
<li><b>60</b> Email Accounts</li>
<li><b>60GB</b> Monthly Bandwidth</li>
<li><b>15</b> subdomains</li>
<li><b>20</b> Domains</li>
</ul></div>
<div class="pricingTable-signup">
<a href="#">sign up</a>
</div></div></div>
<div class="col-md-3 col-sm-6">
<div class="pricingTable blue">
<div class="pricingTable-header">
<i class="fa fa-diamond"></i>
<div class="price-value"> $30.00 <span class="month">per month</span> </div>
</div>
<h3 class="heading">Premium</h3>
<div class="pricing-content">
<ul>
<li><b>70GB</b> Disk Space</li>
<li><b>70</b> Email Accounts</li>
<li><b>70GB</b> Monthly Bandwidth</li>
<li><b>20</b> subdomains</li>
<li><b>25</b> Domains</li>
</ul>
</div>
<div class="pricingTable-signup">
<a href="#">sign up</a>
</div></div></div>
<div class="col-md-3 col-sm-6">
<div class="pricingTable red">
<div class="pricingTable-header">
<i class="fa fa-cube"></i>
<div class="price-value"> $40.00 <span class="month">per month</span> </div>
</div>
<h3 class="heading">Extra</h3>
<div class="pricing-content">
<ul>
<li><b>80GB</b> Disk Space</li>
<li><b>80</b> Email Accounts</li>
<li><b>80GB</b> Monthly Bandwidth</li>
<li><b>25</b> subdomains</li>
<li><b>30</b> Domains</li>
</ul> </div>
<div class="pricingTable-signup">
<a href="#">sign up</a>
</div></div></div></div></div></div>

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.

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

Click To Download

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.

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

अगर आपको यह लेख मददगार लगता है तो इसे अपने दोस्तों के साथ शेयर करें और हमें अपनी प्रतिक्रिया दें।

0 komentar: