How to Add Responsive Pricing Table using HTML and CSS in Blogger
Once again we are back with the tutorial to Add Pricing table in blogger post. For WordPress, it is very easy to add pricing table HTML CSS code but for bloggers, we manually add price tables using HTML and CSS code in blog posts. So we will learn an easy way to Add Pricing Table in Blogger. And How to add this pricing table in Blogger also what is the responsive pricing table? We will know about this table in this article.
In the blogger website, the pricing table using bootstrap or pricing table using HTML and CSS design may vary for different templates. Yes, the same code may not look similar on every website because of the template codes So that's the reason I will provide 3 methods to Include a pricing table in the post.
For Create Pricing table in the Blogger post, we need to use HTML and CSS and include them in our blog post. So In this article, I will be sharing more than one pricing table design for blogger posts.
 |
| Add Responsive pricing table in Blogger Post Complete Guide: 3+ Codes |
Therefore use any of the pricing table below codes. So now let's start to add a pricing table in blogger post.
You can also use: Add Responsive Table In Blogger Post
What is the Responsive Pricing Table?
First, let us know about what is the pricing table? If you have a website where you want to sell something. You must have seen that along with the list of that item and also get its price in the table.
So basically adding pricing tables on the website is to display product or service information simply and easily along with wit their price. A pricing table should be made flexible so that a publisher can modify it according to their needs.
You may saw it mostly on websites like selling software websites, 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.
For a simple understanding, you can see below pricing table in blogger image creating using one of the below codes. So now let's start to include the price table in blogger post.
Steps to Add Pricing Table in blogger
Well, I will explain your to add price table in blogger post but using the below codes you can add in any website like WordPress or any website. So follow the below methods and properly and if you face any problem then comment below.
As I said I will provide 3 codes to include the pricing table in the blog post or the pricing table HTML and bootstrap code. So let's start one by one.
How do I add a pricing table in blogger?
Follow any of the below steps of any method and add pricing table in blogger or any website.
Method 1 - Create Pricing Table HTML & CSS
Add Pricing Table Bootstrap Code
Clean Bootstrap Pricing table code for blogger template with some modification. Follow below simple steps.
 |
| Add Responsive pricing table in a website blog post |
Useful post for bloggers: Add Reading progress bar indicator in blogger
1. log in to your Blogger.com Dashboard
2. Now go to the Theme section >> Customize >> Edit HTM, After 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>
Note: Many websites already have bootstrap so make sure after adding the above line doesn't affect your website design. You can try this and if works fine then Great! else you can try other methods.
3. Now Find this </head> tag with the help of Ctrl + F and paste the above code and below bootstrap link.
<style>
.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;
}
}
</style>
4. After pasting the above CSS in your website template open your blog post in which you want to add price table and add the below HTML code in the appropriate section of your post.
<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>
5. Edit the table as per your content and save it.
Congratulation, you have successfully added the pricing table in blogger in just a few steps. Now if this code works for you then Great else you can try the below methods.
Code 2: Bootstrap + Stylist Pricing Table Code
Now In this along with Bootstrap, we used Font-Awesome CDN for icons with very little CSS. So first check its demo from the below image and if you like it then uses it.
 |
| bootstrap pricing table for blogger post |
Include below CSS link if not there in your website just above </head> tag and after paste below pricing table CSS after links.
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"></link> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css"/>
CSS Code:
<style>
section.pricing {
background: #007bff;
background: linear-gradient(to right, #0062E6, #33AEFF);
}
.pricing .card {
border: none;
border-radius: 1rem;
transition: all 0.2s;
box-shadow: 0 0.5rem 1rem 0 rgba(0, 0, 0, 0.1);
}
.pricing hr {
margin: 1.5rem 0;
}
.pricing .card-title {
margin: 0.5rem 0;
font-size: 0.9rem;
letter-spacing: .1rem;
font-weight: bold;
}
.pricing .card-price {
font-size: 3rem;
margin: 0;
}
.pricing .card-price .period {
font-size: 0.8rem;
}
.pricing ul li {
margin-bottom: 1rem;
}
.pricing .text-muted {
opacity: 0.7;
}
.pricing .btn {
font-size: 80%;
border-radius: 5rem;
letter-spacing: .1rem;
font-weight: bold;
padding: 1rem;
opacity: 0.7;
transition: all 0.2s;
}
/* Hover Effects on Card */
@media (min-width: 992px) {
.pricing .card:hover {
margin-top: -.25rem;
margin-bottom: .25rem;
box-shadow: 0 0.5rem 1rem 0 rgba(0, 0, 0, 0.3);
}
.pricing .card:hover .btn {
opacity: 1;
}
}
</style>Now After saving your template and open the blog post to include a pricing table in the post. Add the below code in your post after adding your data.
<section class="pricing py-5">
<div class="container">
<div class="row">
<!-- Free Tier -->
<div class="col-lg-4">
<div class="card mb-5 mb-lg-0">
<div class="card-body">
<h5 class="card-title text-muted text-uppercase text-center">Free</h5>
<h6 class="card-price text-center">$0<span class="period">/month</span></h6>
<hr>
<ul class="fa-ul">
<li><span class="fa-li"><i class="fas fa-check"></i></span>Single User</li>
<li><span class="fa-li"><i class="fas fa-check"></i></span>5GB Storage</li>
<li><span class="fa-li"><i class="fas fa-check"></i></span>Unlimited Public Projects</li>
<li><span class="fa-li"><i class="fas fa-check"></i></span>Community Access</li>
<li class="text-muted"><span class="fa-li"><i class="fas fa-times"></i></span>Unlimited
Private Projects</li>
<li class="text-muted"><span class="fa-li"><i class="fas fa-times"></i></span>Dedicated
Phone Support</li>
<li class="text-muted"><span class="fa-li"><i class="fas fa-times"></i></span>Free Subdomain
</li>
<li class="text-muted"><span class="fa-li"><i class="fas fa-times"></i></span>Monthly Status
Reports</li>
</ul>
<div class="d-grid">
<a href="#" class="btn btn-primary text-uppercase">Button</a>
</div>
</div>
</div>
</div>
<!-- Plus Tier -->
<div class="col-lg-4">
<div class="card mb-5 mb-lg-0">
<div class="card-body">
<h5 class="card-title text-muted text-uppercase text-center">Plus</h5>
<h6 class="card-price text-center">$9<span class="period">/month</span></h6>
<hr>
<ul class="fa-ul">
<li><span class="fa-li"><i class="fas fa-check"></i></span><strong>5 Users</strong></li>
<li><span class="fa-li"><i class="fas fa-check"></i></span>50GB Storage</li>
<li><span class="fa-li"><i class="fas fa-check"></i></span>Unlimited Public Projects</li>
<li><span class="fa-li"><i class="fas fa-check"></i></span>Community Access</li>
<li><span class="fa-li"><i class="fas fa-check"></i></span>Unlimited Private Projects</li>
<li><span class="fa-li"><i class="fas fa-check"></i></span>Dedicated Phone Support</li>
<li><span class="fa-li"><i class="fas fa-check"></i></span>Free Subdomain</li>
<li class="text-muted"><span class="fa-li"><i class="fas fa-times"></i></span>Monthly Status
Reports</li>
</ul>
<div class="d-grid">
<a href="#" class="btn btn-primary text-uppercase">Button</a>
</div>
</div>
</div>
</div>
<!-- Pro Tier -->
<div class="col-lg-4">
<div class="card">
<div class="card-body">
<h5 class="card-title text-muted text-uppercase text-center">Pro</h5>
<h6 class="card-price text-center">$49<span class="period">/month</span></h6>
<hr>
<ul class="fa-ul">
<li><span class="fa-li"><i class="fas fa-check"></i></span><strong>Unlimited Users</strong>
</li>
<li><span class="fa-li"><i class="fas fa-check"></i></span>150GB Storage</li>
<li><span class="fa-li"><i class="fas fa-check"></i></span>Unlimited Public Projects</li>
<li><span class="fa-li"><i class="fas fa-check"></i></span>Community Access</li>
<li><span class="fa-li"><i class="fas fa-check"></i></span>Unlimited Private Projects</li>
<li><span class="fa-li"><i class="fas fa-check"></i></span>Dedicated Phone Support</li>
<li><span class="fa-li"><i class="fas fa-check"></i></span><strong>Unlimited</strong> Free
Subdomains</li>
<li><span class="fa-li"><i class="fas fa-check"></i></span>Monthly Status Reports</li>
</ul>
<div class="d-grid">
<a href="#" class="btn btn-primary text-uppercase">Button</a>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
Method 2: Simple Pricing table HTML & CSS
Include Pricing table in Website using HTML and CSS
Steps are the same for this method also only difference is in code, here we are not using bootstrap, and also here we are using Icons of font-awesome CDN. so let's start to add it.
 |
| Add pricing table in blogger post |
Also read: Disable right-click disable copy-paste blogger
1. Open Blogger > template > edit HTML and paste below cdn library just above </head> tag
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css"/>
Note: If your website already has content Font Awesome CDN [ Search for this link ] then don't include it again.
2. After Copy below Css Code and Place Above Code </head> tag
<style>*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.content{
max-width: 1090px;
width: 100%;
margin: auto;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.content .card{
background: #fff;
width: calc(33% - 20px);
text-align: center;
padding: 15px 30px 30px 30px;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.15);
}
.content .card .top{
height: 130px;
color: #fff;
padding: 12px 0 0 0 ;
clip-path: polygon(0 0, 100% 0, 100% 53%, 49% 100%, 0 53%);
}
.content .card .top .title{
font-size: 27px;
font-weight: 600;
}
.content .card .top .price-sec{
margin-top: -10px;
font-weight: 600;
}
.content .card .top .price{
font-size: 45px;
}
.content .card .info{
font-size: 16px;
margin-top: 20px;
}
.content .card .details .one{
margin-top: 25px;
font-size: 15px;
display: flex;
justify-content: space-between;
align-items: center;
position: relative;
}
.content .card .details .one::before{
position: absolute;
content: "";
width: 100%;
background: #ddd;
height: 1px;
left: 0;
top: -12px;
border-radius: 25px;
}
.content .card .details .one i{
color: #2db94d;
}
.content .card .details i.fa-times{
color: #cd3241;
}
.content .card button{
outline: none;
border: none;
height: 42px;
color: #fff;
margin-top: 30px;
border-radius: 3px;
font-size: 18px;
width: 100%;
display: block;
transition: all 0.3s ease;
cursor: pointer;
letter-spacing: 1px;
}
.content .one .top,
.content .one button{
background: #14eb6e;
}
.content .two .top,
.content .two button{
background: #e87130;
}
.content .three .top,
.content .three button{
background: #11BCC3;
}
.content button:hover {
filter: brightness(90%);
}
.content .one ::selection{
background: #8af5b6;
}
.content .two ::selection{
background: #f2b08c;
}
.content .three ::selection{
background: #d0f9fb;
}
@media (max-width:1000px) {
.content .card{
background: #fff;
width: calc(50% - 20px);
margin-bottom: 30px;
}
}
@media (max-width:715px) {
.content .card{
width: 100%;
}
}
</style>3. Save the template and open your blog post to create pricing table in blogger post.
4. Now copy this HTML code of the Pricing table and paste this HTML code where you want it to be placed.
<div class="content"><div class="card one"> <div class="top"> <div class="title">Basic</div> <div class="price-sec"> <span class="dollar">$</span> <span class="price">14</span> <span class="decimal">.99</span> </div> </div> <div class="info">Limited features you will get on this package or plan</div> <div class="details"> <div class="one"> <span>One Addons Domain</span> <i class="fas fa-check"></i> </div> <div class="one"> <span>100GB Local Storage</span> <i class="fas fa-check"></i> </div> <div class="one"> <span>Lifetime Tech Support</span> <i class="fas fa-times"></i> </div> <div class="one"> <span>Unlimited Data Transfer</span> <i class="fas fa-times"></i> </div> <button>Purchase</button> </div> </div> <div class="card two"> <div class="top"> <div class="title">Extended</div> <div class="price-sec"> <span class="dollar">$</span> <span class="price">16</span> <span class="decimal">.99</span> </div> </div> <div class="info">Only some features you will get on this package or plan</div> <div class="details"> <div class="one"> <span>Five Addons Domain</span> <i class="fas fa-check"></i> </div> <div class="one"> <span>200GB Local Storage</span> <i class="fas fa-check"></i> </div> <div class="one"> <span>Lifetime Tech Support</span> <i class="fas fa-check"></i> </div> <div class="one"> <span>Unlimited Data Transfer</span> <i class="fas fa-times"></i> </div> <button>Purchase</button> </div> </div> <div class="card three"> <div class="top"> <div class="title">Premium</div> <div class="price-sec"> <span class="dollar">$</span> <span class="price">18</span> <span class="decimal">.99</span> </div> </div> <div class="info">All features you will get on this package or plan</div> <div class="details"> <div class="one"> <span>10 Addons Domain</span> <i class="fas fa-check"></i> </div> <div class="one"> <span>Unlimited Local Storage</span> <i class="fas fa-check"></i> </div> <div class="one"> <span>Lifetime Tech Support</span> <i class="fas fa-check"></i> </div> <div class="one"> <span>Unlimited Data Transfer</span> <i class="fas fa-check"></i> </div> <button>Purchase</button> </div> </div> </div>
5. Finally Save the post and preview it.
This code will definitely work for you but unfortunately not then you can try the below methods.
Method 3: Easy and very simple only HTML and CSS
Simple Create Pricing table using HTML and CSS
Now finally 3rd method almost for every website above methods will work fine, but in case not then use this below code.
Read and use: Google Drive direct link Generator
The steps are the same so I will only share the HTML code and price table HTML.
 |
| responsive pricing table using HTML and CSS |
Add Below CSS in your website template and HTML code in your blog post where you want to include the price table.
<style>* {box-sizing: border-box;
{.columns {float: left;
width: 33.3%;
padding: 8px;
}
.price {
list-style-type: none;
border: 1px solid #eee;
margin: 0;
padding: 0;
-webkit-transition: 0.3s;
transition: 0.3s;
}
.price:hover {
box-shadow: 0 8px 12px 0 rgba(0,0,0,0.2)
}
.price .header {
background-color: #111;
color: white;
font-size: 25px;
}
.price li {
border-bottom: 1px solid #eee;
padding: 20px;
text-align: center;
}
.price .grey {
background-color: #eee;
font-size: 20px;
}
.button {
background-color: #04AA6D;
border: none;
color: white;
padding: 10px 25px;
text-align: center;
text-decoration: none;
font-size: 18px;
}
@media only screen and (max-width: 600px) {
.columns {
width: 100%;
}
}
</style>Below html to add pricing table in blog post.
<div class="columns"><ul class="price"><li class="header">Basic</li><li class="grey">$ 9.99 / year</li> <li>10GB Storage</li> <li>10 Emails</li> <li>10 Domains</li> <li>1GB Bandwidth</li> <li class="grey"><a href="#" class="button">Sign Up</a></li> </ul> </div> <div class="columns"> <ul class="price"> <li class="header" style="background-color:#04AA6D">Pro</li> <li class="grey">$ 24.99 / year</li> <li>25GB Storage</li> <li>25 Emails</li> <li>25 Domains</li> <li>2GB Bandwidth</li> <li class="grey"><a href="#" class="button">Sign Up</a></li> </ul> </div> <div class="columns"> <ul class="price"> <li class="header">Premium</li> <li class="grey">$ 49.99 / year</li> <li>50GB Storage</li> <li>50 Emails</li> <li>50 Domains</li> <li>5GB Bandwidth</li> <li class="grey"><a href="#" class="button">Sign Up</a></li> </ul> </div>
Great! now you know how to add a price table in blogger or any website Right!. so now time for a conclusion.
Does your website want Automatic Html Sitemap: HTML sitemap for Blogger
In Conclusion of Add Responsive Pricing Table using HTML and CSS
So finally after reading [ if you are still reading this ] congratulation, you have learned something new in this article. I hope the above method helped you with what you were searching for like including an amazing and responsive pricing table in the website post.
Well, that’s it in this post, I hope that this will work for you, will see you again with a new and useful script for the blogger platform. Comment Down your opinion and also which type of script or template you want on our website. Share this Post with every blogger you know.
I will try my best to fix any issues regarding this topic. We are providing you many amazing scripts for free, So please follow us on YouTube Channel to get all updates and more useful content.
Thanks for Visiting: Follow by Email and Bookmark Our Technical Arp Website for more such useful scripts.
Read more
Keyword Generator Tool Script for blogger
2 comments
Click here for commentsCool, thanks man
ReplyI really appreciate your blog man, got everything i need
ReplyConversionConversion EmoticonEmoticon