Jul 17, 2017

Cara Membuat Halaman Daftar Harga Flat di Blogger

Flat Pricing Responsive

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



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.

Artikel Terkait

Halo Sobat, sedikit cerita mengenai diri saya, saya adalah hanya seorang penulis amatiran yang mencoba berbagi pengetahuan dari apa yang saya dapat sehari-hari. Pengalaman ini saya tuangkan di tulisan dengan tujuan baik agar pengetahuan dan pengalaman saya ini dapat bisa di pergunakan dan bermanfaat khususnya untuk diri saya pribadi dan umumnya untuk orang lain, sehingga saya beri nama Web saya ini dibalikseo.com yang filosofinya adalah dibalik pengetahuan yang saya dapat.