Cara Membuat Widget Pricing Plans Untuk Harga Jasa atau Produk

Assalamualaikum warahmatullahi wabarakatuh kembali lagi dengan saya admin Indo blogger kali ini saya akan berbagi tips maupun trik yang mungkin bisa bermanfaat untuk rekan-rekan semuanya dan sahabat-sahabat semuanya yaitu bagaimana cara memasang widget atau membuat widget penjualan baik itu untuk penjualan produk maupun untuk penjualan jasa yang di mana widget ini sangat keren dan sangat simpel serta cukup memikat untuk penjualan.

Tutorial ini kami dapatkan dari situs ID blanter yang dimana di sini kami hanya sekedar untuk melakukan dokumentasi ulang mungkin ada dari sahabat-sahabat semuanya yang kebetulan membutuhkan widget widget seperti ini yang di mana widget ini memiliki fungsi untuk menampilkan ataupun sebagai penjualan jasa atau produk yang bisa anda pasang pada website anda yang dilengkapi dengan deskripsi maupun tombol order dan yang dilengkapi dengan harga.

Dan untuk pemasangan widget dan ini sangatlah mudah sekali dan widget dan penjualan maupun pemasaran produk dan jasa ini sangat cocok sekali dipasang di berbagai media website baik itu blogger, Wordpress, Joomla, Wiki maupun media-media yang lainnya karena widget ini support untuk semua platform.

Cara Memasang Widget Pricing Plans Untuk Penjualan Jasa atau Produk

Langsung saja disimak Bagaimana cara memasangatau Cara Membuat Widget Pricing Plans Untuk Harga Jasa atau Produk, silakan langsung disimak.

1. Yang pertama Silakan masuk ke pengaturan website anda misalkan di sini saya menggunakan blogger masuk ke menu template kemudian silakan ambil yang bagian edit HTML lalu Silakan cari kode ]]></b:skin> kemudian silakan copy-paste kode yang ada di bawah ini:

/* Pricing Section by trikpedia (www.trikpedia.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.trikpedia-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.trikpedia-order-btn:hover{transform:scale(1.1)}

.pricing-trikpedia-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-trikpedia-column ul{list-style:none;padding:10px 0;margin:0;font-size:14px;line-height:2.2}

.pricing-trikpedia-column img{width:50px}

.pricing-section i{font-size:3rem}

.trikpedia-price{font-weight:700;font-size:22px}

.service-info{opacity:.7}

.trikpedia-2-column .pricing-trikpedia-column{width:50%}

.pricing-trikpedia-column:nth-child(1) .trikpedia-price,.pricing-trikpedia-column:nth-child(1) i{color:#f87200} /* Change Color Code */

.pricing-trikpedia-column:nth-child(2) .trikpedia-price,.pricing-trikpedia-column:nth-child(2) i{color:#ff5483} /* Change Color Code */

.pricing-trikpedia-column:nth-child(3) .trikpedia-price,.pricing-trikpedia-column:nth-child(3) i{color:#2b73f6} /* Change Color Code */

.pricing-trikpedia-column:nth-child(1):hover{border-color:#f87200} /* Change Color Code */

.pricing-trikpedia-column:nth-child(2):hover{border-color:#ff5483} /* Change Color Code */

.pricing-trikpedia-column:nth-child(3):hover{border-color:#2b73f6} /* Change Color Code */

.pricing-trikpedia-column:nth-child(1) .pricing-tag,.pricing-trikpedia-column:nth-child(1) a.trikpedia-order-btn{background:#f87200} /* Change Color Code */

.pricing-trikpedia-column:nth-child(2) .pricing-tag,.pricing-trikpedia-column:nth-child(2) a.trikpedia-order-btn{background:#ff5483} /* Change Color Code */

.pricing-trikpedia-column:nth-child(3) .pricing-tag,.pricing-trikpedia-column:nth-child(3) a.trikpedia-order-btn{background:#2b73f6} /* Change Color Code */

@media screen and (max-width:580px){

.pricing-trikpedia-column,.trikpedia-2-column .pricing-trikpedia-column{width:auto}

.pricing-container{display:block}

}

2. Setelah kode pada nomor 1 di atas disimpan selanjutnya Anda bisa menyimpan kode dibawah ini di bagian mana saja baik di halaman statis halaman postingan bahkan anda bisa menyimpannya di template, dan pastikan kode ini disimpan pada menu html (bukan compose) apabila anda mau menyimpannya di halaman posting maupun di halaman statis.

<div class="pricing-title">Basic</div>

<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>

</ul>

</div>

<a class="trikpedia-order-btn" href="#" title="#" target="_blank">Order Sekarang</a>

</div>

<div class="pricing-title">Personal</div>

<div class="pricing-tag">Best Value</div>

<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>

</ul>

</div>

<a class="trikpedia-order-btn" href="#" title="#" target="_blank">Order Sekarang</a>

</div>

<div class="pricing-title">Developer</div>

<div class="pricing-tag">For Business</div>

<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="trikpedia-order-btn" href="#" title="#" target="_blank">Order Sekarang</a>

</div>

3. Pada tahap ketiga untuk mengganti gambar anda hanya perlu mengganti gambar pada bagian ini.

Atau Anda juga bisa menggantinya gambar tersebut dengan font awesome

Kemudian untuk font gambarnya anda bisa mencarinya di situs yang kami sediakan di bawah ini jika anda tidak mau menggunakan gambar yang anda upload di blogger

https://www.flaticon.com/packs/

https://fontawesome.com/icons?from=io

Itu saja dulu apa yang bisa kami sampaikan yang menyangkut dengan Cara Membuat Widget Pricing Plans Untuk Harga Jasa atau Produk semoga bermanfaat dan atas kunjungannya kami ucapkan terima kasih dan selamat siang dan selamat berakhir pekan jika ada pertanyaan jangan sungkan untuk bertanya dan kami akan menjawabnya jika Kami sedang online terima kasih.

Blog MR

Cara Membuat Widget Pricing Plans Untuk Harga Jasa atau Produk

Related Posts