How To Create A Pricing Table in Blogger 2023.(Updated Code)

Tuesday 1 March 2022

Creating a pricing table can be a very helpful tool for any business. People generally won’t go to your website and just buy what’s on the front page, they need to compare items and see if they are getting the best deal. A flexible pricing table will make a visitor’s experience better because it’s easier to compare different types of products and services.

But the big problem is that you cant create a pricing table using any kind of plugin. Waits! nothing is impossible, If you are facing this kind of trouble, read this tutorial to find out how to create a pricing table on blogger.

What is Pricing Table in Blogger 2023?

Creating a pricing table can be a very helpful tool for any business.

Pricing tables are nothing new, but they’re incredibly effective at making an impression on a potential customer. They should be used on any site where you’re selling a product or service.

A pricing table is a core element of any business website and should be made flexible so that a publisher can modify it according to their needs. The pricing table should also be designed to help readers understand the service or product information more easily by displaying it in a clear format.

You may want to read these posts:

Before Creating Pricing Table please see the demo of how it looks.

Demo

How to Create Pricing Table Widget in blogger 2023?

Most of the Blogger blogs that are related to selling products display a pricing table on their pages. A pricing table is an important part of any e-commerce website. It helps users to see the product prices visually, compare the price and pick up the product. You can add responsive pricing tables in Blogger with a few simple steps.

First Method

Step-1

Go to Blogger Dashboard
Click Theme Section
Then Click Edit Html and Take a Backup of your theme
After that Copy Below CSS Code and paste above ]]></b:skin>
Then Click the To Save Button.

/* Pricing Table CSS By Btoolsbox */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400&display=swap');*{box-sizing:border-box}
.card_container{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:40px;height:70%;padding:20px;align-items:center;justify-content:center}
.card_container .single_card{box-shadow:0 0 4px #0001,0 1px 25px #0001;padding:20px;border-radius:10px;position:relative;background-color:#fff;border:2px solid transparent;user-select:none;transition:0.3s ease-in-out}
.card_container .single_card .popular{position:absolute;top:-1px;left:50%;transform:translateX(-50%);background-image:linear-gradient(180deg,#f49228,#ff6a00);color:#fff;box-shadow:0 2px 6px #0003;border-radius:0 0 15px 15px;padding:6px 20px}
.card_container .single_card.active,.card_container .single_card:hover{box-shadow:0 0 10px #0001,0 1px 35px #0002;transform:scale(1.06);transform-origin:50% 100%;border-color:rgb(255,123,0)}
.card_container .single_card .header{text-align:center;padding:30px 0 20px}
.card_container .single_card .header .slogan{font-size:14px;color:#777;display:block}
.card_container .single_card .header .package_name{font-size:18px;font-weight:bold;text-transform:uppercase;color:#ff6a00;letter-spacing:1px;padding:15px 0;display:block}
.card_container .single_card .body{text-align:center}
.card_container .single_card .body .price{font-size:55px;display:block;color:#444;padding-bottom:15px;border-bottom:2px solid #3331}
.card_container .single_card .body .price sup,.card_container .single_card .body .price sub{color:#aaa;font-size:40px}
.card_container .single_card .body .price sub{font-size:14px}
.card_container .single_card .body .package_featur{text-align:left;list-style:none;padding-left:55px}
.card_container .single_card .body .package_featur li{position:relative;padding:10px 0;color:#333;font-size:15px}
.card_container .single_card .body .package_featur li::after{content:'';display:inline-block;width:15px;height:15px;background:linear-gradient(45deg,#ff4500,rgb(255,68,0));box-shadow:0 0 4px rgba(255,68,0,0.4),0 0 8px rgba(255,68,0,0.5);border-radius:50%;position:absolute;top:50%;left:-30px;transform:translateY(-50%)}
.card_container .single_card .footer{padding:15px 0;display:flex;align-items:center;justify-content:center}
.card_container .single_card .footer a{text-decoration:none;display:block;border:1px solid red;border-radius:30px;color:#fff;background-image:linear-gradient(45deg,#ff4500,rgb(255,68,0));box-shadow:0 2px 14px #4443,0 0 0 4px rgba(255,68,0,0.15);position:relative;width:100%;padding:12px 15px;transition:0.2s ease-in-out}
.card_container .single_card .footer a:hover{border-radius:6px;transform:scale(1.05);box-shadow:0 1px 4px #4445,0 2px 14px #0004}
.card_container .single_card .footer a:active{transform:scale(1)}
.card_container .single_card .footer .icon{display:inline-block;position:absolute;right:0;top:50%;transform:translate(-10%,-50%);width:35px;height:35px;border-radius:50%;padding:8px;border:1px solid #fffc;background-image:linear-gradient(45deg,rgb(255,136,0),#ff4500);box-shadow:0 2px 6px #4442;transition:0.2s ease-in-out}
.card_container .single_card .footer .icon svg{fill:#fff;width:100%;height:100%}
.card_container .single_card .footer a:hover .icon{transform:translate(-40%,-50%) scale(0.9)}

Step-2

Adding Html Code

Now copy the below Html code and paste it into the post or page where you want to create a pricing table and hit publish button.

<div class="card_container">
        <div class="single_card">
            <div class="header">
                <span class="slogan">Invision account for</span>
                <span class="package_name">Professional</span>
            </div>
            <div class="body">
                <span class="price">
                    <sup>$</sup>
                    25
                    <sub>/mo</sub>
                </span>
                <ul class="package_featur">
                    <li><span class="txt">Up to 12 users</span></li>
                    <li><span class="txt">24 hour trusted support</span></li>
                    <li><span class="txt">Unlimited number of projects</span></li>
                    <li><span class="txt">+All Pro Features</span></li>
                </ul>
            </div>
            <div class="footer">
                <a href="#">
                    <span class="text">Buy This package</span>
                    <span class="icon">
                        <svg viewBox="0 0 451.846 451.847">
                            <path
                                d="M345.441,248.292L151.154,442.573c-12.359,12.365-32.397,12.365-44.75,0c-12.354-12.354-12.354-32.391,0-44.744   L278.318,225.92L106.409,54.017c-12.354-12.359-12.354-32.394,0-44.748c12.354-12.359,32.391-12.359,44.75,0l194.287,194.284   c6.177,6.18,9.262,14.271,9.262,22.366C354.708,234.018,351.617,242.115,345.441,248.292z" />
                        </svg>
                    </span>
                </a>
            </div>
        </div>
        <div class="single_card active">
            <span class="popular">Popular</span>
            <div class="header">
                <span class="slogan">Invision account for</span>
                <span class="package_name">Professional</span>
            </div>
            <div class="body">
                <span class="price">
                    <sup>$</sup>
                    25
                    <sub>/mo</sub>
                </span>
                <ul class="package_featur">
                    <li><span class="txt">Up to 12 users</span></li>
                    <li><span class="txt">24 hour trusted support</span></li>
                    <li><span class="txt">Unlimited number of projects</span></li>
                    <li><span class="txt">+All Pro Features</span></li>
                </ul>
            </div>
            <div class="footer">
                <a href="#">
                    <span class="text">Buy This package</span>
                    <span class="icon">
                        <svg viewBox="0 0 451.846 451.847">
                            <path
                                d="M345.441,248.292L151.154,442.573c-12.359,12.365-32.397,12.365-44.75,0c-12.354-12.354-12.354-32.391,0-44.744   L278.318,225.92L106.409,54.017c-12.354-12.359-12.354-32.394,0-44.748c12.354-12.359,32.391-12.359,44.75,0l194.287,194.284   c6.177,6.18,9.262,14.271,9.262,22.366C354.708,234.018,351.617,242.115,345.441,248.292z" />
                        </svg>
                    </span>
                </a>
            </div>
        </div>
        <div class="single_card">
            <div class="header">
                <span class="slogan">Invision account for</span>
                <span class="package_name">Professional</span>
            </div>
            <div class="body">
                <span class="price">
                    <sup>$</sup>
                    25
                    <sub>/mo</sub>
                </span>
                <ul class="package_featur">
                    <li><span class="txt">Up to 12 users</span></li>
                    <li><span class="txt">24 hour trusted support</span></li>
                    <li><span class="txt">Unlimited number of projects</span></li>
                    <li><span class="txt">+All Pro Features</span></li>
                </ul>
            </div>
            <div class="footer">
                <a href="#">
                    <span class="text">Buy This package</span>
                    <span class="icon">
                        <svg viewBox="0 0 451.846 451.847">
                            <path
                                d="M345.441,248.292L151.154,442.573c-12.359,12.365-32.397,12.365-44.75,0c-12.354-12.354-12.354-32.391,0-44.744   L278.318,225.92L106.409,54.017c-12.354-12.359-12.354-32.394,0-44.748c12.354-12.359,32.391-12.359,44.75,0l194.287,194.284   c6.177,6.18,9.262,14.271,9.262,22.366C354.708,234.018,351.617,242.115,345.441,248.292z" />
                        </svg>
                    </span>
                </a>
            </div>
        </div>

Second-Method

Very Easy Method

This method is so much easier, save your time and energy from going through 2 steps. Simply Copy the Below code and paste it into your post or page you create to add a pricing table. This works with both kinds of pricing tables, a simple one and a responsive one.

<div class="card_container">
        <div class="single_card">
            <div class="header">
                <span class="slogan">Invision account for</span>
                <span class="package_name">Professional</span>
            </div>
            <div class="body">
                <span class="price">
                    <sup>$</sup>
                    25
                    <sub>/mo</sub>
                </span>
                <ul class="package_featur">
                    <li><span class="txt">Up to 12 users</span></li>
                    <li><span class="txt">24 hour trusted support</span></li>
                    <li><span class="txt">Unlimited number of projects</span></li>
                    <li><span class="txt">+All Pro Features</span></li>
                </ul>
            </div>
            <div class="footer">
                <a href="#">
                    <span class="text">Buy This package</span>
                    <span class="icon">
                        <svg viewBox="0 0 451.846 451.847">
                            <path
                                d="M345.441,248.292L151.154,442.573c-12.359,12.365-32.397,12.365-44.75,0c-12.354-12.354-12.354-32.391,0-44.744   L278.318,225.92L106.409,54.017c-12.354-12.359-12.354-32.394,0-44.748c12.354-12.359,32.391-12.359,44.75,0l194.287,194.284   c6.177,6.18,9.262,14.271,9.262,22.366C354.708,234.018,351.617,242.115,345.441,248.292z" />
                        </svg>
                    </span>
                </a>
            </div>
        </div>
        <div class="single_card active">
            <span class="popular">Popular</span>
            <div class="header">
                <span class="slogan">Invision account for</span>
                <span class="package_name">Professional</span>
            </div>
            <div class="body">
                <span class="price">
                    <sup>$</sup>
                    25
                    <sub>/mo</sub>
                </span>
                <ul class="package_featur">
                    <li><span class="txt">Up to 12 users</span></li>
                    <li><span class="txt">24 hour trusted support</span></li>
                    <li><span class="txt">Unlimited number of projects</span></li>
                    <li><span class="txt">+All Pro Features</span></li>
                </ul>
            </div>
            <div class="footer">
                <a href="#">
                    <span class="text">Buy This package</span>
                    <span class="icon">
                        <svg viewBox="0 0 451.846 451.847">
                            <path
                                d="M345.441,248.292L151.154,442.573c-12.359,12.365-32.397,12.365-44.75,0c-12.354-12.354-12.354-32.391,0-44.744   L278.318,225.92L106.409,54.017c-12.354-12.359-12.354-32.394,0-44.748c12.354-12.359,32.391-12.359,44.75,0l194.287,194.284   c6.177,6.18,9.262,14.271,9.262,22.366C354.708,234.018,351.617,242.115,345.441,248.292z" />
                        </svg>
                    </span>
                </a>
            </div>
        </div>
        <div class="single_card">
            <div class="header">
                <span class="slogan">Invision account for</span>
                <span class="package_name">Professional</span>
            </div>
            <div class="body">
                <span class="price">
                    <sup>$</sup>
                    25
                    <sub>/mo</sub>
                </span>
                <ul class="package_featur">
                    <li><span class="txt">Up to 12 users</span></li>
                    <li><span class="txt">24 hour trusted support</span></li>
                    <li><span class="txt">Unlimited number of projects</span></li>
                    <li><span class="txt">+All Pro Features</span></li>
                </ul>
            </div>
            <div class="footer">
                <a href="#">
                    <span class="text">Buy This package</span>
                    <span class="icon">
                        <svg viewBox="0 0 451.846 451.847">
                            <path
                                d="M345.441,248.292L151.154,442.573c-12.359,12.365-32.397,12.365-44.75,0c-12.354-12.354-12.354-32.391,0-44.744   L278.318,225.92L106.409,54.017c-12.354-12.359-12.354-32.394,0-44.748c12.354-12.359,32.391-12.359,44.75,0l194.287,194.284   c6.177,6.18,9.262,14.271,9.262,22.366C354.708,234.018,351.617,242.115,345.441,248.292z" />
                        </svg>
                    </span>
                </a>
            </div>
        </div>
<style>
/* Pricing Table CSS By Btoolsbox */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400&display=swap');*{box-sizing:border-box}
.card_container{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:40px;height:70%;padding:20px;align-items:center;justify-content:center}
.card_container .single_card{box-shadow:0 0 4px #0001,0 1px 25px #0001;padding:20px;border-radius:10px;position:relative;background-color:#fff;border:2px solid transparent;user-select:none;transition:0.3s ease-in-out}
.card_container .single_card .popular{position:absolute;top:-1px;left:50%;transform:translateX(-50%);background-image:linear-gradient(180deg,#f49228,#ff6a00);color:#fff;box-shadow:0 2px 6px #0003;border-radius:0 0 15px 15px;padding:6px 20px}
.card_container .single_card.active,.card_container .single_card:hover{box-shadow:0 0 10px #0001,0 1px 35px #0002;transform:scale(1.06);transform-origin:50% 100%;border-color:rgb(255,123,0)}
.card_container .single_card .header{text-align:center;padding:30px 0 20px}
.card_container .single_card .header .slogan{font-size:14px;color:#777;display:block}
.card_container .single_card .header .package_name{font-size:18px;font-weight:bold;text-transform:uppercase;color:#ff6a00;letter-spacing:1px;padding:15px 0;display:block}
.card_container .single_card .body{text-align:center}
.card_container .single_card .body .price{font-size:55px;display:block;color:#444;padding-bottom:15px;border-bottom:2px solid #3331}
.card_container .single_card .body .price sup,.card_container .single_card .body .price sub{color:#aaa;font-size:40px}
.card_container .single_card .body .price sub{font-size:14px}
.card_container .single_card .body .package_featur{text-align:left;list-style:none;padding-left:55px}
.card_container .single_card .body .package_featur li{position:relative;padding:10px 0;color:#333;font-size:15px}
.card_container .single_card .body .package_featur li::after{content:'';display:inline-block;width:15px;height:15px;background:linear-gradient(45deg,#ff4500,rgb(255,68,0));box-shadow:0 0 4px rgba(255,68,0,0.4),0 0 8px rgba(255,68,0,0.5);border-radius:50%;position:absolute;top:50%;left:-30px;transform:translateY(-50%)}
.card_container .single_card .footer{padding:15px 0;display:flex;align-items:center;justify-content:center}
.card_container .single_card .footer a{text-decoration:none;display:block;border:1px solid red;border-radius:30px;color:#fff;background-image:linear-gradient(45deg,#ff4500,rgb(255,68,0));box-shadow:0 2px 14px #4443,0 0 0 4px rgba(255,68,0,0.15);position:relative;width:100%;padding:12px 15px;transition:0.2s ease-in-out}
.card_container .single_card .footer a:hover{border-radius:6px;transform:scale(1.05);box-shadow:0 1px 4px #4445,0 2px 14px #0004}
.card_container .single_card .footer a:active{transform:scale(1)}
.card_container .single_card .footer .icon{display:inline-block;position:absolute;right:0;top:50%;transform:translate(-10%,-50%);width:35px;height:35px;border-radius:50%;padding:8px;border:1px solid #fffc;background-image:linear-gradient(45deg,rgb(255,136,0),#ff4500);box-shadow:0 2px 6px #4442;transition:0.2s ease-in-out}
.card_container .single_card .footer .icon svg{fill:#fff;width:100%;height:100%}
.card_container .single_card .footer a:hover .icon{transform:translate(-40%,-50%) scale(0.9)}
</style>

Conclusion

The pricing table is one of the most important features in the site where it is used to represent the product's price.

If a site selling products can be offered at an affordable rate, people will be quick to purchase. The same applies to your blog posts. And if you do not know how to create a pricing table for free on Blogger, then you're reading the right article!

Cancel

Leave your opinion or any doubt about this article And is you have any queries please feel free to ask. Don't try to spam, our team reviews every comment.