How to make Pricing Table Widgets

Hello Blogger user Guys, Welcome to ItsThemeWorld. If you are searching for How to Add Pricing Table in Blogger then this article will be very helpful for you. In this post, I'm going to guide you step by step on How to Add a Pricing Table in Blogger. So, follow the easy steps and learn more about how to add a pricing table in Blogger.

What Is Pricing Table

A pricing table is a design element that requires the designer to communicate information clearly and precisely, exposing as many features as possible and making it as easy and as intuitive as possible for a user to make the best choice.

Let's Start To make Pricing Table

• Go to the Blogger dashboard
• Now Copy the code and Create Post/Page And Paste The HTML

<style>
/*Pricing Section by blog.choipanwendy.com */
.wendy-pricing{position:relative;padding:50px 0;text-align:center}
.wendy-pricing .container-pricing{display:grid;grid-template-columns:32% 32% 32%;grid-gap:30px;margin:30px auto 0}
.wendysec-pricing{padding:30px;margin:0 0 20px;position:relative;box-shadow:0 3px 20px 0 rgba(0,0,0,0.15);border-radius:5px;background:#fff;transition:all .2s ease-in-out;border-top:4px solid #fff}
.wendysec-pricing:hover{transform:translateY(-10px);box-shadow:0 3px 20px 0 rgba(0,0,0,0.25);border-color: #00FAFF}
.wendysec-pricing .harga{font-size:50px;margin:15px 0;background:linear-gradient(to right, #ffa200,#f0b651);color:#fff;width:100px;height:100px;line-height:2;border-radius:100%}
.wendysec-pricing{box-shadow:none;border:1px solid #ddd}
.wendysec-pricing h3{color:#111;font-size:20px;font-weight:700}
.wendysec-pricing p{font-size:15px;color:#555}
.wendysec-pricing .harga{font-size:25px;font-weight:700;line-height:4;display:inline-block}
.wendy-pricing a.wendybutton{box-shadow:none;background:linear-gradient(to right, #00FAFF,#6DD6D8)}
.wendybutton{display:inline-flex;align-items:center;margin:15px 15px 15px 0;padding:10px 20px;outline:0;border:0;color:#fefefe;background-color:#f09800;border-radius:3px;font-size:18px;line-height:22px;text-decoration:none}
a.wendybutton:hover{transform:scale(1.1)}
.wendysec-pricing.aktif,.wendysec-pricing:hover{box-shadow:0 3px 20px 0 rgba(0,0,0,0.15);border-color:#ddd;border-top:4px solid  #00FAFF}
@media screen and (max-width:680px){.wendy-pricing .container-pricing{grid-template-columns:100%;display:block;margin:20px auto}}
</style>

<div class='wendy-pricing'>
<div class='container-pricing'>
<div class='wendysec-pricing'>
<h3>Consultation</h3>
<span class='harga'>20K</span>
<p>Graphic Design</p
><p>Web Design</p>
<p>Support</p>
<p>-</p>
<p>-</p>
<a class='wendybutton' href='#' title='Buy Now'>Buy Now</a></div>
  
<div class='wendysec-pricing aktif'>
<h3>Small Business</h3>
<span class='harga'>120K</span>
<p>Graphic Design</p
><p>Web Design</p>
<p>Full Support</p>
<p>Themes</p>
<p>-</p>
<a class='wendybutton' href='#' title='Buy Now'>Buy Now</a>
</div>
  
<div class='wendysec-pricing'>
<h3>Corporate</h3>
<span class='harga'>20K</span>
<p>Graphic Design</p
><p>Web Design</p>
<p>Support</p>
<p>Unlimited Domain</p>
<p>-</p>
<a class='wendybutton' href='#' title='Buy Now'>Buy Now</a>
</div>
</div>
</div>

So this is all about how to add pricing table in blogger, I hope you will not have any problem making it and you have created pricing table well.  If you find this article helpful then do share it with your friends and give us your feedback.

Source Code Reference: Wendy Code