How to Add Pricing Table in Blogger

An easy method to Add Pricing Table in Blogger

Hello friends! Today we are going to talk about Easy way to Add Pricing Table in Blogger. And How to add this pricing table in Blogger also what is pricing table? We will know about this table in this article. So stay with us and know more details in this article.


What is the Pricing Table?

First, we know about what is the pricing table? The Pricing Table is the way that help of which we can write any type of price in the table.

$ads={2}

If you have a website where you want to sell something. You must have seen that along with the list of that item and also get its price in the table.

This Pricing Table is very popular and almost every website admins use this on their website.


Pricing Table in Blogger

Why I have told this Pricing Table in Blogger. Because this Pricing Table feature is available only and only in WordPress. You also get many plugins in WordPress. With the help of these plugins, you can easily make the Pricing Table.


But if you have a blog or website on Blogger. Then you do not get to use any type of plugins in Blogger like WordPress. But it is very easy to add in Blogger without the use of any plugin. I can easily add this Pricing Table to my Blogger blog through some Coding scripts.


Add Pricing Table in Blogger Step By Step

So now I have explained all the steps below. You have to follow all these steps in exactly the same way as mentioned.

$ads={2}

Step 1 - First you have to log in to Blogger.com Dashboard.

Step 2 - Click on the theme section and then click on Customize arrow.

Step 3 - Now Click on Edit HTML

Step 4 - Now press ctrl + f and then appeared a search box. 

Step 5- Search for ]]> </ b: skin>.

Step 5 - Below I will provide a CSS code, copy it.

Step 6 - Paste this below code above this ]]> </ b: skin> and click on Save icon.


.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 7 - Now below I also provide the HTML code of Pricing Table. Copy this code.

$ads={2}

<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 8 - Now paste this code in the post where you want to show this Pricing Table.

Step 9 - Now save this post.

You can easily add the Pricing Table to your blogger.

$ads={2}

Conclusion

How did you like this article about Add Pricing Table in Blogger? You must give us your feedback in the comment box below. And also want to give some kind of suggestion. If you have to share any suggestion with us then you give in the comment box below.


Post a Comment

Please do not enter any spam link in the comment box.

Previous Post Next Post
close