SEPESER.COM

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.

Tabel Daftar Harga Responsive. Apakah sobat pernah berkunjung ke blog di luar sana dan melihat daftar harga seperti ini? Tabel daftar harga seperti ini sangat jarang terlihat pada blog berplatform Blogspot. Namun ternyat kamu juga bisa membuatnya loh di blog blogspot kamu. Berikut admin sepeser.com akan berbagi tutorial cara membuat tabel daftar harga responsive di Blogger.

Tabel daftar harga seperti ini biasanya dipasang pada blog atau web yang menyediakan atau menjual misalnya Domain dan Hosting, tapi bisa juga kamu gunakan untuk menjual apasaja di Blog kamu, bisa berupa barang maupun jasaa. Agar jualanmu kelihatan lebih profesional dan agar calon pembeli lebih yakin akan keseriusanmu maka buatlah tampilan yang profesional juga.

Fitur ini banyak ditemukan di blog atau website yang memasarkan banyak sekali macam produk dan jasa. Dengan fitur ini, pelanggan akan dengan mudah melihat deskripsi penawaran yang tersedia dan mempermudah konsumen dalam proses pemesanan produk. 

Oh yah kemarin juga admin pernah berbagi cara membuat tabel harga responsive versi lain dan cara membuat efek zoom berputar pada gambar blog. Ok sobat, gambar di atas tadi adalah contoh tampilannya, tapi jika belum cukup kamu dapat melihat demonya juga.