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 Accomodatio. 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.

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.

/* 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.

<!-- 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>

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.