Cara Memasang Pricing Plans di Blog

Cara Memasang Widget Pricing Plans di Blog - Pernah mendengar istilah pricing plans? Umumnya, fitur tersebut banyak ditemukan di blog atau website landing page yang menjual berbagai macam produk dan jasa. Dengan fitur tersebut, pelanggan bisa dengan mudah melihat deskripsi penawaran yang tersedia.

Selain widget konversi mata uang, pricing plans juga menjadi fitur yang sangat dibutuhkan untuk memudahkan semua pelanggan dalam proses pemesanan suatu produk. Tapi sebelum melakukan pemasangan, yuk ketahui terlebih dahulu tentang pengertian dan definisi dari fitur tersebut.

Pengertian dan Definisi

Menurut Google Translate, kata Pricing berarti Harga, sedangkan kata Plans berarti Paket. Jika digabungkan, maka Pricing plans berarti Paket harga.

Keunggulan

1. Memudahkan pelanggan dalam melihat deskripsi produk dan jasa
2. Memudahkan pelanggan dalam melakukan pemesanan
3. Tampilan penawaran yang lebih menarik
4. Terlihat lebih profesional
5. Mudah dalam melakukan pemasangan.

Kekurangan

1. Pemuatan halaman menjadi lebih lambat
2. Pengeditan yang hanya bisa dilakukan melalui mode HTML.

Cara Memasang Pricing Plans di Blog

• Masuk ke BLOGGER
• Pilih menu TEMA
• Pilih EDIT HTML
• Tempel di atas ]]></b:skin>:

.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.ferisp-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.ferisp-order-btn:hover {transform:scale(1.1)}
.pricing-ferisp-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-ferisp-column ul {list-style:none;padding:10px 0;margin:0;font-size:14px;line-height:2.2}
.pricing-ferisp-column img {width:50px}
.pricing-section i {font-size:3rem}
.ferisp-price {font-weight:700;font-size:22px}
.service-info {opacity:.7}
.ferisp-2-column .pricing-ferisp-column {width:50%}
.pricing-ferisp-column:nth-child(1) .ferisp-price,.pricing-ferisp-column:nth-child(1) i {color:#f87200}
.pricing-ferisp-column:nth-child(2) .ferisp-price,.pricing-ferisp-column:nth-child(2) i {color:#ff5483}
.pricing-ferisp-column:nth-child(3) .ferisp-price,.pricing-ferisp-column:nth-child(3) i {color:#2b73f6}
.pricing-ferisp-column:nth-child(1):hover {border-color:#f87200}
.pricing-ferisp-column:nth-child(2):hover {border-color:#ff5483}
.pricing-ferisp-column:nth-child(3):hover {border-color:#2b73f6}
.pricing-ferisp-column:nth-child(1) .pricing-tag,.pricing-ferisp-column:nth-child(1) a.ferisp-order-btn {background:#f87200}
.pricing-ferisp-column:nth-child(2) .pricing-tag,.pricing-ferisp-column:nth-child(2) a.ferisp-order-btn {background:#ff5483}
.pricing-ferisp-column:nth-child(3) .pricing-tag,.pricing-ferisp-column:nth-child(3) a.ferisp-order-btn {background:#2b73f6}

@media screen and (max-width:580px) {
  .pricing-ferisp-column, .ferisp-2-column, .pricing-ferisp-column {width:auto}
  .pricing-container {display:block}
}

• Pilih SIMPAN
• Selesai.

Catatan

1. Anda bisa melakukan pemasangan widget di bagian HTML template, menu TATA LETAK, maupun pada postingan dengan menggunakan script berikut ini:

<div class="pricing-section">
    <div class="pricing-container">
        <div class="pricing-ferisp-column">
            <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0DVyoJw0tifUqlNnapYgT5o8G_qFbpWDGaCXCLL-DBSjyYMeJ86877MEfNdLBkY8EH7XlNUfEX2ovCl7AKE0NAEBvHi3sHnRHMUjq7o1cxfU5qaMGd0nTeDmLokeS3Cr16lBZmtBnpvM/s50/basic.png' alt='Basic'/>
            <div class="pricing-title">Basic</div>
            <div class="pricing-tag">30% off</div>
            <div class="ferisp-price">Rp 180.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="ferisp-order-btn" href="#" title="#" target="_blank">Pesan Sekarang</a>
        </div>
        <div class="pricing-ferisp-column">
            <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRVXvE_VS9LtcPvRx_fC5Vfa13ypyxq3CagXSONwpiayYyQ01Fr3UaTh-yec-Z9hP23QrjDqhU1wNtEceWgyCRXTCUN-_j53FM_HqMJ9WZOgNh6ef6zqppjzfY2PleQXfloy6LpaDXQ5g/s50/personal.png' alt='Professional'/>
            <div class="pricing-title">Personal</div>
            <div class="pricing-tag">Best Value</div>
            <div class="ferisp-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="ferisp-order-btn" href="#" title="#" target="_blank">Pesan Sekarang</a>
        </div>
        <div class="pricing-ferisp-column">
            <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEha6z6-EQsLt4VzNWNtzPtO2wevkBQRMVoP1lD2AWYrTHpKCSPqnQlTlkUGs_n4Z7skgoRFpWNQwcJfF9V1jeXpreA18yzZtp2BLJAXhQVNVnkSwAdzM-S4e-pKsqvqDnaE-U49zGpm06I/s50/developer.png' alt='Developer'/>
            <div class="pricing-title">Professional</div>
            <div class="pricing-tag">For Business</div>
            <div class="ferisp-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="ferisp-order-btn" href="#" title="#" target="_blank">Pesan Sekarang</a>
        </div>
    </div>
</div>

2. Silahkan mengubah script CSS pertama sesuai dengan tampilan widget yang Anda inginkan
3. Silahkan mengisi detail produk dan jasa dengan mengedit isi dari tag li pada script HTML yang ke dua
4. Anda bisa mengubah tampilan gambar menjadi ikon dengan mengganti tag img menjadi tag i.

Demo

Demo	tinyurl.com/y4gev3s4

Penutup

Untuk memberikan keyakinan kepada semua pelanggan, maka keprofesionalan blog menjadi salah satu hal yang sangat perlu diperhatikan. Posisikan diri Anda sebagai pelanggan, apakah Anda mau membeli produk atau jasa di penyedia yang kurang meyakinkan?

Nah, salah satu yang membuat blog terlihat lebih profesional di mata pelanggan adalah dengan adanya widget pricing plans tersebut. Selain itu, widget tersebut juga dapat membantu pelanggan dalam melihat deskripsi penawaran serta cara pemesanan.

Baca Juga:

• Cara Menghilangkan Kode ?m=1 di Akhir URL Blogger
• Cara Menolak Backlink Spam dengan Google Disavow Link Tools
• Tips Sebelum Beralih ke Google AMP

Cukup sekian artikel tentang Cara Memasang Widget Pricing Plans di Blog ini, Terima kasih.