Kali ini saya akan membagikan tutorial untuk kalian yang menginginkan widget sederhana dan dapat menjelaskan suatu produk yang dijual secara lengkap dan sangat 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 jualan yang lengkap dengan harga produk,dengan dilengkapi deskripsi dan juga tombol order sekarang. Dengan menggunakan widget ini calon pembeli jasa kalian akan lebih mudah dalam memahami deskripsi produk , melihat harga dan juga melakukan kontak kepada
Untuk pemasangan, widget pricing plans ini cocok untuk dipasang pada halaman depan blog dan juga halaman artikel kalian, tampilan yang modern dan sederhana membuat widget ini mudah untuk dimodifikasi sesuai selera kalian masing - masing.
Langsung Saja Kalian masuk ke Blogger - Tema - Edit HTML.
Masukan Kode Dibawah Ini tepat diatas 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 lalu klik icon save.
Selanjutnya Untuk Memasang widget , code dibawah ini bisa diletakan ditempat manapun yang kalian inginkan , seperti di tata letak blogger di postingan (postingan mode html) atau di edit html.
<div class="pricing-section">
<div class="pricing-container">
<div class="pricing-blanter-column">
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLyA3ciBZ9JcnJNIhrOykq0LhIg1iXfqTTNZwRQ4XW4-ZyJf2Ygwh-f1sKt4YhNqTBy81iX9ulGErfaACoAOYs4WgOseCXn6bPpNuSRgKwlNA7CWhTcCYnELNr3vRT6sWmEK6-u_sR6u0/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/AVvXsEhGOF3KNLMkRtr4Fzhpk8sHVNnHCF3iJKgRUbZmSuQ4ngxDrEaijxN3xGKewF5aJEM2iYGAlE7WaExMKNm9758zdMNvX6Opqs1wqWz01YNWctjlaplznQ4uOSm0Z3hXMB8OuYccTy6cM3w/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/AVvXsEiAFAfK28MO9fY16isDwODxszSOXzZ6T-hTCeQlAMgRlOY0wzRL_lgXcslXdbQjkIpZdvBY0DkWN6eBVLO0jGJskw4yqLiiCm4-jZmW4ZoUzVnTaH3SCtTmPi4iZHBoJk7OqcLqOt3HUGk/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 free 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 dirubah menjadi dengan font awesome dengan Merubah kode berikut
style="-webkit-text-size-adjust: auto; -webkit-user-select: text; background-color: #f4f8fd; border-radius: 10px; border: 2px solid rgb(227, 236, 247); clear: both; color: #666666; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace; font-size: 12px; margin-bottom: 15px; margin-right: 15px; margin-top: 15px; max-height: 500px; overflow: auto; padding: 10px; text-align: justify;"><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLyA3ciBZ9JcnJNIhrOykq0LhIg1iXfqTTNZwRQ4XW4-ZyJf2Ygwh-f1sKt4YhNqTBy81iX9ulGErfaACoAOYs4WgOseCXn6bPpNuSRgKwlNA7CWhTcCYnELNr3vRT6sWmEK6-u_sR6u0/s50/basic.png' alt='Basic'/>
menjadi kode font awesome
<i class='fas fa-home'></i>Script Created by : IDBLANTER
DOWNLOAD ALL MODEL WIDGET PRICING PLANS