Membuat Widget Pricing Plans Untuk Harga Jasa atau Produk
30 April 2020
Halo sobat Blanter, kembali lagi saya akan membagikan tutorial untuk sobat yang menginginkan widget sederhana dan dapat menjelaskan suatu produk atau jasa yang dijual secara lengkap dan ringkas.
Widget tersebut adalah Pricing Plans atau Pricing Area yang biasa kita temukan pada Template Landing Page, berfungsi untuk menampilkan nama produk atau jenis jasa yang lengkap dengan harga, deskripsi dan juga tombol order sekarang. Dengan menggunakan widget ini calon pembeli jasa dan produk akan lebih mudah dalam melihat harga dan juga melakukan kontak.
Untuk pemasangan, widget ini cocok untuk dipasang pada halaman depan blog dan juga halaman artikel, tampilan yang modern dan sederhana membuat widget ini mudah untuk dimodifikasi sesuai selera.
Info : Tips ini dapat dilakukan pada semua platform.
Cara Memasang Widget Pricing Plans di Blog
Silahkan sobat masuk ke Blogger > Template > Edit HTML
Letakan kode di bawah ini tepat di atas kode
]]></b:skin>/* Pricing Section by Dunia Blanter (www.idblanter.com) */
.pricing-section{font-family:'Google Sans',Arial,sans-serif;position:relative;overflow:hidden;display:block;margin:15px 0;line-height:1.7}
.pricing-section .pricing-title{font-size:1.1rem;margin:1rem 0 0;font-weight:700}
.pricing-container{display:flex;max-width:1000px;margin:0 auto}
.pricing-tag{margin:.5rem 0 1rem;font-size:13px;display:inline-block;background:#333;color:#fff;padding:3px 15px;border-radius:20px}
a.blanter-order-btn{font-size:14px;text-transform:uppercase;text-decoration:none;background:#333;color:#fff;display:inline-block;padding:7px 20px;border-radius:20px;transition:all .3s ease-in-out}
a.blanter-order-btn:hover{transform:scale(1.1)}
.pricing-blanter-column{background:#fff;padding:30px 15px;box-sizing:border-box;border-radius:10px;text-align:center;width:33%;margin:10px;box-shadow:0 7px 7px rgba(0,0,0,0.06);border:2px solid #fff;transition:all .3s ease-in-out}
.pricing-blanter-column ul{list-style:none;padding:10px 0;margin:0;font-size:14px;line-height:2.2}
.pricing-blanter-column img{width:50px}
.pricing-section i{font-size:3rem}
.blanter-price{font-weight:700;font-size:22px}
.service-info{opacity:.7}
.blanter-2-column .pricing-blanter-column{width:50%}
.pricing-blanter-column:nth-child(1) .blanter-price,.pricing-blanter-column:nth-child(1) i{color:#f87200} /* Change Color Code */
.pricing-blanter-column:nth-child(2) .blanter-price,.pricing-blanter-column:nth-child(2) i{color:#ff5483} /* Change Color Code */
.pricing-blanter-column:nth-child(3) .blanter-price,.pricing-blanter-column:nth-child(3) i{color:#2b73f6} /* Change Color Code */
.pricing-blanter-column:nth-child(1):hover{border-color:#f87200} /* Change Color Code */
.pricing-blanter-column:nth-child(2):hover{border-color:#ff5483} /* Change Color Code */
.pricing-blanter-column:nth-child(3):hover{border-color:#2b73f6} /* Change Color Code */
.pricing-blanter-column:nth-child(1) .pricing-tag,.pricing-blanter-column:nth-child(1) a.blanter-order-btn{background:#f87200} /* Change Color Code */
.pricing-blanter-column:nth-child(2) .pricing-tag,.pricing-blanter-column:nth-child(2) a.blanter-order-btn{background:#ff5483} /* Change Color Code */
.pricing-blanter-column:nth-child(3) .pricing-tag,.pricing-blanter-column:nth-child(3) a.blanter-order-btn{background:#2b73f6} /* Change Color Code */
@media screen and (max-width:580px){
.pricing-blanter-column,.blanter-2-column .pricing-blanter-column{width:auto}
.pricing-container{display:block}
}
Simpan, atau klik Icon Save.
Selanjutnya untuk memasang widget, kode di bawah ini cukup diletakan di tempat yang sobat inginkan, seperti di tata letak blogger, di edit HTML ataupun dapat diletakan pada postingan tertentu (mode HTML seperti pada gambar).
 |
Post mode HTML
|
<div class="pricing-section">
<div class="pricing-container">
<div class="pricing-blanter-column">
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGq90o9m30nkLdWgAWAI77uCKdrSYSJZwLOyQJzbC04NI7jcxdTYN121MGBQ0WcXQoPj4xTVaJmX78sBpE0lT1K21M3YqojMmfeDY-hIiUEvOnXXxI0FD4d-E1kwmwZ4DOfgq5GVrqlt8/s50/basic.png' alt='Basic'/>
<div class="pricing-title">Basic</div>
<div class="pricing-tag">20% off</div>
<div class="blanter-price">Rp 150.000</div>
<div class="service-info">
<ul>
<li>Documentation</li>
<li>Premium Template</li>
<li>1 License</li>
<li>Full Optimization</li>
<li>1 Month Full Support</li>
<li>Easy Customize</li>
<li>-</li>
</ul>
</div>
<a class="blanter-order-btn" href="#" title="#" target="_blank">Order Sekarang</a>
</div>
<div class="pricing-blanter-column">
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxlyJkZsTP2s29t4BoQdWZXFh9VNpsDpGOawJ7GaRFgVHpSImncH1sHFlH9Z9y4tgZITcUSk7nleQzTLhOCpMcqZLdsBx1Am6bZzh8CxlicpJ6oV0Oua08SxEbM09ZM7xmLYj1u8dGobQ/s50/personal.png' alt='Personal'/>
<div class="pricing-title">Personal</div>
<div class="pricing-tag">Best Value</div>
<div class="blanter-price">Rp 220.000</div>
<div class="service-info">
<ul>
<li>Documentation</li>
<li>Premium Template</li>
<li>3 License</li>
<li>Full Optimization</li>
<li>3 Month Full Support</li>
<li>Easy Customize</li>
<li>-</li>
</ul>
</div>
<a class="blanter-order-btn" href="#" title="#" target="_blank">Order Sekarang</a>
</div>
<div class="pricing-blanter-column">
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpeczEPpMXiPlhboN09ZIjllA34LuBZbBYpwnROkIvZlRTMf3_BacWG03x2a64LiZMHt_wTUlI4yn7TzJgLhx7eRr2m4llwzzo8Og2FPe_YWj9_MOo7lbZq_bFduFHTQdxkRzGu5OTeBs/s50/developer.png' alt='Developer'/>
<div class="pricing-title">Developer</div>
<div class="pricing-tag">For Business</div>
<div class="blanter-price">Rp 999.000</div>
<div class="service-info">
<ul>
<li>Documentation</li>
<li>Premium Template</li>
<li>Unlimited License</li>
<li>Full Optimization</li>
<li>6 Month Full Support</li>
<li>Easy Customize</li>
<li>1 Bonus Template</li>
</ul>
</div>
<a class="blanter-order-btn" href="#" title="#" target="_blank">Order Sekarang</a>
</div>
</div>
</div>Simpan.
Gambar pada widget ini dapat diganti menjadi Font Awesome dengan merubah kode berikut :
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGq90o9m30nkLdWgAWAI77uCKdrSYSJZwLOyQJzbC04NI7jcxdTYN121MGBQ0WcXQoPj4xTVaJmX78sBpE0lT1K21M3YqojMmfeDY-hIiUEvOnXXxI0FD4d-E1kwmwZ4DOfgq5GVrqlt8/s50/basic.png' alt='Basic'/>menjadi kode Font Awesome :
<i class='fas fa-home'></i>Lihat Juga : Template Toko Online dengan Checkout Whatsapp dan Email
Untuk gambar dan icon menarik sobat bisa cek melalui Flaticons, dan Font Awesome.
Sekian tips yang bisa saya bagikan kali ini, semoga bermanfaat bagi sobat semua. Jangan lupa untuk Bookmark, Subscribe dan Komentar tentang tutorial ini.