Adsterra Advertisement
BloggerBlogger tips and TricksTips And Tricks

How to add Responsive Pricing Table In Blogger

In this post,  How to add Responsive Pricing Table In Blogger / How to add Pricing Table in Blogger post. 
Add Responsive Pricing Table In Blogger

Website Post Add Responsive Pricing table are designed to display product or information simply and easily. A Rsponsive pricing table should be made flexible so that a publisher can modify it according to every device friendly. 

How To Design Responsive Pricing Table with HTML And CSS

When we create a website, we have to post a lot of information in the form of various information including product price in the form of tables, and then we have trouble finding HTML & CSS directly. Creating it is not a complicated task, but you need to know enough coding.  However, if you follow this post today, you don’t need to know any kind of coding.So today we will show, How To Design Responsive Pricing Table with HTML & CSS.  Follow each step to do this.

How To Add Pricing Table In Blogger?

Use HTML, CSS, Script according to the following rules to design a responsive pricing table in Blogger or WordPress website posts, Just You have to Follow Some Steps – 
  • Firstly, Go to Blogger Dashboard 
  • Go to the Theme >> Edit HTML
  • Now Copy Blew code & paste this CSS StyleSheet Link before the </head> tag.
Code : 
<link href=”https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css” rel=”stylesheet”></link>(code-box)
  • Now search this  ]]></b:skin> tag with the  Ctrl + F. 
  • Now, Add blew CSS code Above ]]></b:skin> tag.
Code Here : Copy Code
  • When you create a new post, the following HTML code will be added to the pricing table.
Code: 
<section class=”price-area” id=”price”>
    <div class=”container”>
        <div class=”row”>
            <div class=”col-lg-12 text-center”>
          
            </div><!–./column–>
        </div><!–./row–>
        <div class=”spacer-40″></div><!–./ spacer–>
        <div class=”row”>
            <div class=”col-lg-4 mx-auto text-center col-md-6″>
                <div class=”single-price-table”>
                    <div class=”price-design-elemnts one”></div><!–./elemnts one–>
                    <div class=”price-design-elemnts two”></div><!–./elemnts two–>
                    <div class=”price-design-elemnts three”></div><!–./elemnts three–>
                    <div class=”price-design-elemnts four”></div><!–./elemnts four–>
                    <div class=”price-header”>
                        <span class=”package-title”>Free</span>
                        <span class=”package-amount”>$0<span>/</span><span>mo</span></span>
                    </div><!–./ price header–>
                    <div class=”price-body”>
                        <ul>
                            <li>Limited Pages</li>
                            <li>All Team Members</li>
                            <li>Unlimited Leads</li>
                            <li>Unlimited Page Views</li>
                            <li>Export in HTML/CSS</li>
                        </ul>
                    </div><!–./ price body–>
                    <div class=”price-footer”>
                        <a href=”#”>Get Started</a>
                    </div><!–./price footer–>
                </div><!–./ prioce table–>
            </div><!–./ column–>
            <div class=”col-lg-4 mx-auto text-center col-md-6″>
                <div class=”single-price-table”>
                    <div class=”price-design-elemnts one”></div><!–./elemnts one–>
                    <div class=”price-design-elemnts two”></div><!–./elemnts two–>
                    <div class=”price-design-elemnts three”></div><!–./elemnts three–>
                    <div class=”price-design-elemnts four”></div><!–./elemnts four–>
                    <div class=”price-header”>
                        <span class=”package-title”>Starter</span>
                        <span class=”package-amount”>$30<span>/</span><span>mo</span></span>
                    </div><!–./ price header–>
                    <div class=”price-body”>
                        <ul>
                            <li>Unlimited Pages</li>
                            <li>All Team Members</li>
                            <li>Unlimited Leads</li>
                            <li>Unlimited Page Views</li>
                            <li>Export in HTML/CSS</li>
                        </ul>
                    </div><!–./ price body–>
                    <div class=”price-footer”>
                        <a href=”#”>Get Started</a>
                    </div><!–./price footer–>
                </div><!–./ prioce table–>
            </div><!–./ column–>
            <div class=”col-lg-4 mx-auto text-center col-md-6″>
                <div class=”single-price-table”>
                    <div class=”price-design-elemnts one”></div><!–./elemnts one–>
                    <div class=”price-design-elemnts two”></div><!–./elemnts two–>
                    <div class=”price-design-elemnts three”></div><!–./elemnts three–>
                    <div class=”price-design-elemnts four”></div><!–./elemnts four–>
                    <div class=”price-header”>
                        <span class=”package-title”>Premium</span>
                        <span class=”package-amount”>$60<span>/</span><span>mo</span></span>
                    </div><!–./ price header–>
                    <div class=”price-body”>
                        <ul>
                            <li>Unlimited Pages</li>
                            <li>All Team Members</li>
                            <li>Unlimited Leads</li>
                            <li>Unlimited Page Views</li>
                            <li>Export in HTML/CSS</li>
                        </ul>
                    </div><!–./ price body–>
                    <div class=”price-footer”>
                        <a href=”#”>Get Started</a>
                    </div><!–./price footer–>
                </div><!–./ prioce table–>
            </div><!–./ column–>
        </div><!–./ row–>
    </div><!–./container–>
 </section>(code-box)

Now, Save and Publish blog post and injoy adding responsive pricing table in blogger.

Advertisement

 

Advertisement
Advertisement

Related Articles

Leave a Reply

Your email address will not be published. Required fields are marked *

Advertisement
Back to top button