How To Add Pricing Table in Blogger Using Html And Css ?

Hello Everyone, in this post I will share how to add pricing table in blogger. This pricing table is a pure CSS program which means I have used only HTML and CSS to create these cards. I hope you understand the code behind making this card.

This card is made using HTML and CSS only, so when you click the buy button no action or anything happens.

If you want to install this pricing table on your website, then read the complete post and follow the given steps.

What is Pricing Table ?

Pricing table is one such way by which we can easily display any type of price by table. On many websites, you must have seen that along with the list of an item, its price is also written in the table. This pricing table is made with the help of very pure html and css. No JavaScript has been used in this, which will not affect the loading speed of your website.

How To Add Pricing Table in Blogger :-

Step 1 :- First of All Go To Blogger.Com And Login Your Account.

Step 2 :- Then don't forget to back up your template first to avoid editing mistakes.

Step 3 :- Then Click on Theme Menu.

Step 4 :- Then Click on Edit Html.

Step 5 :- Then Copy The t Awesome Code and Place Above Code </head>.

<link crossorigin='anonymous' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css' integrity='sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==' referrerpolicy='no-referrer' rel='stylesheet'/>

Step 6 :- Then Copy The Css Code and Place Above Code </head>.

 <style type='text/css'>
/* This Pricing Table Design By Www.SmartTechMukesh.Com */
:root{
--yellow-color:#ffd861;
--green-color:#43ef8b;
--ribbon-color:#a26bfa;
--basic-background:#ffecb3;
--premium-background:#d0b3ff;
--ultimate-background:#baf8d4;}
.stmWrapper{max-width:1090px;width:100%;margin:auto;display:flex;flex-wrap:wrap;justify-content:space-between;}
.stmWrapper .stmTable{background:#fff;width:calc(33% - 20px);padding:30px 30px;position:relative;box-shadow:0 5px 10px rgba(0,0,0,0.1);}
.stmTable .price-section{display:flex;justify-content:center;}
.stmTable .stm-Price-area{height:120px;width:120px;border-radius:50%;padding:2px;}
.stm-Price-area .inner-area{height:100%;width:100%;border-radius:50%;border:3px solid #fff;line-height:117px;text-align:center;color:#fff;position:relative;}
.stm-Price-area .inner-area .text{font-size:25px;font-weight:400;position:absolute;top:-10px;left:17px;}
.stm-Price-area .inner-area .price{font-size:45px;font-weight:500;margin-left:16px;}
.stmTable .stm-Package-name{width:100%;height:2px;margin:35px 0;position:relative;}
.stmTable .stm-Package-name::before{position:absolute;top:50%;left:50%;font-size:25px;font-weight:500;background:#fff;padding:0 15px;transform:translate(-50%,-50%);}
.stmTable .features li{margin-bottom:15px;list-style:none;display:flex;justify-content:space-between;}
.features li .list-name{font-size:17px;font-weight:400;}
.features li .icon{font-size:15px;}
.features li .icon.check{color:#2db94d;}
.features li .icon.cross{color:#cd3241;}
.stmTable .btn{width:100%;display:flex;margin-top:35px;justify-content:center;}
.stmTable .btn button{width:80%;height:50px;color:#fff;font-size:20px;font-weight:500;border:none;outline:none;border-radius:25px;cursor:pointer;transition:all 0.3s ease;}
.stmTable .btn button:hover{border-radius:5px;}
.stm-Basic .features li::selection{background:var(--yellow-color);}
.stm-Basic::selection,.stm-Basic .stm-Price-area,.stm-Basic .inner-area{background:var(--yellow-color);}
.stm-Basic .btn button{border:2px solid var(--yellow-color);background:#fff;color:var(--yellow-color);}
.stm-Basic .btn button:hover{background:var(--yellow-color);color:#fff;}
.stm-Premium::selection,.stm-Premium .stm-Price-area,.stm-Premium .inner-area,.stm-Premium .btn button{background:var(--ribbon-color);}
.stm-Premium .btn button:hover{background:#833af8;}
.stm-Ultimate::selection,.stm-Ultimate .stm-Price-area,.stm-Ultimate .inner-area{background:var(--green-color);}
.stm-Ultimate .btn button{border:2px solid var(--green-color);color:var(--green-color);background:#fff;}
.stm-Ultimate .btn button:hover{background:var(--green-color);color:#fff;}
.stm-Basic .stm-Package-name{background:var(--basic-background);}
.stm-Premium .stm-Package-name{background:var(--premium-background);}
.stm-Ultimate .stm-Package-name{background:var(--ultimate-background);}
.stm-Basic .stm-Package-name::before{content:"Basic";}
.stm-Premium .stm-Package-name::before{content:"Premium";font-size:24px;}
.stm-Ultimate .stm-Package-name::before{content:"Ultimate";font-size:24px;}
@media (max-width:1020px){.stmWrapper .stmTable{width:calc(50% - 20px);margin-bottom:40px;}}
@media (max-width:698px){.stmWrapper .stmTable{width:100%;}}
::selection{color:#fff;}
.stmTable .ribbon{width:150px;height:150px;position:absolute;top:-10px;left:-10px;overflow:hidden;}
.stmTable .ribbon::before,.stmTable .ribbon::after{position:absolute;content:"";z-index:-1;display:block;border:7px solid #4606ac;border-top-color:transparent;border-left-color:transparent;}
.stmTable .ribbon::before{top:0;right:15px;}
.stmTable .ribbon::after{bottom:15px;left:0;}
.stmTable .ribbon span{position:absolute;top:30px;right:0;transform:rotate(-45deg);width:200px;background:var(--ribbon-color);padding:10px 0;color:#fff;text-align:center;font-size:17px;text-transform:uppercase;box-shadow:0 5px 10px rgba(0,0,0,0.12);}
</style>

Step 7 :- Then Don't Forget to Click on Save Theme.

Step 8 :- Now copy this HTML code of Pricing table and paste this HTML code where you want it to be placed.

<div class="stmWrapper">
    <div class="stmTable stm-Basic">
      <div class="price-section">
        <div class="stm-Price-area">
          <div class="inner-area">
            <span class="text">$</span>
            <span class="price">29</span>
          </div>
        </div>
      </div>
      <div class="stm-Package-name"></div>
      <ul class="features">
        <li>
          <span class="list-name">One Selected Template</span>
          <span class="icon check"><i class="fas fa-check"></i></span>
        </li>
        <li>
          <span class="list-name">100% Responsive Design</span>
          <span class="icon check"><i class="fas fa-check"></i></span>
        </li>
        <li>
          <span class="list-name">Credit Remove Permission</span>
          <span class="icon cross"><i class="fas fa-times"></i></span>
        </li>
        <li>
          <span class="list-name">Lifetime Template Updates</span>
          <span class="icon cross"><i class="fas fa-times"></i></span>
        </li>
      </ul>
      <div class="btn"><button>Purchase</button></div>
    </div>
    <div class="stmTable stm-Premium">
      <div class="ribbon"><span>Recommend</span></div>
      <div class="price-section">
        <div class="stm-Price-area">
          <div class="inner-area">
            <span class="text">$</span>
            <span class="price">59</span>
          </div>
        </div>
      </div>
      <div class="stm-Package-name"></div>
      <ul class="features">
        <li>
          <span class="list-name">Five Existing Templates</span>
          <span class="icon check"><i class="fas fa-check"></i></span>
        </li>
        <li>
          <span class="list-name">100% Responsive Design</span>
          <span class="icon check"><i class="fas fa-check"></i></span>
        </li>
        <li>
          <span class="list-name">Credit Remove Permission</span>
          <span class="icon check"><i class="fas fa-check"></i></span>
        </li>
        <li>
          <span class="list-name">Lifetime Template Updates</span>
          <span class="icon cross"><i class="fas fa-times"></i></span>
        </li>
      </ul>
      <div class="btn"><button>Purchase</button></div>
    </div> 
    <div class="stmTable stm-Ultimate">
      <div class="price-section">
        <div class="stm-Price-area">
          <div class="inner-area">
            <span class="text">$</span>
            <span class="price">99</span>
          </div>
        </div>
      </div>
      <div class="stm-Package-name"></div>
      <ul class="features">
        <li>
          <span class="list-name">All Existing Templates</span>
          <span class="icon check"><i class="fas fa-check"></i></span>
        </li>
        <li>
          <span class="list-name">100% Responsive Design</span>
          <span class="icon check"><i class="fas fa-check"></i></span>
        </li>
        <li>
          <span class="list-name">Credit Remove Permission</span>
          <span class="icon check"><i class="fas fa-check"></i></span>
        </li>
        <li>
          <span class="list-name">Lifetime Template Updates</span>
          <span class="icon check"><i class="fas fa-check"></i></span>
        </li>
      </ul>
      <div class="btn"><button>Purchase</button></div>
    </div>
  </div>
  

Conclusion :-

In this post I have shared with you all How To Add Pricing Table in Blogger. So how did you like this post, you can tell by commenting, if you have any question then you can comment. Thanks for visiting our website.

Refrence:
Www.SmartTechMukesh.Com