Cara Membuat Tabel Daftar Harga Responsive di Blogger
Hallo sobat, kali ini saya akan membagikan tentang membuat tabel harga di Blogger. Tabel daftar harga yaitu salah satu fitur widget yang sangat penting bagi blogger yang ingin menjual produk atau jasa mereka agar lebih menarik dan informatif.
Dengan menggunakan tabel daftar harga, produk ataupun jasa yang kamu jual akan dikemas dengan rapi dan terstruktur. Sehingga calon pelanggan dapat mudah dan memahami apa yang telah kamu tawarkan.
Membuat tabel daftar harga di Blogger akan memberikan tampilan blog kamu jadi lebih rapi dan tertata. Dengan cara ini, pembaca dapat melihat harga-harga produk atau layanan jasa kamu akan langsung memahami dengan mudah. Sehingga tingkat terjualnya produk ataupun jasa meningkat.
Bayangkan, kamu buka sebuah blog dan menemukan tabel daftar harga yang rapi dan informatif. Pasti langsung terkesan, kan? Nah, dengan menambahkan widget tersebut, blog kamu akan terlihat lebih profesional dan terpercaya. Jadi, buatlah kesan yang baik di mata pengunjung!
Tabel daftar harga juga membantu pengunjung dalam membandingkan produk atau layanan yang kamu tawarkan. Mereka bisa melihat perbedaan harga dan fitur secara lebih terperinci. Dengan begitu, mereka punya lebih banyak informasi untuk memutuskan pilihan.
Contoh demo sebagai berikut.
Bagaimana sobat contoh demo diatas, cukup menarik bukan? Contoh tersebut saya buat untuk penjualan template blogger.
Membuat Tabel Daftar Harga Responsive di Blogger
Masuk di Blogger, pilih pada Tema dan selanjutnya pilih Edit HTML. Tempelkan kode css berikut ini di atas </style> atau ]]></b:skin>..
.daftarharga{max-width:1090px;width:100%;margin:auto;display:flex;justify-content:space-between;flex-wrap:wrap}
.daftarharga .card{background:#fff;width:calc(33% - 20px);text-align:center;padding:15px 30px 30px 30px;box-shadow:0 5px 10px rgba(0,0,0,0.15);border-radius:4px}
.daftarharga .card .top{height:130px;color:#fff;padding:12px 0 0 0;clip-path:polygon(0 0,100% 0,100% 53%,49% 100%,0 53%)}
.daftarharga .card .top .title{font-size:27px;font-weight:600}
.daftarharga .card .top .price-sec{margin-top:-10px;font-weight:600}
.daftarharga .card .top .price{font-size:45px}
.daftarharga .card .info{font-size:16px;margin-top:20px;font-weight:bold}
.daftarharga .card .details .one{margin-top:25px;font-size:15px;display:flex;justify-content:space-between;align-items:left;position:relative}
.daftarharga .card .details .the{margin-top:25px;font-size:15px;display:flex;justify-content:space-between;align-items:left;position:relative;color:#d52c1f}
.daftarharga .card .details .the::before{position:absolute;content:"";width:100%;background:none;height:1px;left:0;top:-12px;border:1px solid #f4f4f4}
.daftarharga .card .details .one::before{position:absolute;content:"";width:100%;background:none;height:1px;left:0;top:-12px;border:1px solid #f4f4f4}
.daftarharga .card button{outline:none;border:none;height:42px;color:#fff;margin-top:30px;border-radius:3px;font-size:18px;width:100%;display:block;transition:all 0.3s ease;cursor:pointer;letter-spacing:1px}
.daftarharga .one .top,.daftarharga .one button{background:#3367d6}
.daftarharga .two .top,.daftarharga .two button{background:#0b8043}
.daftarharga .three .top,.daftarharga .three button{background:#f4a900}
.daftarharga button:hover{filter:brightness(90%)}
.daftarharga .one::selection{background:#3367d6}
.daftarharga .two::selection{background:#0b8043}
.daftarharga .three::selection{background:#f4a900}
@media (max-width:1000px){.daftarharga .card{background:#fff;width:calc(50% - 20px);margin-bottom:30px}}
@media (max-width:715px){.daftarharga .card{width:100%}}
Setelah menempelkan kode css tersebut, silahkan post di halaman atau menambahkan gadget di tata letak dengan menampilkan kode html berikut ini.
<div class="daftarharga">
<!--- Start Kode --->
<div class="card one">
<div class="top">
<div class="title">Trial Version</div>
<div class="price-sec">
<span class="uang">Rp.</span>
<span class="price">0</span>
<span class="decimal">.00</span>
</div>
</div>
<div class="info">Mendapatkan fitur terbatas</div>
<div class="details">
<div class="one">
<span>1 lisensi (untuk 1 blog) </span>
</div>
<div class="one">
<span>Dapat semua template</span>
</div>
<div class="one">
<span>Masa aktif : 30 hari</span>
</div>
<div class="one">
<span>Update : 30 hari</span>
</div>
<div class="the">
<strike>Custom footer credit</strike>
</div>
<div class="the">
<strike>Termasuk plugin AMP</strike>
</div>
<button>PIilih Paket</button>
</div>
</div>
<!--- End Kode --->
<!--- Start Kode --->
<div class="card two">
<div class="top">
<div class="title">Full Version</div>
<div class="price-sec">
<span class="uang">Rp.</span>
<span class="price">240k</span>
<span class="decimal">.00</span>
</div>
</div>
<div class="info">Semua fitur akan Anda dapatkan</div>
<div class="details">
<div class="one">
<span>1 lisensi (untuk 1 blog)</span>
</div>
<div class="one">
<span>Dapat semua template</span>
</div>
<div class="one">
<span>Masa aktif : selamanya</span>
</div>
<div class="one">
<span>Full support</span>
</div>
<div class="one">
<span>Custom footer credit</span>
</div>
<div class="one">
<span>Termasuk plugin AMP</span>
</div>
<button>Pilih Paket</button>
</div>
</div>
<!--- End Kode --->
<!--- Start Kode --->
<div class="card three">
<div class="top">
<div class="title">Spesial Promo</div>
<div class="price-sec">
<span class="uang">Rp.</span>
<span class="price">199k</span>
<span class="decimal">.99</span>
</div>
</div>
<div class="info">Fitur yang Anda dapatkan</div>
<div class="details">
<div class="one">
<span>Harga lisensi lebih murah</span>
</div>
<div class="one">
<span>Minimal order 5 lisensi </span>
</div>
<div class="one">
<span>Template Full Version</span>
</div>
<div class="one">
<span>Cocok yang ingin patungan </span>
</div>
<div class="one">
<span>Cocok untuk jasa pembuatan blog</span>
</div>
<div class="one">
<span>Cocok yang punya banyak blog</span>
</div>
<button>Pilih Paket</button>
</div>
</div>
<!--- End Kode --->
</div>
Nah, widget untuk tabel daftar harga selesai dibuat.
Tabel tersebut saya buat untuk menampilkan daftar harga hanya tiga buah. Untuk menambahkan tabel harga keempat tambahkan css seperti ini.
.daftarharga .four .top,.daftarharga .four button{background:#444}
.daftarharga .four::selection{background:#444}Selanjutnya tambahkan kode html tambahan berikut ini.
<div class="card four">
<div class="top">
<div class="title">Premium</div>
<div class="price-sec">
<span class="uang">Rp.</span>
<span class="price">1jt</span>
<span class="decimal">.00</span>
</div>
</div>
<div class="info">Fitur Premium</div>
<div class="details">
<div class="one">
<span>no lisensi </span>
</div>
<div class="one">
<span>Dapat semua template</span>
</div>
<div class="one">
<span>Masa aktif : selamanya</span>
</div>
<div class="one">
<span>Full support</span>
</div>
<div class="one">
<span>Custom footer credit</span>
</div>
<div class="one">
<span>Termasuk plugin AMP</span>
</div>
<button>Pilih Paket</button>
</div>
</div>
Silahkan edit bagian yang perlu diedit.
Demikian cara membuat tabel harga responsive di Blogger, widget ini dalat mempermudah pengunjung dalam membandingkan produk atau layanan jada yang kamu tawarkan. Mereka dapat memilah harga yang ditawarkan dan membuat lebih menarik dimata pengunjung.
Posting Komentar