Easy Way to Add Pricing Table in Blogger


Hello friends! Welcome to Cooling guruji blog. So in today's article we are going to talk about How to Add Pricing Table in Blogger. And what is this & how can we use them. So we will know all these things in this article. So stay tuned in this article and know in full details.



What is Pricing Table?

So if you do not know what is the Pricing Table? So let me tell you that Pricing Table is one way. With the help of which we can write any type of price in the table by punishment.

If you have visited any website where anything similar is sold. You must have seen that along with the list of that item, you also get to see its price.

Nowadays this Pricing Table is very popular. And almost everyone uses them in their website.

Now let me tell why I have told this Pricing Table in Blogger. I have talked about this because this Pricing Table feature is available only and only in WordPress. You also get many such plugins in WordPress. With the help of which you can easily make Pricing Table. But today we will make in blogger.

But if your blog or website is on ➤Blogger. So you do not get to use any kind of plugins in blogger. But let me tell you that today I can easily add this Pricing Table to my Blogger blog through some coding.



Add Pricing Table in Blogger Step By Step

So now I have explained all the steps in full detail below. You have to follow all these steps exactly as you have been told.

Step 1 – First of all you have to log in to Blogger Dashboard.
Step 2 - Now you have to go to the theme below and click on Edit HTML.
Step 3 - Now you have to search ]]></b:skin> by pressing ctrl+f.
Step 4 – Below you will find some CSS Code, copy it and paste it on ]]></b:skin> and click on Save.


.table {width:30%;margin:0 10px;background:#fff;text-align:center;float:left;}.table.standard {background:rgba(0,245,255,0.1);}.table h2 {color:#fff;margin:0;padding:5px 0;text-align:center;font:Bold 25px armata;cursor:pointer;z-index:999;position:relative;}.table.economic h2 {background:#4593e3;}.table.standard h2 {background:#16a085;}.table.premium h2 {background:#cd4436;}.table .price {font:15px Armata;color:#fff;padding:10px 25px;display:inline-block;border-radius:0px 0px 100% 100%;cursor:pointer;}.table.economic .price {background:#4593e3;}.table.standard .price {background:#16a085;}.table.premium .price {background:#cd4436;}.table:hover .price {border-radius:0;}.table ul {margin:9px 0;padding:0px;}.table ul li {list-style:none;font:15px Armata;padding:10px 5px;border:1px solid rgba(238,238,238,0.29);margin:2px 10px;}.table.economic ul li:hover {border-color:#4593e3;}.table.premium ul li:hover {border-color:#cd4436;}.table.standard ul li:hover {border-color:#16a085;}.table a {text-decoration:none;display:inline-block;overflow:hidden;color:#000;margin:1px 0 10px;text-transform:uppercase;}.table a:hover {color:#fff;}.table .button span {position:relative;display:inline-block;-webkit-transition:-webkit-transform 0.3s;-moz-transition:-moz-transform 0.3s;transition:transform 0.3s;padding:5px 35px;font:Bold 20px Armata;}.table .button span::before {position:absolute;top:100%;content:attr(data-hover);font-weight:700;-webkit-transform:translate3d(0,5px,10px);-moz-transform:translate3d(0,5px,10px):transform:translate3d(0,5px,10px):}.table .button:hover span,.table .button:focus span {-webkit-transform:translateY(-100%);-moz-transform:translateY(-100%);transform:translateY(-100%);}.table.economic a {border: 2px solid #4593e3;}.table.economic a:hover {background: #4593e3;}.table.standard a {border:2px solid #16a085;}.table.standard a:hover {background:#16a085;}.table.premium a {border:2px solid #cd4436;}.table.premium a:hover {background:#cd4436;}
Step 5 – Now below you will get the HTML code of the Pricing Table. Copy it



<div class="table economic">
<h2>Economic</h2>
<span class="price">$10/year</span>
<ul>
  <li>20 GB space</li>
  <li>Unlimited Bandwidth</li>
  <li>15 Email Accounts</li>
  <li>10 MySQL Database</li>
  <li>24&#215;7 Online Support</li>
  <li>100% Money Back Guarantee</li>
</ul>
<a class="button" href="#"><span data-hover="Buy">Buy</span></a>
</div>
<div class="table standard">
<h2>Standard</h2>
<span class="price">$45/year</span>
<ul>
  <li>100 GB space</li>
  <li>Unlimited Bandwidth</li>
  <li>50 Email Accounts</li>
  <li>35 MySQL Database</li>
  <li>24&#215;7 Online Support</li>
  <li>100% Money Back Guarantee</li>
</ul>
<a class="button" href="#"><span data-hover="Buy">Buy</span></a>
</div>
<div class="table premium">
<h2>Premium</h2>
<span class="price">$99/year</span>
<ul>
  <li>Unlimited space</li>
  <li>Unlimited Bandwidth</li>
  <li>Unlimited Email Accounts</li>
  <li>Unlimited&nbsp;MySQL Database</li>
  <li>24&#215;7 Online Support</li>
  <li>100% Money Back Guarantee</li>
</ul>
<a class="button" href="#"><span data-hover="Buy">Buy</span></a>
</div>

Step 6 – Now you have to paste this code. Where in the post you want to show this Pricing Table.
Step 7 – Now save you, your entire work has been completed.

So you can easily add Pricing Table to your Blogger blog in this way.



Conclusion – And how did you like this Add Pricing Table in Blogger article. So you must tell by commenting in the comment box below. And also want to give any kind of suggestion. So you can share your opinion with us in the comment box below. And can you tell us what kind of script did you do?