Cara Membuat table harga di blogger responsive
Table of Contents
Table Harga Blogger - Cara membuat daftar harga atau table harga di secara responsive dan simple sekali, pada dasarnya table harga di pasang di blogger untuk menjual seuatu produk barang atau menjual template blogger.
Apa Responsive ? - Responsive adalah suatu gambar atau huruf yang akan mengikuti suatu bindang nya seperti pada ukuran template & hosting kalian itu sendiri.
Dan juga kode daftra harga yang kami berikan ke kalian udah sangat aman sekali di tampilan android/mobile dan tentunya sangat responsive sekali loh.
Cara Memasang - Baiklah untuk cara memasang nya kita hanya perlu memasang kodenya di html halaman dan di ]]></b:skin>
Widget daftar harga atau table harga di bisa kalian pasang dimanapun bebas & teserah kalian semua, mau di pasang di artikel blog atau halaman blog semua teserah kalian
Cara pasang table harga
Silahkan login blogger > Tema > Edit Html lalu salin kode css yang saya berikan di bawah ini lalu pasang tepat di atas kode ]]></b:skin> atau di atas kode </style>
.harga-section {font-family:'Google Sans', Arial, sans-serif;position:relative;overflow:hidden;display:block;margin:15px 0;line-height:1.7}
.harga-section .harga-title {font-size:1.1rem;margin:1rem 0 0;font-weight:700}
.harga-container {display:flex;max-width:1000px;margin:0 auto}
.harga-tag {margin:.5rem 0 1rem;font-size:13px;display:inline-block;background:#333;color:#fff;padding:3px 15px;border-radius:20px}
a.ferisp-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.ferisp-order-btn:hover {transform:scale(1.1)}
.harga-ferisp-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}
.harga-ferisp-column ul {list-style:none;padding:10px 0;margin:0;font-size:14px;line-height:2.2}
.harga-ferisp-column img {width:50px}
.harga-section i {font-size:3rem}
.ferisp-price {font-weight:700;font-size:22px}
.service-info {opacity:.7}
.ferisp-2-column .harga-ferisp-column {width:50%}
.harga-ferisp-column:nth-child(1) .ferisp-price,.harga-ferisp-column:nth-child(1) i {color:#0000ff}
.harga-ferisp-column:nth-child(2) .ferisp-price,.harga-ferisp-column:nth-child(2) i {color:#0000ff}
.harga-ferisp-column:nth-child(3) .ferisp-price,.harga-ferisp-column:nth-child(3) i {color:#0000ff}
.harga-ferisp-column:nth-child(1):hover {border-color:#0000ff}
.harga-ferisp-column:nth-child(2):hover {border-color:#0000ff}
.harga-ferisp-column:nth-child(3):hover {border-color:#0000ff}
.harga-ferisp-column:nth-child(1) .harga-tag,.harga-ferisp-column:nth-child(1) a.ferisp-order-btn {background:#0000ff}
.harga-ferisp-column:nth-child(2) .harga-tag,.harga-ferisp-column:nth-child(2) a.ferisp-order-btn {background:#0000ff}
.harga-ferisp-column:nth-child(3) .harga-tag,.harga-ferisp-column:nth-child(3) a.ferisp-order-btn {background:#0000ff}
.harga-ferisp-column:nth-child(4) .harga-tag,.harga-ferisp-column:nth-child(4) a.ferisp-order-btn {background:#0000ff}
@media screen and (max-width:580px) {
.harga-ferisp-column, .ferisp-2-column, .harga-ferisp-column {width:auto}
.harga-container {display:block}
}Note : Selanjutnya kode di bawah ini bebas mau kalian pasang di mana saja bisa di halaman blogger atau di postingan artikel blogger, silahkan di salin
<div class="harga-section">
<div class="harga-container">
<div class="harga-ferisp-column">
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNbjeZMMpe6mddFXCQIuN1W5I0qoi5PdHSJgSuPxKoHcPMlH0dXUHYqPxO0bLUvXeTqJ3Upla-1hn5IauCwfgY-MIbGgjKruVr2V1NX-yMoczKSHKTDqVZI38JdRr49ymxcQk25JDpMqdlIytxI0tjiyJXx8BRDU5-jmiisGY3LTYMRF_UZubfXj-t0A8/s320/whatsapp.png"' alt='Basic'/>
<div class="harga-title">Biasa</div>
<div class="harga-tag">Diskon 10%</div>
<div class="ferisp-price">Rp 180.000</div>
<div class="service-info">
<ul>
<li>1 License</li>
<li>Full Optimization</li>
<li>1 Month Full Support</li>
<li>Easy Customize</li>
<li>-</li>
</ul>
</div>
<a class="ferisp-order-btn" href="#" title="#" target="_blank">Pesan</a>
</div>
<div class="harga-ferisp-column">
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNbjeZMMpe6mddFXCQIuN1W5I0qoi5PdHSJgSuPxKoHcPMlH0dXUHYqPxO0bLUvXeTqJ3Upla-1hn5IauCwfgY-MIbGgjKruVr2V1NX-yMoczKSHKTDqVZI38JdRr49ymxcQk25JDpMqdlIytxI0tjiyJXx8BRDU5-jmiisGY3LTYMRF_UZubfXj-t0A8/s320/whatsapp.png"' alt='Professional'/>
<div class="harga-title">Standar</div>
<div class="harga-tag">Diskon 25%</div>
<div class="ferisp-price">Rp 220.000</div>
<div class="service-info">
<ul>
<li>3 License</li>
<li>Full Optimization</li>
<li>3 Month Full Support</li>
<li>Easy Customize</li>
<li>-</li>
</ul>
</div>
<a class="ferisp-order-btn" href="#" title="#" target="_blank">Pesan</a>
</div>
<div class="harga-ferisp-column">
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNbjeZMMpe6mddFXCQIuN1W5I0qoi5PdHSJgSuPxKoHcPMlH0dXUHYqPxO0bLUvXeTqJ3Upla-1hn5IauCwfgY-MIbGgjKruVr2V1NX-yMoczKSHKTDqVZI38JdRr49ymxcQk25JDpMqdlIytxI0tjiyJXx8BRDU5-jmiisGY3LTYMRF_UZubfXj-t0A8/s320/whatsapp.png"' alt='Developer'/>
<div class="harga-title">Paket Jumbo</div>
<div class="harga-tag">Diskon 50%</div>
<div class="ferisp-price">Rp 999.000</div>
<div class="service-info">
<ul>
<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="ferisp-order-btn" href="#" title="#" target="_blank">Pesan</a>
</div>
</div>
</div>
Nah bagai mana sangat mudah sekali kan cara memasang table harga di blogger kita, kalau kalian tidak paham saya akan membuatkan video tutorial pemasangan nya di bawah silahkan scrol saja.
Post a Comment