Membuat Widget Pricing Plans di Halaman Statis Blogger

Membuat Widget Pricing Plans di Halaman Statis Blogger
Membuat Widget Pricing Plans di Halaman Statis Blogger

Membuat Widget Pricing Plans di Halaman Statis BloggerHai sahabat ruangcoder, kali ini saya ingin membagikan suatu  tutorial seputar blogging yaitu Cara Membuat Widget Pricing Plans  di Halaman Statis yang dimana nantinya akan berguna pada saat kalian memiliki sebuah usaha berbentuk jasa atau juga produk dan ingin mempromosikannya disebuah situs atau blog kalian sendiri.

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

Dan untuk menerapkannya, kalian harus menambahkan kode HTML dan CSS untuk menampilkan desainnya dan juga sangat cocok apabila kalian pasang pada halaman awal blog atau mungkin halaman artikel / statis. Tampilannya yang sudah modern dan sederhana membuat widget ini  sangat mudah untuk di modifikasi sesuai selera kalian.
INFO :
Widget ini bisa kalian gunakan pada semua platform.

Cara Memasang Widget Pricing Plans

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

Cara Menerapkan pada Halaman Statis

Dalam penerapannya sebenarnya sama saja mau kalian letakkan di halaman artikel maupun statis sekalipun. Tapi pada artikel ini saya hanya membahas cara menerapkannya di halaman statis blogger saja. Silahkan kalian masuk ke menu dashboard blogger, lalu pilih Halaman > buat Halaman Baru kemudian letakkan kode berikut ini pada teks area HTML bukan Compose
<div class="pricing-section">
<div class="pricing-container">
    <div class="pricing-ruangcoder-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="ruangcoder-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="ruangcoder-order-btn" href="#" title="#" target="_blank">Order Now</a>
    </div>
    <div class="pricing-ruangcoder-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="ruangcoder-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="ruangcoder-order-btn" href="#" title="#" target="_blank">Order Now</a>
    </div>
    <div class="pricing-ruangcoder-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="ruangcoder-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="ruangcoder-order-btn" href="#" title="#" target="_blank">Order Now</a>
    </div>
</div>
</div>
INFO :
Kalian bisa merubah icon widget yang ditandai (block) dengan icon lain dari Flaticons atau apapun itu.

Langkah terakhir, 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 pada tombol Publikasikan.

Penutup

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