Cara Membuat Flat Pricing Table Responsive Dengan Fungsi Popup

Melanjutkan artikel sebelumnya dengan topik pembahasan yang sama yaitu membuat Flat Pricing Table Responsive.

Kalau belum baca Artikelnya, kamu bisa cari artikelnya menggunakan form pencarian di bawah logo blog ini ya teman-teman.

Kali ini saya hanya menambahkan CSS Bootstrap dan sebuah fungsi popup menggunakan JavaScript kedalam widget ini.

Pada dasarnya, kode HTML dan CSS yang ada pada widget ini sebenarnya sama dengan Kode Flat Pricing Table pada artikel sebelumnya.

Cara Membuat Flat Pricing Table Responsive Dengan Fungsi Popup

Pada Versi yang kedua ini, saya menambahkan Fungsi javascript yang bertugas untuk memberikan sebuah perintah didalam tombol Pesan Sekarang agar muncul sebuah jendela baru yang menampilkan sebuah halaman form.

Saya memanfaatkan Google Form untuk menampilkan halaman Popup tersebut, agar kamu lebih mudah saat merangkai widget ini.

Apa itu Google Form ?

Google Form adalah layanan yang diberikan secara gratis oleh google untuk membuat sebuah form, seperti form survey, form pendaftaran, form contact person dan masih banyak manfaat lainnya yang bisa kamu kreasikan menggunakan layanan Google Form.

Untuk melihat Demo tampilan dan fungsi popup dari Widget ini, kamu bisa klik tombol demo dibawah ini.

D E M O

Sudah lihat Demo Widgetnya diatas? Selanjutnya bagaimana?
Jika kamu berminat menambahkan Widget ini ke halaman blog kamu, silahkan ikuti beberapa langkahnya dibawah ini.

Lahngkah pertama, kamu harus membuat Form di Google Form
Pastikan kamu sudah login ke dashboard blog kamu yah
Buka menu tema lalu pilih Edit HTML
Salin Kode JavaScript dibawah ini

function showhidechat(){var o=document.getElementById("chat");"0px"!==o.style.bottom?o.style.bottom="0px":o.style.bottom="-125px"}function popup(o){var t=550,n=1000,e=(screen.width-t)/2,i=(screen.height-n)/2,s="width="+t+", height="+n;return s+=", top="+i+", left="+e,s+=", directories=no",s+=", location=no",s+=", menubar=no",s+=", resizable=no",s+=", scrollbars=no",s+=", status=no",s+=", toolbar=no",newwin=window.open(o,"windowname5",s),window.focus&&newwin.focus(),!1};

Letakkan tepat dibawah kode //<![CDATA[
Selanjutnya Kamu salin CSS dibawah ini

*{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:#d9534f;color:#fff;font-size:1.5em}
.harga .highlight{background-color:#d9534f}
.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:#d9534f;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}}

Dan letakkan diatas kode </style>
Selesai & Simpan Tema

PERHATIAN

Perhatikan pada tulisan yang ditandai pada kolom JavaScript diatas.

t=550 adalah ukuran lebar windows Popup
n=1000 adalah ukuran tinggi windows Popup

Silahkan kamu sesuaikan.

Untuk menyesuaikan warna tampilan widget dengan template yang kamu gunakan saat ini, kamu bisa rubah pada bagian CSS diatas.

Untuk Menampilkan Widget tersebut, silahkan kamu buka halaman yang akan diberikan Widget ini (atau Halaman Baru) lalu ikuti langkah dibawah ini.

Salin Kode HTML dibawah ini

<div class="flex-container">
  <div class="flex-item">
    <ul class="harga">
      <li class="harga-judul">Design Basic</li>
      <li class="wira"><div class="alert alert-danger" role="alert">Rp. 50.000,-</div></li>
      <li>1 Design</li>
      <li>1 Konsep</li>
      <li>1x Revisi</li>
      <li>JPG & PNG</li>
      <li class="wira">
        <button href='javascript: void(0)' onclick='popup(&apos;https://docs.google.com/forms/d/e/1FAIpQLSdr86PLtvLT-2iDlE-4b8kzIB1ZQtbenwSQeCHUG0c0NRYq8g/viewform?usp=sf_link&apos;);showhidechat()' title='Chat on Messenger'> Pesan Sekarang</button>
      </li>
    </ul>
  </div>
  <div class="flex-item">
    <ul class="harga">
      <li class="harga-judul highlight">Design Pro</li>  
         <li class="wira"><div class="alert alert-danger" role="alert">Rp. 150.000,-</div></li>
      <li>4 Design</li>
      <li>2 Konsep</li>
      <li>3x Revisi</li>
      <li>JPG, PNG & PDF</li>
      <li class="wira">
        <button href='javascript: void(0)' onclick='popup(&apos;https://docs.google.com/forms/d/e/1FAIpQLSdr86PLtvLT-2iDlE-4b8kzIB1ZQtbenwSQeCHUG0c0NRYq8g/viewform?usp=sf_link&apos;);showhidechat()' title='Chat on Messenger'> Pesan Sekarang</button>
      </li>
    </ul>
  </div>
  <div class="flex-item">
   <ul class="harga">
      <li class="harga-judul">Design Premium</li>
        <li class="wira"><div class="alert alert-danger" role="alert">Rp. 300.000,-</div></li>
      <li>5 Design</li>
      <li>3 Konsep</li>
      <li>Unlimited Revisi</li>
      <li>JPG, PNG, & PDF</li>
      <li class="wira">
        <button href='javascript: void(0)' onclick='popup(&apos;https://docs.google.com/forms/d/e/1FAIpQLSdr86PLtvLT-2iDlE-4b8kzIB1ZQtbenwSQeCHUG0c0NRYq8g/viewform?usp=sf_link&apos;);showhidechat()' title='Chat on Messenger'> Pesan Sekarang</button>
      </li>
    </ul>
  </div>
</div>

Letakkan pada Tab HTML, bukan pada Tab Compose

Simpan dan coba kamu pratinjau terlebih dulu
Jika sudah sesuai, silahkan langsung publikasikan

PERHATIAN

Perhatikan pada tulisan yang ditandai pada Kolom HTML diatas.
Silahkan kamu ganti URL tersebut dengan URL dari Google Form yang sudah dibuat pada langkah pertama tadi.

Nah.. Sudah Cukup jelas bukan penjelasannya?

Jika masih kurang jelas, jangan sungkan untuk bertanya melalui 3 System Tab Komentar dibawah artikel ini.

Sekian dulu tutorial singkat tentang Cara Membuat Flat Pricing Table Responsive dengan Fungsi Popup yang saya share kali ini.

Semoga bermanfaat.