A pricing table is a very important element of any business website. Pricing table are designed to display product or service information simply and easily. A pricing table should be made flexible so that a publisher can modify it according to their needs.
When you create a blog, one of the first things people want to see is your prices. You write the best blog posts or articles than anyone else, but people still ask about your pricing. Why? Because those who are serious and wants to work with you will surely check your pricing before considering hiring you. So, if you are wondering how to add a pricing table in blogger, this tutorial can help you out.
So First, We Will Discuss What is Pricing Table?
What is Pricing Table?
Pricing table are a great way to visually present a lot of different prices on the same page. They work for companies that sell software, movies, books, or just about any other product. Pricing tables give you a quick and easy way to expose all the pricing on your website in one place.
How to Add Pricing Table in blogger?
You have to Follow Some Steps before we add pricing tables in the blogger.
Step1) Login to your Blogger.com Dashboard
Step2) Now go to the Theme section >> Customize >> Edit HTML
Step3) Now Copy & paste this CSS StyleSheet Link before the </head> tag
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"></link>Step4) Now Find this ]]></b:skin> tag with the help of Ctrl + F.
Step5) Add This CSS code Above ]]></b:skin> tag.
.spacer-80 {
height: 80px;
}
.single-price-table {
position: relative;
z-index: 1;
overflow: hidden;
margin-bottom: 30px;
-webkit-transition: all 0.24s ease-in-out;
transition: all 0.24s ease-in-out;
border: 1px solid #e0e0e0;
border-radius: 10px;
}
.single-price-table .price-design-elemnts {
position: absolute;
visibility: hidden;
-webkit-transition: all 0.24s ease-in-out;
transition: all 0.24s ease-in-out;
opacity: 0;
border-radius: 50%;
-ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=0)';
filter: alpha(opacity=0);
}
.single-price-table .price-design-elemnts.one {
line-height: 145px;
top: -30px;
left: -50px;
width: 145px;
height: 145px;
background-color: #346bf0;
}
.single-price-table .price-design-elemnts.two {
line-height: 86px;
bottom: 60px;
left: -30px;
width: 86px;
height: 86px;
background-color: #eea634;
}
.single-price-table .price-design-elemnts.three {
line-height: 145px;
right: -50px;
bottom: -30px;
width: 145px;
height: 145px;
background-color: #8543d6;
}
.single-price-table .price-design-elemnts.four {
line-height: 44px;
top: 50px;
right: 50px;
width: 44px;
height: 44px;
background-color: #31e1a1;
}
.single-price-table .price-header {
padding-top: 40px;
padding-bottom: 40px;
-webkit-transition: all 0.24s ease-in-out;
transition: all 0.24s ease-in-out;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
background-color: #fbfbfb;
}
.single-price-table .price-header span.package-title {
font-size: 30px;
font-weight: 600;
display: block;
margin-bottom: 30px;
color: #132150;
}
.single-price-table .price-header span.package-amount {
font-size: 60px;
font-weight: 600;
color: #684ef6;
}
.single-price-table .price-header span.package-amount span {
font-weight: 400;
color: #494a54;
}
.single-price-table .price-header span.package-amount span:nth-child(1) {
font-size: 34px;
}
.single-price-table .price-header span.package-amount span:nth-child(2) {
font-size: 18px;
}
.single-price-table .price-body {
padding-top: 40px;
padding-bottom: 30px;
}
.single-price-table .price-body ul {
margin: 0;
padding: 0;
list-style: none;
}
.single-price-table .price-body ul li {
display: block;
padding: 0 0 8px;
}
.single-price-table .price-body ul li:last-child {
padding-bottom: 0;
}
.single-price-table .price-footer {
padding-bottom: 40px;
}
.single-price-table .price-footer a {
padding: 16px 48px;
text-transform: uppercase;
}
.single-price-table:hover {
background-color: #31348c;
}
.single-price-table:hover .price-header {
background-color: #31348c;
}
.single-price-table:hover .price-header span.package-title {
color: #fff;
}
.single-price-table:hover .price-header span.package-amount {
color: #fff;
}
.single-price-table:hover .price-header span.package-amount span {
color: #fff;
}
.single-price-table:hover .price-body ul li {
color: #fff;
}
.single-price-table:hover .price-design-elemnts {
visibility: visible;
opacity: 1;
-ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=100)';
filter: alpha(opacity=100);
}
.single-price-table:hover .price-design-elemnts.one {
-webkit-transition-delay: 0.1s;
transition-delay: 0.1s;
-webkit-animation: zoomIn 400ms ease-in-out;
animation: zoomIn 400ms ease-in-out;
}
.single-price-table:hover .price-design-elemnts.three {
-webkit-transition-delay: 0.1s;
transition-delay: 0.1s;
-webkit-animation: zoomIn 400ms ease-in-out;
animation: zoomIn 400ms ease-in-out;
}
.single-price-table:hover .price-design-elemnts.two {
-webkit-transition-delay: 0.3s;
transition-delay: 0.3s;
-webkit-animation: zoomIn 400ms ease-in-out;
animation: zoomIn 400ms ease-in-out;
}
.single-price-table:hover .price-design-elemnts.four {
-webkit-transition-delay: 0.3s;
transition-delay: 0.3s;
-webkit-animation: zoomIn 400ms ease-in-out;
animation: zoomIn 400ms ease-in-out;
}
.single-price-table.active {
background-color: #31348c;
}
.single-price-table.active .price-header {
background-color: #31348c;
}
.single-price-table.active .price-header span.package-title {
color: #fff;
}
.single-price-table.active .price-header span.package-amount {
color: #fff;
}
.single-price-table.active .price-header span.package-amount span {
color: #fff;
}
.single-price-table.active .price-body ul li {
color: #fff;
}
.single-price-table.active .price-design-elemnts {
visibility: visible;
opacity: 1;
-ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=100)';
filter: alpha(opacity=100);
}
.single-price-table.active .price-design-elemnts.one {
-webkit-transition-delay: 0.1s;
transition-delay: 0.1s;
-webkit-animation: zoomIn 400ms ease-in-out;
animation: zoomIn 400ms ease-in-out;
}
.single-price-table.active .price-design-elemnts.three {
-webkit-transition-delay: 0.1s;
transition-delay: 0.1s;
-webkit-animation: zoomIn 400ms ease-in-out;
animation: zoomIn 400ms ease-in-out;
}
.single-price-table.active .price-design-elemnts.two {
-webkit-transition-delay: 0.3s;
transition-delay: 0.3s;
-webkit-animation: zoomIn 400ms ease-in-out;
animation: zoomIn 400ms ease-in-out;
}
.single-price-table.active .price-design-elemnts.four {
-webkit-transition-delay: 0.3s;
transition-delay: 0.3s;
-webkit-animation: zoomIn 400ms ease-in-out;
animation: zoomIn 400ms ease-in-out;
}
.single-price-table.layout-two .price-header span.package-amount {
color: #0d9ce8;
}
.single-price-table.layout-two:hover {
background-color: transparent;
background-image: -webkit-linear-gradient(177deg, #8a8aec 0%, #b6d2f9 100%);
background-image: linear-gradient(-87deg, #8a8aec 0%, #b6d2f9 100%);
}
.single-price-table.layout-two:hover .price-header {
background-color: transparent;
background-image: -webkit-linear-gradient(177deg, #8a8aec 0%, #b6d2f9 100%);
background-image: linear-gradient(-87deg, #8a8aec 0%, #b6d2f9 100%);
}
.single-price-table.layout-two:hover .price-header span.package-amount {
color: #fff;
}
.single-price-table.layout-two.active {
background-color: transparent;
background-image: -webkit-linear-gradient(177deg, #8a8aec 0%, #b6d2f9 100%);
background-image: linear-gradient(-87deg, #8a8aec 0%, #b6d2f9 100%);
}
.single-price-table.layout-two.active .price-header {
background-color: transparent;
background-image: -webkit-linear-gradient(177deg, #8a8aec 0%, #b6d2f9 100%);
background-image: linear-gradient(-87deg, #8a8aec 0%, #b6d2f9 100%);
}
.single-price-table.layout-two.active .price-header span.package-amount {
color: #fff;
}
.single-price-table.layout-three .price-footer a {
border-radius: 999px;
}
.single-price-table.layout-three .price-footer a:after {
border-radius: 999px;
}
.single-price-table.layout-three .price-header span.package-amount {
color: #684ef6;
}
.single-price-table.layout-three:hover {
background-color: transparent;
background-image: -webkit-gradient(linear, right top, left top, from(#2923e6), to(#6b69fb));
background-image: -webkit-linear-gradient(right, #2923e6, #6b69fb);
background-image: linear-gradient(to left, #2923e6, #6b69fb);
}
.single-price-table.layout-three:hover .price-header {
background-color: transparent;
background-image: -webkit-gradient(linear, right top, left top, from(#2923e6), to(#6b69fb));
background-image: -webkit-linear-gradient(right, #2923e6, #6b69fb);
background-image: linear-gradient(to left, #2923e6, #6b69fb);
}
.single-price-table.layout-three:hover .price-header span.package-amount {
color: #fff;
}
.single-price-table.layout-three.active {
background-color: transparent;
background-image: -webkit-gradient(linear, right top, left top, from(#2923e6), to(#6b69fb));
background-image: -webkit-linear-gradient(right, #2923e6, #6b69fb);
background-image: linear-gradient(to left, #2923e6, #6b69fb);
}
.single-price-table.layout-three.active .price-header {
background-color: transparent;
background-image: -webkit-gradient(linear, right top, left top, from(#2923e6), to(#6b69fb));
background-image: -webkit-linear-gradient(right, #2923e6, #6b69fb);
background-image: linear-gradient(to left, #2923e6, #6b69fb);
}
.single-price-table.layout-three.active .price-header span.package-amount {
color: #fff;
}
@media (max-width: 991.98px) {
.price-space.spacer-150 {
height: 70px;
}
.price-area.home-two .spacer-80 {
height: 40pxs;
}
.spacer-80 {
height: 80px;
}
.single-price-table {
position: relative;
z-index: 1;
overflow: hidden;
margin-bottom: 30px;
-webkit-transition: all 0.24s ease-in-out;
transition: all 0.24s ease-in-out;
border: 1px solid #e0e0e0;
border-radius: 10px;
}
.single-price-table .price-design-elemnts {
position: absolute;
visibility: hidden;
-webkit-transition: all 0.24s ease-in-out;
transition: all 0.24s ease-in-out;
opacity: 0;
border-radius: 50%;
-ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=0)';
filter: alpha(opacity=0);
}
.single-price-table .price-design-elemnts.one {
line-height: 145px;
top: -30px;
left: -50px;
width: 145px;
height: 145px;
background-color: #346bf0;
}
.single-price-table .price-design-elemnts.two {
line-height: 86px;
bottom: 60px;
left: -30px;
width: 86px;
height: 86px;
background-color: #eea634;
}
.single-price-table .price-design-elemnts.three {
line-height: 145px;
right: -50px;
bottom: -30px;
width: 145px;
height: 145px;
background-color: #8543d6;
}
.single-price-table .price-design-elemnts.four {
line-height: 44px;
top: 50px;
right: 50px;
width: 44px;
height: 44px;
background-color: #31e1a1;
}
.single-price-table .price-header {
padding-top: 40px;
padding-bottom: 40px;
-webkit-transition: all 0.24s ease-in-out;
transition: all 0.24s ease-in-out;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
background-color: #fbfbfb;
}
.single-price-table .price-header span.package-title {
font-size: 30px;
font-weight: 600;
display: block;
margin-bottom: 30px;
color: #132150;
}
.single-price-table .price-header span.package-amount {
font-size: 60px;
font-weight: 600;
color: #684ef6;
}
.single-price-table .price-header span.package-amount span {
font-weight: 400;
color: #494a54;
}
.single-price-table .price-header span.package-amount span:nth-child(1) {
font-size: 34px;
}
.single-price-table .price-header span.package-amount span:nth-child(2) {
font-size: 18px;
}
.single-price-table .price-body {
padding-top: 40px;
padding-bottom: 30px;
}
.single-price-table .price-body ul {
margin: 0;
padding: 0;
list-style: none;
}
.single-price-table .price-body ul li {
display: block;
padding: 0 0 8px;
}
.single-price-table .price-body ul li:last-child {
padding-bottom: 0;
}
.single-price-table .price-footer {
padding-bottom: 40px;
}
.single-price-table .price-footer a {
padding: 16px 48px;
text-transform: uppercase;
}
.single-price-table:hover {
background-color: #31348c;
}
.single-price-table:hover .price-header {
background-color: #31348c;
}
.single-price-table:hover .price-header span.package-title {
color: #fff;
}
.single-price-table:hover .price-header span.package-amount {
color: #fff;
}
.single-price-table:hover .price-header span.package-amount span {
color: #fff;
}
.single-price-table:hover .price-body ul li {
color: #fff;
}
.single-price-table:hover .price-design-elemnts {
visibility: visible;
opacity: 1;
-ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=100)';
filter: alpha(opacity=100);
}
.single-price-table:hover .price-design-elemnts.one {
-webkit-transition-delay: 0.1s;
transition-delay: 0.1s;
-webkit-animation: zoomIn 400ms ease-in-out;
animation: zoomIn 400ms ease-in-out;
}
.single-price-table:hover .price-design-elemnts.three {
-webkit-transition-delay: 0.1s;
transition-delay: 0.1s;
-webkit-animation: zoomIn 400ms ease-in-out;
animation: zoomIn 400ms ease-in-out;
}
.single-price-table:hover .price-design-elemnts.two {
-webkit-transition-delay: 0.3s;
transition-delay: 0.3s;
-webkit-animation: zoomIn 400ms ease-in-out;
animation: zoomIn 400ms ease-in-out;
}
.single-price-table:hover .price-design-elemnts.four {
-webkit-transition-delay: 0.3s;
transition-delay: 0.3s;
-webkit-animation: zoomIn 400ms ease-in-out;
animation: zoomIn 400ms ease-in-out;
}
.single-price-table.active {
background-color: #31348c;
}
.single-price-table.active .price-header {
background-color: #31348c;
}
.single-price-table.active .price-header span.package-title {
color: #fff;
}
.single-price-table.active .price-header span.package-amount {
color: #fff;
}
.single-price-table.active .price-header span.package-amount span {
color: #fff;
}
.single-price-table.active .price-body ul li {
color: #fff;
}
.single-price-table.active .price-design-elemnts {
visibility: visible;
opacity: 1;
-ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=100)';
filter: alpha(opacity=100);
}
.single-price-table.active .price-design-elemnts.one {
-webkit-transition-delay: 0.1s;
transition-delay: 0.1s;
-webkit-animation: zoomIn 400ms ease-in-out;
animation: zoomIn 400ms ease-in-out;
}
.single-price-table.active .price-design-elemnts.three {
-webkit-transition-delay: 0.1s;
transition-delay: 0.1s;
-webkit-animation: zoomIn 400ms ease-in-out;
animation: zoomIn 400ms ease-in-out;
}
.single-price-table.active .price-design-elemnts.two {
-webkit-transition-delay: 0.3s;
transition-delay: 0.3s;
-webkit-animation: zoomIn 400ms ease-in-out;
animation: zoomIn 400ms ease-in-out;
}
.single-price-table.active .price-design-elemnts.four {
-webkit-transition-delay: 0.3s;
transition-delay: 0.3s;
-webkit-animation: zoomIn 400ms ease-in-out;
animation: zoomIn 400ms ease-in-out;
}
.single-price-table.layout-two .price-header span.package-amount {
color: #0d9ce8;
}
.single-price-table.layout-two:hover {
background-color: transparent;
background-image: -webkit-linear-gradient(177deg, #8a8aec 0%, #b6d2f9 100%);
background-image: linear-gradient(-87deg, #8a8aec 0%, #b6d2f9 100%);
}
.single-price-table.layout-two:hover .price-header {
background-color: transparent;
background-image: -webkit-linear-gradient(177deg, #8a8aec 0%, #b6d2f9 100%);
background-image: linear-gradient(-87deg, #8a8aec 0%, #b6d2f9 100%);
}
.single-price-table.layout-two:hover .price-header span.package-amount {
color: #fff;
}
.single-price-table.layout-two.active {
background-color: transparent;
background-image: -webkit-linear-gradient(177deg, #8a8aec 0%, #b6d2f9 100%);
background-image: linear-gradient(-87deg, #8a8aec 0%, #b6d2f9 100%);
}
.single-price-table.layout-two.active .price-header {
background-color: transparent;
background-image: -webkit-linear-gradient(177deg, #8a8aec 0%, #b6d2f9 100%);
background-image: linear-gradient(-87deg, #8a8aec 0%, #b6d2f9 100%);
}
.single-price-table.layout-two.active .price-header span.package-amount {
color: #fff;
}
.single-price-table.layout-three .price-footer a {
border-radius: 999px;
}
.single-price-table.layout-three .price-footer a:after {
border-radius: 999px;
}
.single-price-table.layout-three .price-header span.package-amount {
color: #684ef6;
}
.single-price-table.layout-three:hover {
background-color: transparent;
background-image: -webkit-gradient(linear, right top, left top, from(#2923e6), to(#6b69fb));
background-image: -webkit-linear-gradient(right, #2923e6, #6b69fb);
background-image: linear-gradient(to left, #2923e6, #6b69fb);
}
.single-price-table.layout-three:hover .price-header {
background-color: transparent;
background-image: -webkit-gradient(linear, right top, left top, from(#2923e6), to(#6b69fb));
background-image: -webkit-linear-gradient(right, #2923e6, #6b69fb);
background-image: linear-gradient(to left, #2923e6, #6b69fb);
}
.single-price-table.layout-three:hover .price-header span.package-amount {
color: #fff;
}
.single-price-table.layout-three.active {
background-color: transparent;
background-image: -webkit-gradient(linear, right top, left top, from(#2923e6), to(#6b69fb));
background-image: -webkit-linear-gradient(right, #2923e6, #6b69fb);
background-image: linear-gradient(to left, #2923e6, #6b69fb);
}
.single-price-table.layout-three.active .price-header {
background-color: transparent;
background-image: -webkit-gradient(linear, right top, left top, from(#2923e6), to(#6b69fb));
background-image: -webkit-linear-gradient(right, #2923e6, #6b69fb);
background-image: linear-gradient(to left, #2923e6, #6b69fb);
}
.single-price-table.layout-three.active .price-header span.package-amount {
color: #fff;
}
@media (max-width: 991.98px) {
.price-space.spacer-150 {
height: 70px;
}
.price-area.home-two .spacer-80 {
height: 40pxs;
}
}Step6) Whenever you post a new article, you simply write the title and content of your blog post and add this HTML code in the appropriate section of your post.
Step7) Click on Save & Preview it.
<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>Congratulation, you have successfully added the pricing table in blogger in just a few steps.
Benefits of Adding Responsive Pricing Table in blogger
You can add a responsive pricing table to your blog to show the price of a product for different countries.
You will definitely increase your conversion rate. Our experience proves that a responsive pricing table can have 2~3 times the conversion rate of a normal price table.
Adding a responsive pricing table will allow your visitors to dynamically view pricing tables on various sized devices. Their screen will automatically change the size of the design according to its device width and height.
Adding a responsive pricing table in blogger will improve the user experience, and visual attractiveness recommended for every blog.
Final Verdict
A pricing table is a table that shows all the possible options and pricing for customers who visit your website concisely and clearly. It helps the customer make a decision very quickly about which package to chose. The customer can then go to the checkout page without looking around your website.
If you have any questions, then you should join our Telegram chat group. We will help you solve your problems with blogging and SEO.
Join our Telegram Group: Blog Triggers Discussion
