Cara Membuat Halaman Daftar Harga Flat di Blogger

Di Postingan kali ini akan membahas Cara Membuat Halaman Daftar Harga Flat di Blogger atau lebih sering dikenal Halaman Flat Pricing Table. Berawal dari ngebantu membuat Blog Warung makan dari Sobat Blogger yang minta tolong dibuatkan Blog supaya warung makannya dapat dikenal melalui Internet dan Medsos ada hal yang membuat aku merasa tertantang yaitu membuat halaman Daftar Harga, jadi pelanggan dapat melihat jenis menu dan harga makanannya.

Nah di kesmpatan kali ini akan mengembangkan Cara Membuat Halaman Daftar Harga Flat di Blogger, isyarat script ini aku adopsi dari blog nya Kang Wira, terima kasih buat kang wira yang sudah mengizinkan menggunakan isyarat scriptnya.

Bagi sahabat yang mau mencobanya mari kita simak bersama Cara Membuat Halaman Daftar Harga Flat Pricing Table Responsive di Blogger yang sedikit aku modifikasi.  

Langkah Pertama

Silahkan sahabat buat halaman gres lalu di beri judul Daftar Menu dan Harga atau terserah yang penting halaman ini khusus untuk menampilkan Daftar Harga. Pilih tab HTML jangan Compose alasannya ialah kita akan meletakkan Script Kodenya.

Langkah Ke Dua

Setelah terbuka lembar kerja halaman gres yang tadi sudah di beri judul di tab HTML silahkan sahabat salin isyarat HTML dibawah ini lalu letakkan di lembar kerja halaman tersebut.

<div class="flex-container">   <div class="flex-item">     <ul class="harga">       <li class="harga-judul">Paket Makan 1</li>       <li class="wira">Rp. 50.000,-</li>       <li>Nasi Putih</li>       <li>Empal Daging  + Sambal Ijo</li>       <li>Lalapan</li>       <li>Sayur Asem</li>       <li class="wira">         <button>Pesan Sekarang</button>       </li>     </ul>   </div>   <div class="flex-item">     <ul class="harga">       <li class="harga-judul highlight">Paket Makan 2</li>         <li class="wira">Rp. 25.000,-</li>       <li>Nasi Uduk</li>       <li>Telor Balado</li>       <li>Ayam Goreng</li>       <li>Kerupuk Udang</li>       <li class="wira">         <button>Pesan Sekarang</button>       </li>     </ul>   </div>   <div class="flex-item">    <ul class="harga">       <li class="harga-judul">Paket Makan 3</li>       <li class="wira">Rp. 30.000,-</li>       <li>Nasi Putih</li>       <li>Ayam Goreng + Samabal</li>       <li>Tempe Tahu Goreng</li>       <li>Sayur Lodeh</li>       <li class="wira">         <button>Pesan Sekarang</button>       </li>     </ul>   </div> </div>

Setelah tamat silahkan SAVE Halaman tersebut dan Publikasikan


Langkah Ke Tiga
Agar tampilannya lebih rapih dan berwarna terkesan Profesional, silahkan sahabat salin Kode CSS dibawah ini lalu letakkan sebelum isyarat ]]></b:skin> atau </style>.

*{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}}

Result

Perhatikan setiap langkah penerapan isyarat nya, silahkan sahabat sesuaikan dengan yang akan sahabat tampilkan dalam Daftar Harga Flat Pricing ini. Silahkan SAVE dan selesai, selamat mencoba semoga bermanfaat.