Cara Membuat Pricing Table Responsive di Blog

Mungkin saja kamu ingin menjual jasa di blog kamu, misalnya jasa editing template blog, jasa SEO blog, jasa membuat template blog, ataupun jasa apa saja keahlianmu, nah kamu bisa membuat pricing table dengan tampilan yang menarik dan kelihatan profesional.

Sebelumnya admin juga sudah pernah berbagi cara membuat tabel daftar harga di blog dan juga tentang cara membuat smartlink di blog, Nah pada kesempatan ini admin akan berbagi kode yang bisa kamu gunakan dan bisa di edit sesukamu.

Responsive Pricing Table di Blog

Cara Membuat Pricing Table Responsive

1. Di Blog Blogger 😀
2. Pilih menu Tema ➔ Edit HTML

Edit HTML template

3. Di templatemu sebelumnya sudah ada kode external jQuery library
4. Letakan kode berikut ini di atas </head>

CSS

<style>
.single-price-table{position:relative;z-index:1;overflow:hidden;margin-bottom:30px;-webkit-transition:.24s ease-in-out;transition:.24s ease-in-out;border:1px solid #e0e0e0;border-radius:10px}.single-price-table .price-design-elemnts{position:absolute;visibility:hidden;-webkit-transition:.24s ease-in-out;transition:.24s ease-in-out;opacity:0;border-radius:50%}.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:.24s ease-in-out;transition:.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:first-child{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.active,.single-price-table.active .price-header,.single-price-table:hover,.single-price-table:hover .price-header{background-color:#31348c}.single-price-table.active .price-body ul li,.single-price-table.active .price-header span.package-amount,.single-price-table.active .price-header span.package-amount span,.single-price-table.active .price-header span.package-title,.single-price-table.layout-three.active .price-header span.package-amount,.single-price-table.layout-three:hover .price-header span.package-amount,.single-price-table.layout-two.active .price-header span.package-amount,.single-price-table.layout-two:hover .price-header span.package-amount,.single-price-table:hover .price-body ul li,.single-price-table:hover .price-header span.package-amount,.single-price-table:hover .price-header span.package-amount span,.single-price-table:hover .price-header span.package-title{color:#fff}.single-price-table.active .price-design-elemnts,.single-price-table:hover .price-design-elemnts{visibility:visible;opacity:1}.single-price-table.active .price-design-elemnts.one,.single-price-table.active .price-design-elemnts.three,.single-price-table:hover .price-design-elemnts.one,.single-price-table:hover .price-design-elemnts.three{-webkit-transition-delay:0.1s;transition-delay:0.1s;-webkit-animation:.4s ease-in-out zoomIn;animation:.4s ease-in-out zoomIn}.single-price-table.active .price-design-elemnts.four,.single-price-table.active .price-design-elemnts.two,.single-price-table:hover .price-design-elemnts.four,.single-price-table:hover .price-design-elemnts.two{-webkit-transition-delay:0.3s;transition-delay:0.3s;-webkit-animation:.4s ease-in-out zoomIn;animation:.4s ease-in-out zoomIn}.single-price-table.layout-two .price-header span.package-amount{color:#0d9ce8}.single-price-table.layout-two.active,.single-price-table.layout-two.active .price-header,.single-price-table.layout-two:hover,.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-three .price-footer a,.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.active,.single-price-table.layout-three.active .price-header,.single-price-table.layout-three:hover,.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)}@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:.24s ease-in-out;transition:.24s ease-in-out;border:1px solid #e0e0e0;border-radius:10px}.single-price-table .price-design-elemnts{position:absolute;visibility:hidden;-webkit-transition:.24s ease-in-out;transition:.24s ease-in-out;opacity:0;border-radius:50%}.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:.24s ease-in-out;transition:.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:first-child{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.active,.single-price-table.active .price-header,.single-price-table:hover,.single-price-table:hover .price-header{background-color:#31348c}.single-price-table.active .price-body ul li,.single-price-table.active .price-header span.package-amount,.single-price-table.active .price-header span.package-amount span,.single-price-table.active .price-header span.package-title,.single-price-table.layout-three.active .price-header span.package-amount,.single-price-table.layout-three:hover .price-header span.package-amount,.single-price-table.layout-two.active .price-header span.package-amount,.single-price-table.layout-two:hover .price-header span.package-amount,.single-price-table:hover .price-body ul li,.single-price-table:hover .price-header span.package-amount,.single-price-table:hover .price-header span.package-amount span,.single-price-table:hover .price-header span.package-title{color:#fff}.single-price-table.active .price-design-elemnts,.single-price-table:hover .price-design-elemnts{visibility:visible;opacity:1}.single-price-table.active .price-design-elemnts.one,.single-price-table.active .price-design-elemnts.three,.single-price-table:hover .price-design-elemnts.one,.single-price-table:hover .price-design-elemnts.three{-webkit-transition-delay:0.1s;transition-delay:0.1s;-webkit-animation:.4s ease-in-out zoomIn;animation:.4s ease-in-out zoomIn}.single-price-table.active .price-design-elemnts.four,.single-price-table.active .price-design-elemnts.two,.single-price-table:hover .price-design-elemnts.four,.single-price-table:hover .price-design-elemnts.two{-webkit-transition-delay:0.3s;transition-delay:0.3s;-webkit-animation:.4s ease-in-out zoomIn;animation:.4s ease-in-out zoomIn}.single-price-table.layout-two .price-header span.package-amount{color:#0d9ce8}.single-price-table.layout-two.active,.single-price-table.layout-two.active .price-header,.single-price-table.layout-two:hover,.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-three .price-footer a,.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.active,.single-price-table.layout-three.active .price-header,.single-price-table.layout-three:hover,.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)}@media (max-width:991.98px){.price-space.spacer-150{height:70px}.price-area.home-two .spacer-80{height:40pxs}}}
</style>

5. Bisa diletakan dalam postingan atau dalam template blog di tempat yang kamu inginkan. Misalnya dalam postingan pada mode HTML

Tampilan HTML post

HTML

<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>

Edit sesuai kebutuhan, save dan cek hasilnya.