Cara Memasang Pricing Plans di Blog

Cara Memasang Widget Pricing Plans di Blog

Ferisp.com - 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.

Pricing Plans Menurut Google Translate
Sumber: Google Translate

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 ikon tanda panah
  • Pilih EDIT HTML
  • Tempel di atas ]]></b:skin>:
  • /* Pricing Plans by Ferisp */
    .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} /* Ubah warna kode */
    .pricing-ferisp-column:nth-child(2) .ferisp-price,.pricing-ferisp-column:nth-child(2) i{color:#ff5483} /* Ubah warna kode */
    .pricing-ferisp-column:nth-child(3) .ferisp-price,.pricing-ferisp-column:nth-child(3) i{color:#2b73f6} /* Ubah warna kode */
    .pricing-ferisp-column:nth-child(1):hover{border-color:#f87200} /* Ubah warna kode */
    .pricing-ferisp-column:nth-child(2):hover{border-color:#ff5483} /* Ubah warna kode */
    .pricing-ferisp-column:nth-child(3):hover{border-color:#2b73f6} /* Ubah warna kode */
    .pricing-ferisp-column:nth-child(1) .pricing-tag,.pricing-ferisp-column:nth-child(1) a.ferisp-order-btn{background:#f87200} /* Ubah warna kode */
    .pricing-ferisp-column:nth-child(2) .pricing-tag,.pricing-ferisp-column:nth-child(2) a.ferisp-order-btn{background:#ff5483} /* Ubah warna kode */
    .pricing-ferisp-column:nth-child(3) .pricing-tag,.pricing-ferisp-column:nth-child(3) a.ferisp-order-btn{background:#2b73f6} /* Ubah warna kode */
    @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:
  2. <div class="pricing-section">
        <div class="pricing-container">
            <div class="pricing-ferisp-column">
                <img src='https://2.bp.blogspot.com/-HWl2PCk1T_g/XqqDylYxjCI/AAAAAAAAONY/h6Yr9fkzWhQ35ob37L9PnxiX7ExTmns1gCLcBGAsYHQ/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://2.bp.blogspot.com/-KVVFsnJlM9E/XqqD0Qo0KDI/AAAAAAAAONg/FIn1BXo4PU8xX12gCac755x9vXDHOfVvQCLcBGAsYHQ/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://2.bp.blogspot.com/-QoGlZN-t_fQ/XqqDzmE276I/AAAAAAAAONc/AG5ZXRxQo9Q24-LVUtdg_Jf3Za0kZqacACLcBGAsYHQ/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>
  3. Silahkan mengubah script CSS pertama sesuai dengan tampilan widget yang Anda inginkan
  4. Silahkan mengisi detail produk dan jasa dengan mengedit isi dari tag li pada script HTML yang ke dua
  5. Anda bisa mengubah tampilan gambar menjadi ikon dengan mengganti tag img menjadi tag i.

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.

Mungkin sampai di sini saja pembahasan kali ini, mudah-mudahan bisa membantu Anda semua dalam mendapatkan lebih banyak pelanggan.