Cara Membuat Tabel Daftar Harga Responsive Kekinian 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 memasarkan banyak sekali macam produk dan jasa. Dengan fitur tersebut, pelanggan mampu dengan gampang menyaksikan deskripsi penawaran yang tersedia.

Selain widget konversi mata duit, pricing plans juga menjadi fitur yang sungguh diharapkan untuk membuat lebih mudah semua konsumen dalam proses pemesanan suatu produk. Tapi sebelum melakukan pemasangan, yuk ketahui terlebih dahulu wacana pemahaman dan definisi dari fitur tersebut.

Pengertian dan Definisi

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

Keunggulan

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

Kekurangan

1. Pemuatan halaman menjadi lebih lambat
2. Pengeditan yang cuma bisa dilakukan lewat mode HTML.

Cara Memasang Tabel Daftar Harga di Blog

• Masuk ke BLOGGER
• Pilih hidangan 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 mampu melakukan pemasangan widget di bab HTML template, hidangan 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/AVvXsEhmp4__LBBZEAACFyvoxtCNIyGAlVZmxyFB2npJ_Jnut2OOpWJ-KG8E0aO3UX1BL5NnCGKyFPIV5AbUKoeiiJLSxkTsBSnZIPt7IeXXm4n5fKTknqUodX-6w7ABDVefNN_ImUyqKaGILYM/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/AVvXsEhZMrAVYaikYQ_214G5fvYM6fTYrRQ8eVM8pE2fKvabZxhK-CIUJjAI6gveiMjjQQkD04cDf9Tb5c1XVu2Kku8RxXNfpP3RyZ2MtjX0GKzqj_eAey0AV67Eji7JgrzM-SkAbNcRDETIF1I/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/AVvXsEjKcnXrJW33vWOwgXWlUAVlYpPK9FFEMq-hlgtbss_PAkZL6mzIAeosYF9zoGArtq9rUo11_uP_ly-eXL8gnJs8_37hJ_e3tqYVwwVbsca2SRncLQQxJlyuxb7le9Npg-pvrOWFOqB9YIU/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 performa 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 mampu mengubah tampilan gambar menjadi ikon dengan mengganti tag img menjadi tag i. Untuk hasilnya seperti gambar dibawah

Penutup

Untuk memberikan kepercayaan terhadap semua konsumen, maka keprofesionalan blog menjadi salah satu hal yang sungguh perlu diperhatikan. Posisikan diri Anda sebagai konsumen, apakah Anda mau berbelanja produk atau jasa di penyedia yang kurang meyakinkan?

Nah, salah satu yang membuat blog tampaklebih profesional di mata konsumen yaitu dengan adanya widget pricing plans tersebut. Selain itu, widget tersebut juga dapat membantu konsumen dalam menyaksikan deskripsi penawaran serta cara reservasi.

Baca Juga:

• Cara Menghilangkan Akhiran URL ?m=0 dan ?m=1 di Blog
• Cara Menolak Backlink Spam dengan Google Disavow Link Tools
• Tips Sebelum Beralih ke Google AMP

Cukup sekian postingan wacana Cara Memasang Widget Pricing Plans di Blog ini, Terima kasih.

Baca Juga