Membuat Halaman Flat Pricing Table Responsive Di Blog

Jumat, 20 November 2015

Blogger aktif yang menjalankan bisnis secara online memanglah tidak sedikit, kau dapat lihat dari beberapa blog yang artikelnya selalu update.

Disitu kau dapat lihat mulai dari isi artikelnya yang dapat terlihat ibarat review ataupun mempromosikan suatu produk, atau dapat dilihat juga dari beberapa widget iklan yang tampil didalam blognya ibarat 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, aku tidak akan membahas jenis-jenis bisnis yang dapat dikerjakan oleh semua sahabat blogger yah.

Tapi aku akan mengatakan sebuah trik dalam melaksanakan promosi memakai blog.

Jenis Promosi yang aku maksud disini berupa Halaman Statis yang berisi beberapa Daftar Harga sebuah Jasa yang dapat kau manfaatkan untuk promo bisnis yang akan kau tawarkan.

Daftar Harga ini biasanya dipakai oleh beberapa sahabat blogger yang mengatakan jasa ibarat Pembuatan Artikel SEO, Design WebBanner, Aplikasi Android dan masih banyak lagi jenis-jenis bisnis jasa yang memakai Halaman Price List.

Halaman Flat Price List ini dapat kau lihat pada tombol demo dibawah ini

D E M O

Tertarik untuk Membuat Halaman Flat Price List di Blog ? Caranya cukup gampang kok, kini kau dapat ikuti langkah-langkahnya dibawah ini.

Baca juga : Cara Membuat Halaman Recent Post By Label

• Pastikan kau sudah login kedalam dashboard blog.
• Buatlah sebuah halaman gres dengan judul Harga Design atau apapun terserah kamu.
• Pilih tab HTML, jangan pilih tab Compose ya.
• Salin aba-aba 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 kau buka sajian Tema dan pilih tab Edit HTML.
• Salin CSS dibawah ini dan letakkan sebelum aba-aba ]]></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 alhasil pada halaman yang sudah kau buat tadi.

PERHATIAN

Untuk menyesuaikan warna tampilan widget dengan template yang kau gunakan ketika ini, kau dapat rubah pada bab CSS diatas.

Saya rasa tidak sulit untuk Membuat Halaman Flat Price List Responsive di Blog ibarat yang aku sampaikan pada artikel kali ini.

Tapi bila kau masih merasa kesulitan dan ada yang mau kau tanyakan, jangan sungkan untuk bertanya pada kolom komentar dibawah ini.

Share This :