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 agar warung makannya dapat dikenal melalui Internet dan Medsos ada hal yang membuat saya merasa tertantang yaitu membuat halaman Daftar Harga, jadi pelanggan dapat melihat jenis menu dan harga makanannya.

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

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

Langkah Pertama

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

Langkah Ke Dua

Setelah terbuka lembar kerja halaman baru yang tadi sudah di beri judul di tab HTML silahkan sobat salin kode 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 selesai silahkan SAVE Halaman tersebut dan Publikasikan


Langkah Ke Tiga
Agar tampilannya lebih rapih dan berwarna terkesan Profesional, silahkan sobat salin Kode CSS dibawah ini lalu letakkan sebelum kode ]]></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 kode nya, silahkan sobat sesuaikan dengan yang akan sobat tampilkan dalam Daftar Harga Flat Pricing ini. Silahkan SAVE dan selesai, selamat mencoba semoga bermanfaat.