Cara Membuat Widget Pricing Plans Untuk Harga Jasa atau Produk

Cara Membuat Widget Pricing Plans Untuk Harga Jasa atau Produk - Widget pricing plans atau pricing area adalah widget yang berfungsi untuk menampilkan nama produk atau jenis jasa yang anda tawarkan, dengan menggunakan widget ini pengunjung atau calon pembeli jasa atau produk yang anda tawarkan lebih mudah dalam melihat harga yang anda tawarkan

Widget ini juga tidak akan memberatkan loading blog anda, karena kode ini hanya menggunakan CSS saja. Jika kamu ingin menjual produk atau jasa, maka anda tidak salah lagi jika sudah berkunjung ke website ini

Pada kesempatan kali ini saya akan membagikan tutorial Cara Membuat Widget Pricing Plans, anda bisa mengikuti langkah-langkah yang sudah saya siapkan untuk anda. Yuk langsung saja!

Cara Membuat Widget Pricing Plans

1. Login ke akun Blogger anda

2. Cari menu Template Edit HTML

3. Letakkan kode dibawah ini tepat diatas ]]></b:skin>


/* Pricing Section - www.mahesdzgn.xyz */
.mahesdzgn-pricing-section{font-family:'Google Sans',Arial,sans-serif;position:relative;overflow:hidden;display:block;margin:15px 0;line-height:1.7}
.mahesdzgn-pricing-section .pricing-title{font-size:1.1rem;margin:1rem 0 0;font-weight:700}
.mahesdzgn-pricing-container{display:flex;max-width:1000px;margin:0 auto}
.mahesdzgn-pricing-tag{margin:.5rem 0 1rem;font-size:13px;display:inline-block;background:#333;color:#fff;padding:3px 15px;border-radius:20px}
a.blanter-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.blanter-order-btn:hover{transform:scale(1.1)}
.mahesdzgn-pricing-blanter-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}
.mahesdzgn-pricing-blanter-column ul{list-style:none;padding:10px 0;margin:0;font-size:14px;line-height:2.2}
.mahesdzgn-pricing-blanter-column img{width:50px}
.mahesdzgn-pricing-section i{font-size:3rem}
.mahesdzgn-blanter-price{font-weight:700;font-size:22px}
.service-info{opacity:.7}
.mahesdzgn-blanter-2-column .pricing-blanter-column{width:50%}
.mahesdzgn-pricing-blanter-column:nth-child(1) .blanter-price,.pricing-blanter-column:nth-child(1) i{color:#f87200} /* Change Color Code */
.mahesdzgn-pricing-blanter-column:nth-child(2) .blanter-price,.pricing-blanter-column:nth-child(2) i{color:#ff5483} /* Change Color Code */
.mahesdzgn-pricing-blanter-column:nth-child(3) .blanter-price,.pricing-blanter-column:nth-child(3) i{color:#2b73f6} /* Change Color Code */
.mahesdzgn-pricing-blanter-column:nth-child(1):hover{border-color:#f87200} /* Change Color Code */
.mahesdzgn-pricing-blanter-column:nth-child(2):hover{border-color:#ff5483} /* Change Color Code */
.mahesdzgn-pricing-blanter-column:nth-child(3):hover{border-color:#2b73f6} /* Change Color Code */
.mahesdzgn-pricing-blanter-column:nth-child(1) .pricing-tag,.pricing-blanter-column:nth-child(1) a.blanter-order-btn{background:#f87200} /* Change Color Code */
.mahesdzgn-pricing-blanter-column:nth-child(2) .pricing-tag,.pricing-blanter-column:nth-child(2) a.blanter-order-btn{background:#ff5483} /* Change Color Code */
.mahesdzgn-pricing-blanter-column:nth-child(3) .pricing-tag,.pricing-blanter-column:nth-child(3) a.blanter-order-btn{background:#2b73f6} /* Change Color Code */
@media screen and (max-width:580px){
.mahesdzgn-pricing-blanter-column,.blanter-2-column .pricing-blanter-column{width:auto}
.mahesdzgn-pricing-container{display:block}
}

4. Simpan Tema

Cara Memanggil Kode Widget Pricing Plans

1. Untuk memasang widget kamu bisa mencari tempat yang ingin kamu tampilkan, seperti Tata Letak, Halaman Postingan, dan juga Postingan

6 Cara Membuat First Image Cover Diatas Judul Artikel Blog

Cara Membuat Syntax Higlighter Di Blogger | Pemula Wajib Tahu

Cara Membuat Contact Form (Contact Us) Keren Di Blogger

Cara Daftar dan Verifikasi Blog ke Google Search Console

Cara Menghilangkan Tulisan Diberdayakan oleh Blogger

2. Lalu masukan kode dibawah ini di Mode HTML


<div class="pricing-section">
<div class="pricing-container">
    <div class="pricing-blanter-column">
        <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFnRvULSVowZ0jTLzHRvKwLala4DuxN59K26VAb55VqZ5FyudTxXXotfis_TqJKDENkUjWeG3oRhLQ_DHRtPV229cG2hEE-lhf4KLrIJzAZClbAobPzMhfBRh2CGA7TvnHnS8IT-BTyo4/s50/basic.png' alt='Basic'/>
        <div class="pricing-title">Basic</div>
        <div class="pricing-tag">20% off</div>
        <div class="blanter-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="blanter-order-btn" href="#" title="#" target="_blank">Order Sekarang</a>
    </div>
    <div class="pricing-blanter-column">
        <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwJvgyw1fZxNIB6n2DY_6OXZKNdoxprXDYM1AzFSMvwrnr7vzppSRFMqssMtPTnVVZpkvzP3Tbz-x5dTSZh33QvUc22_PMYYP_kLzmdEqFoal6B2zFwZ0H130-Yik_0rGnP7S6moIzIhI/s50/personal.png' alt='Personal'/>
        <div class="pricing-title">Personal</div>
        <div class="pricing-tag">Best Value</div>
        <div class="blanter-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="blanter-order-btn" href="#" title="#" target="_blank">Order Sekarang</a>
    </div>
    <div class="pricing-blanter-column">
        <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlpGCxZjDmsogEqWPZGu3PXCv3KeCDxGhJjGIl_enUNuekscGIBJ7l9HhUyeZybqkB5css1l7MZZoFzt4xECN5rIdAkBKQ3dWbTcLw8Jp68qozzVsXIXemmeiBwdzJMs6HGKRRsJAfaH4/s50/developer.png' alt='Developer'/>
        <div class="pricing-title">Developer</div>
        <div class="pricing-tag">For Business</div>
        <div class="blanter-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="blanter-order-btn" href="#" title="#" target="_blank">Order Sekarang</a>
    </div>
</div>
</div>

3. Simpan dan lihat hasilnya!

Demo (https://www.iptahudin.com/p/jasa-konten-video-animasi-profesional.html)

Bagaimana?, caranya cukup mudah bukan. Demikian ulasan saya tentang Cara Membuat Widget Pricing Plans Untuk Harga Jasa atau Produk, semoga dengan adanya artikel ini dapat membantu untuk anda yang sedang menjual produk atau jasa. Semoga bermanfaat

VIDEO DEMO SLIDE POWERPOINT + FREE DOWNLOAD