Cara Membuat Widget Pricing Plans (Harga Jasa atau Produk)

Halo sobat blogger, kali ini saya akan membagikan tutorial cara memasang widget pricing plans untuk harga jasa atau produk. Widget ini sangat berguna untuk kamu yang menginginkan widget sederhana dan dapat menjelaskan suatu produk atau jasa yang dijual secara lengkap dan ringkas.

Source gambar by idblanter.com

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

DEMO PRICING AREA

CARA PASANG WIDGET PRICING PLANS DI BLOG

- Silahkan kamu masuk ke Blogger > Template > Edit HTML

- Letakan kode di bawah ini tepat di atas kode ]]></b:skin>

/* Pricing Section */
.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 kamu inginkan, seperti di tata letak blogger, di edit HTML ataupun dapat diletakan pada postingan tertentu (mode HTML seperti pada gambar).

<div class="pricing-section">
<div class="pricing-container">
    <div class="pricing-blanter-column">
        <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSzDryAv7uj27REpo8EfqQz_3lo2YFYjJ20JQr7Lpf1kkpBtfku4B1Wl4DTaFQulw7-rL0LdpWB359Q8TeRF5dyPF86-nZI4VuinkFo-Utp_J5MvpAybSaVabbdY1dTBgfbUlu2Bs_-lU/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/AVvXsEjh5wTS7Kr9ztEwk5VxEo2Otc2x2eiLgZ-sa0ES1BREqj7L_o92lzpsgkG1Uhyv7ZZO41-r57GjXv0EIv_xE2BGV5WM6DYn1Yo-YeXPoKimPJVd-JJxzXjw7Mf3eORLwxgZ9JVJxHIWqiM/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/AVvXsEgTPUMRfheMVx981yqIWTRpYVOTltcptrpfraU4KluxZU56JujPsKDhh0sKpqOag-BQnR9k-kDdNcfnM2ZrehL9U0Vb7TkxAZe3yEYtqo9AHWhvz8CDor43USyOZ4e5t-ybha-E-uNovQI/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/AVvXsEjSzDryAv7uj27REpo8EfqQz_3lo2YFYjJ20JQr7Lpf1kkpBtfku4B1Wl4DTaFQulw7-rL0LdpWB359Q8TeRF5dyPF86-nZI4VuinkFo-Utp_J5MvpAybSaVabbdY1dTBgfbUlu2Bs_-lU/s50/basic.png' alt='Basic'/>

menjadi kode Font Awesome :