Cara Membuat dan Memasang Widget Penjualan Produk dan Jasa di Blog

Cara Membuat Widget Pricing Plans Untuk Harga Jasa atau Produk

Riffat Digital Services - yang jadi pertanyaannya adalah bagaimana Cara Membuat dan Memasang Widget Penjualan Produk dan Jasa di Blog dan untuk memasang widget yang satu Ini maupun membuat widget ini sangat mudah sekali, yang di mana widget ini berfungsi untuk menampilkan penjualan produk serta jasa yang bisa kalian pasang pada website milik kalian dan tentunya akan semakin memperlihatkan keprofesionalan pada website yang anda miliki, oleh karena itu untuk penggunaan widget ini bisa anda pasang pada berbagai dasar desain website misalkan pada halaman postingan atau pada halaman statis ataupun bisa anda pasang di halaman home page tetapi yang akan saya bahas disini yaitu Bagaimana cara memasang widget penjualan maupun pembelian produk serta jasa pada masing-masing website maupun blog yang anda miliki.

Salah satu keunggulan dari widget ini adalah bisa menampilkan dari berbagai jasa maupun dari berbagai jenis produk serta bisa menampilkan harga serta menampilkan deskripsi dari masing-masing produk maupun jasa yang ingin Anda tawarkan maka dengan adanya widget seperti ini setidaknya pembeli maupun pengunjung yang mengunjungi website Anda bisa melihat dengan jelas tentang apa yang akan Anda tawarkan sehingga pembeli Anda bisa lebih mudah untuk membeli atau menggunakan jasa yang anda miliki.

Untuk pemasangan widget ini sangat cocok sekali sebenarnya disimpan atau ditaruh di halaman depan website Anda atau di halaman home page tetapi Adakalanya ada juga yang memasang kode-kode seperti ini pada bagian postingan ataupun pada bagian halaman tertentu misalnya pada halaman statis.

Berikut langsung saja disimak Bagaimana cara memasang widget yang satu ini di website anda dan widget yang ini cocok untuk semua jenis platform yang ada baik blogger maupun WordPress maupun mesin-mesin yang lainnya.

1. Pada langkah pertama Silakan anda login ke website milik anda kemudian misalkan disini kita menggunakan blogger Silakan masuk pada menu TEMPLATE kemudian pilih EDIT HTML lalu cari kode ]]></b:skin> silakan Anda copy paste kode yang ada di bawah ini dan simpan di atas kode ]]></b:skin> tersebut, lalu jangan lupa save.

/* 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. Kemudian untuk selanjutnya untuk memasang Widgetnya sangat mudah sekali Anda bisa mendapatkannya di berbagai halaman misalkan anda ingin memasangnya di halaman depan atau halaman web atau anda ingin memasangnya di halaman statis atau anda ingin memasangnya di halaman postingan artikel tentu saja bisa anda lakukan tetapi yang perlu anda catat bila anda ingin memasangnya pada halaman postingan blog pastikan anda memilih pada mode HTML bukan mode COMPOSE.

<div class="pricing-section">
<div class="pricing-container">
<div class="pricing-trikpedia-column">
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj17U5juoyh-pfKSjDCpkaO8KUKvCkdlr-HtJtQLo4gw9H-csgIqXzUy2IW66jBKFOsdoR4nYOgijXVwzZMSKhESh8uOML6ngegf3aRfZpEChpz5vBy6oAu0o2FoW2eO3W3g5bP_RXRvos/s50/basic.png' alt='Basic'/>
<div class="pricing-title">Basic</div>
<div class="pricing-tag">20% off</div>
<div class="trikpedia-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="trikpedia-order-btn" href="#" title="#" target="_blank">Order Sekarang</a>
</div>
<div class="pricing-trikpedia-column">
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9Jh34nURhLFAjYEw5bSCwzigVnMrhFHDmIzWA5k-1lr8-EdRud4KHgSnDtcLQ_UrDsBOtdR-QJFvWtu9XuIwHKEFAPdBxf_rpNTQlLRc8XrNufRU84aWbHfSAhq-h_SyFRiVi3e6EhNw/s50/personal.png' alt='Personal'/>
<div class="pricing-title">Personal</div>
<div class="pricing-tag">Best Value</div>
<div class="trikpedia-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="trikpedia-order-btn" href="#" title="#" target="_blank">Order Sekarang</a>
</div>
<div class="pricing-trikpedia-column">
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOldw-mbajGP9NT9OrP8_CbodBA7bahxODmILLWDSkPm5nutDrWhMJmqe3Y5xdj29NEdW0ZhhyphenhyphendKp4koxz45CM42FjfjcrRMMR33BdbwBwywcR6Fzg_q4JYHqla4s4ftfM2xXsk2xXZwQ/s50/developer.png' alt='Developer'/>
<div class="pricing-title">Developer</div>
<div class="pricing-tag">For Business</div>
<div class="trikpedia-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="trikpedia-order-btn" href="#" title="#" target="_blank">Order Sekarang</a>
</div>
</div>
</div>

3. Lalu kemudian untuk mengganti 3 gambar default yang ada di atas anda hanya perlu mengganti url ataupun Link yang yang ada pada kode nomor dua di atas anda bisa perhatikan kembali pada kode tersebut atau misalkan seperti dibawah ini.

Jika anda ingin menggantinya dengan font awesome, silakan Anda ganti 3 url gambar yang di atas misalkan font awesomenya seperti dibawah ini.

Lalu untuk kumpulan gambar icon pada kode font awesome Anda bisa mendapatkannya pada link di bawah ini.

https://www.flaticon.com/packs/ atau http://fontawesome.io/icons/

Selanjutnya Jangan lupa untuk di preview dulu atau pratinjau dulu untuk melihat hasilnya Apakah sudah tampil atau belum, Jika ada hal-hal yang ingin tanyakan jangan sungkan-sungkan untuk bertanya dan kami akan menyempatkan waktu untuk menjawabnya Jika Kami sedang dalam keadaan online Mungkin itu saja dulu.

Sekian apa yang bisa kami sampaikan pada kesempatan kali ini dengan Cara Membuat dan Memasang Widget Penjualan Produk dan Jasa di Blog semoga bermanfaat dan terima kasih atas kunjungannya dan jika anda ingin menyewa jasa artikel jasa backlink maupun jasa SEO ataupun jasa email marketing ataupun anda ingin membeli proxy-proxy premium dari kami Jangan lupa untuk menghubungi kami pada tempat yang sudah disediakan terima kasih.