Disitu kamu bisa lihat mulai dari isi artikelnya yang bisa terlihat seperti review ataupun mempromosikan suatu produk, atau bisa dilihat juga dari beberapa widget iklan yang tampil didalam blognya seperti iklan dari Adsense ataupun iklan popup yang sering mengganggu pengunjung.
Dan masih banyak lagi jenis-jenis bisnis yang dijalankan oleh sahabat-sahabat blogger setanah air.
Tapi pada artikel kali ini, saya tidak akan membahas jenis-jenis bisnis yang bisa dikerjakan oleh semua sahabat blogger yah.
Tapi saya akan memberikan sebuah trik dalam melakukan promosi menggunakan blog.
Jenis Promosi yang saya maksud disini berupa Halaman Statis yang berisi beberapa Daftar Harga sebuah Jasa yang bisa kamu manfaatkan untuk promo bisnis yang akan kamu tawarkan.
Daftar Harga ini biasanya digunakan oleh beberapa sahabat blogger yang menawarkan jasa seperti Pembuatan Artikel SEO, Design WebBanner, Aplikasi Android dan masih banyak lagi jenis-jenis bisnis jasa yang menggunakan Halaman Price List.
Halaman Flat Price List ini bisa kamu lihat pada tombol demo dibawah ini
D E M O
Tertarik untuk Membuat Halaman Flat Price List di Blog ? Caranya cukup mudah kok, sekarang kamu bisa ikuti langkah-langkahnya dibawah ini.
Baca juga : Cara Membuat Halaman Recent Post By Label
- Pastikan kamu sudah login kedalam dashboard blog.
- Buatlah sebuah halaman baru dengan judul Harga Design atau apapun terserah kamu.
- Pilih tab HTML, jangan pilih tab Compose ya.
- Salin kode HTML dibawah ini dan letakkan pada tab HTML tadi.
<div class="flex-container">
<div class="flex-item">
<ul class="harga">
<li class="harga-judul">Basic</li>
<li class="wira">Rp. 50.000,-</li>
<li>1 Design</li>
<li>1 Konsep</li>
<li>1x Revisi</li>
<li>JPG & PNG</li>
<li class="wira">
<button>Pesan Sekarang</button>
</li>
</ul>
</div>
<div class="flex-item">
<ul class="harga">
<li class="harga-judul highlight">Pro</li>
<li class="wira">Rp. 150.000,-</li>
<li>4 Design</li>
<li>2 Konsep</li>
<li>3x Revisi</li>
<li>JPG, PNG & PDF</li>
<li class="wira">
<button>Pesan Sekarang</button>
</li>
</ul>
</div>
<div class="flex-item">
<ul class="harga">
<li class="harga-judul">Premium</li>
<li class="wira">Rp. 300.000,-</li>
<li>5 Design</li>
<li>3 Konsep</li>
<li>Unlimited Revisi</li>
<li>JPG, PNG, & PDF</li>
<li class="wira">
<button>Pesan Sekarang</button>
</li>
</ul>
</div>
</div>- Selesai dan Publikasikan Halaman.
- Selanjutnya kamu buka menu Tema dan pilih tab Edit HTML.
- Salin CSS dibawah ini dan letakkan sebelum kode ]]></b:skin>.
*{box-sizing:border-box;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;margin:0;padding:0}
.flex-container{display:flex;padding:.5em}
.flex-item{flex:1;margin-right:1em;width:0}
.flex-item:last-child{margin-right:0}
.harga{border:1px solid #eee;list-style-type:none;margin:0;padding:0;transition:0.25s}
.harga:hover{box-shadow:0 8px 12px 0 rgba(0,0,0,0.2);transform:scale(1.025)}
.harga .harga-judul{background-color:#333;color:#fff;font-size:1.5em}
.harga .highlight{background-color:#29b6f6}
.harga li{background-color:#fff;list-style-type:none;border-bottom:1px solid #eee;padding:1.2em;text-align:center}
.harga .wira{background-color:#eee;font-size:1.25em}
button{background-color:#29b6f6;border:none;border-radius:.15em;color:#fff;cursor:pointer;padding:.75em 1.5em;font-size:1em}
@media only screen and (max-width:700px){button{padding:.75em}}
@media only screen and (max-width:600px){.flex-container{flex-wrap:wrap}.flex-item{flex:0 0 100%;margin-bottom:1em;width:100%}.harga:hover{box-shadow:none;transform:none}button{padding:.75em 1.5em}}- Simpan Tema dan lihat hasilnya pada halaman yang sudah kamu buat tadi.
PERHATIAN
Untuk menyesuaikan warna tampilan widget dengan template yang kamu gunakan saat ini, kamu bisa rubah pada bagian CSS diatas.
Saya rasa tidak sulit untuk Membuat Halaman Flat Price List Responsive di Blog seperti yang saya sampaikan pada artikel kali ini.
Tapi jika kamu masih merasa kesulitan dan ada yang mau kamu tanyakan, jangan sungkan untuk bertanya pada kolom komentar dibawah ini.
