Cara Membuat Widget Harga Jasa atau Produk Pada Blog | Tips Terbaru

Saat kita menjual barang atau jasa di blog atau websiste pastinya kita harus menggunakan tampilan widget Harga Jasa atau Produk tersebut. Nah di kesempatan kali ini saya akan membuat panduan tersebut kalian juga bisa membuatnya dengan kode yang sudah saya sediakn di bawah.



Dengan adanya Widget Harga Jasa atau Produk ini bertujuan untuk memberitau tentang informasi detail apa yang kita berikan kepada user atau pengujung, saat user membaca pastinya tidak banyak bertanya setelah membaca detail tersebut.

Apa saja yang harus kita persiapkand dalam membuat Widget Harga Jasa atau Produk
  • Masuk ke dasbor blogger - Tema - Edit HTML
  • Copy dan Paste kode dan taruh diatas ]]></b:skin> atau sebelum </style>, kode tersedia di bawah
  • Save template
  • Buka Postingan dan ubah menjadi HTML
  • Copy dan paste kode yang sudah saya sediakan di bawah

Dengan menggunakan widget ini calon pembeli jasa dan produk akan lebih mudah dalam melihat harga dan juga melakukan kontak. 

Panduan cara membuat Widget Harga Jasa atau Produk pada blog atau website
  1. Masuk ke dasbor blogger - Tema - Edit HTML
  2. Copy dan Paste kode dan taruh diatas ]]></b:skin> atau sebelum </style>
    /* Pricing Section by Dunia Blanter (www.gratisan.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.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)}
    .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}
    .pricing-blanter-column ul{list-style:none;padding:10px 0;margin:0;font-size:14px;line-height:2.2}
    .pricing-blanter-column img{width:50px}
    .pricing-section i{font-size:3rem}
    .blanter-price{font-weight:700;font-size:22px}
    .service-info{opacity:.7}
    .blanter-2-column .pricing-blanter-column{width:50%}
    .pricing-blanter-column:nth-child(1) .blanter-price,.pricing-blanter-column:nth-child(1) i{color:#f87200} /* Change Color Code */
    .pricing-blanter-column:nth-child(2) .blanter-price,.pricing-blanter-column:nth-child(2) i{color:#ff5483} /* Change Color Code */
    .pricing-blanter-column:nth-child(3) .blanter-price,.pricing-blanter-column:nth-child(3) i{color:#2b73f6} /* Change Color Code */
    .pricing-blanter-column:nth-child(1):hover{border-color:#f87200} /* Change Color Code */
    .pricing-blanter-column:nth-child(2):hover{border-color:#ff5483} /* Change Color Code */
    .pricing-blanter-column:nth-child(3):hover{border-color:#2b73f6} /* Change Color Code */
    .pricing-blanter-column:nth-child(1) .pricing-tag,.pricing-blanter-column:nth-child(1) a.blanter-order-btn{background:#f87200} /* Change Color Code */
    .pricing-blanter-column:nth-child(2) .pricing-tag,.pricing-blanter-column:nth-child(2) a.blanter-order-btn{background:#ff5483} /* Change Color Code */
    .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){
    .pricing-blanter-column,.blanter-2-column .pricing-blanter-column{width:auto}
    .pricing-container{display:block}
    }
  3. Setelah itu Save
  4. Buka Postingan - Ubah ke HTML
  5. Copy dan paste kode tersebut 
    <div class="pricing-section">
    <div class="pricing-container">
    <div class="pricing-blanter-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="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://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="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://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="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>
  6. lihat hasilnya dan save
  7. Selesai

Gambar pada widget ini dapat diganti menjadi Font Awesome dengan merubah kode berikut :
<img src='https://2.bp.blogspot.com/-HWl2PCk1T_g/XqqDylYxjCI/AAAAAAAAONY/h6Yr9fkzWhQ35ob37L9PnxiX7ExTmns1gCLcBGAsYHQ/s50/basic.png' alt='Basic'/>


menjadi kode Font Awesome :

<i class='fas fa-home'></i> 


Semoga panduan dalam membuat  Widget Harga Jasa atau Produk bisa bermanfaat dan berguna untuk kalian tak lupa semoga juga menjadi tambah ilmu amin, jangan lupa tinggalkan jejak Terima kasih,

Posting Komentar (0)
Lebih baru Lebih lama