Membuat Widget Pricing Tables di Halaman Statis

Cara Membuat Widget Pricing Plans Tables di Halaman Statis Blogger

Hai sobat Fernn, kali ini saya ingin membagikan tutorial seputar blogging yaitu Membuat Widget Pricing Tables di Halaman Statis yang akan berguna pada saat kalian memiliki sebuah usaha berbentuk jasa atau juga produk dan ingin mempromosikannya disebuah situs.

Halaman ataupun widget seperti ini bisa kalian temukan hampir di semua situs yang menyediakan produk / jasa dan menggunakan tema Landing Page. Pada umumnya hal ini bertujuan untuk menunjukkan keseriusan penjual agar terlihat lebih profesional dengan detail produk atau jasa yang spesifik.

Untuk menerapkannya, kamu harus menambahkan kode HTML dan CSS untuk menampilkan desainnya dan juga sangat cocok apabila dipasang pada halaman awal blog atau mungkin halaman artikel / statis. Tampilannya yang modern dan sederhana membuat widget sangat mudah untuk di modifikasi sesuai selera kalian.

INFO : Widget ini bisa sobat gunakan pada semua platform.

Cara Memasang Widget Pricing Plans

Pastikan kalian sudah memiliki kodenya terlebih dahulu, bisa didapatkan dengan mengunduh file HTML dan CSS atau bisa langsung mengikuti tutorial yang saya berikan dibawah ini.

  1. Silahkan masuk terlebih dahulu ke halaman login Blogger.com
  2. Pada menu dashboard, pilih Tema > Edit HTML
  3. Kemudian letakkan kode CSS berikut ini tepat diatas kode ]]></b:skin>
    /* Pricing Section by Fernn.id */
    .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.fernn-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.fernn-order-btn:hover{transform:scale(1.1)}
    .pricing-fernn-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-fernn-column ul{list-style:none;padding:10px 0;margin:0;font-size:14px;line-height:2.2}
    .pricing-fernn-column img{width:50px}
    .pricing-section i{font-size:3rem}
    .fernn-price{font-weight:700;font-size:22px}
    .service-info{opacity:.7}
    .fernn-2-column .pricing-fernn-column{width:50%}
    .pricing-fernn-column:nth-child(1) .fernn-price,.pricing-fernn-column:nth-child(1) i{color:#f87200} /* Change Color Code */
    .pricing-fernn-column:nth-child(2) .fernn-price,.pricing-fernn-column:nth-child(2) i{color:#ff5483} /* Change Color Code */
    .pricing-fernn-column:nth-child(3) .fernn-price,.pricing-fernn-column:nth-child(3) i{color:#2b73f6} /* Change Color Code */
    .pricing-fernn-column:nth-child(1):hover{border-color:#f87200} /* Change Color Code */
    .pricing-fernn-column:nth-child(2):hover{border-color:#ff5483} /* Change Color Code */
    .pricing-fernn-column:nth-child(3):hover{border-color:#2b73f6} /* Change Color Code */
    .pricing-fernn-column:nth-child(1) .pricing-tag,.pricing-fernn-column:nth-child(1) a.fernn-order-btn{background:#f87200} /* Change Color Code */
    .pricing-fernn-column:nth-child(2) .pricing-tag,.pricing-fernn-column:nth-child(2) a.fernn-order-btn{background:#ff5483} /* Change Color Code */
    .pricing-fernn-column:nth-child(3) .pricing-tag,.pricing-fernn-column:nth-child(3) a.fernn-order-btn{background:#2b73f6} /* Change Color Code */
    @media screen and (max-width:580px){
    .pricing-fernn-column,.fernn-2-column .pricing-fernn-column{width:auto}
    .pricing-container{display:block}
    }
    
  4. Lalu klik pada tombol Simpan untuk menerapkan semua perubahan.

Cara Menerapkan di Halaman Statis

Untuk penerapannya sebenarnya sama saja mau kalian letakkan di halaman artikel / statis sekalipun. Tapi pada artikel ini admin hanya membahas cara menerapkannya di halaman statis blogger saja.

Silahkan sobat masuk ke menu dashboard blogger, lalu pilih Halaman > buat Halaman Baru kemudian letakkan kode berikut ini pada teks area HTML bukan Compose.

Gambar post mode html
<div class="pricing-section">
<div class="pricing-container">
    <div class="pricing-fernn-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">20% off</div>
        <div class="fernn-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="fernn-order-btn" href="#" title="#" target="_blank">Order Now</a>
    </div>
    <div class="pricing-fernn-column">
        <img src='https://2.bp.blogspot.com/-KVVFsnJlM9E/XqqD0Qo0KDI/AAAAAAAAONg/FIn1BXo4PU8xX12gCac755x9vXDHOfVvQCLcBGAsYHQ/s50/personal.png' alt='Personal'/>
        <div class="pricing-title">Personal</div>
        <div class="pricing-tag">Best Value</div>
        <div class="fernn-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="fernn-order-btn" href="#" title="#" target="_blank">Order Now</a>
    </div>
    <div class="pricing-fernn-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">Developer</div>
        <div class="pricing-tag">For Business</div>
        <div class="fernn-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="fernn-order-btn" href="#" title="#" target="_blank">Order Now</a>
    </div>
</div>
</div>
Sobat bisa merubah icon widget yang ditandai (block) dengan icon lain dari Flaticons.

Silahkan kalian klik tombol Pratinjau terlebih dulu untuk melihat ada kesalahan pada widget atau tidak, jika tidak dan merasa semuanya sudah sesuai, sekarang kalian bisa langsung klik tombol Publikasikan.

Penutup

Mungkin sekian dulu postingan dari Membuat Widget Pricing Tables di Halaman Statis. Jika ada pertanyaan bisa langsung ajukan dikolom komentar, semoga selalu bermanfaat dan terima kasih.

Source code:
https://www.idblanter.com/2020/04/membuat-widget-pricing-plans-untuk-bisnis.html