MASIGNCLEAN101

Cara Menciptakan Flat Pricing Table Responsive Dengan Fungsi Popup


Desember 10, 2015
Cara Menciptakan Flat Pricing Table Responsive Dengan Fungsi Popup
Kamis, 10 Desember 2015
Melanjutkan artikel sebelumnya dengan topik pembahasan yang sama yaitu menciptakan Flat Pricing Table Responsive.

Kalau belum baca Artikelnya, kau dapat cari artikelnya memakai form pencarian di bawah logo blog ini ya teman-teman.

Kali ini aku hanya menambahkan CSS Bootstrap dan sebuah fungsi popup memakai JavaScript kedalam widget ini.

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



Pada Versi yang kedua ini, aku menambahkan Fungsi javascript yang bertugas untuk menunjukkan sebuah perintah didalam tombol Pesan Sekarang semoga muncul sebuah jendela gres yang menampilkan sebuah halaman form.

Saya memanfaatkan Google Form untuk menampilkan halaman Popup tersebut, semoga kau lebih gampang ketika merangkai widget ini.

Apa itu Google Form ?

Google Form ialah layanan yang diberikan secara gratis oleh google untuk menciptakan sebuah form, menyerupai form survey, form pendaftaran, form contact person dan masih banyak manfaat lainnya yang dapat kau kreasikan memakai layanan Google Form.

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

D E M O

Sudah lihat Demo Widgetnya diatas? Selanjutnya bagaimana?
Jika kau berminat menambahkan Widget ini ke halaman blog kamu, silahkan ikuti beberapa langkahnya dibawah ini.
  1. Lahngkah pertama, kau harus menciptakan Form di Google Form
  2. Pastikan kau sudah login ke dashboard blog kau yah
  3. Buka hidangan tema kemudian pilih Edit HTML
  4. Salin Kode JavaScript dibawah ini
    5. 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};
  5. Letakkan sempurna dibawah arahan //<![CDATA[
  6. Selanjutnya Kamu salin CSS dibawah ini
    7. *{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}}
  7. Dan letakkan diatas arahan </style>
  8. Selesai & Simpan Tema
PERHATIAN
Perhatikan pada goresan pena yang ditandai pada kolom JavaScript diatas.
  • t=550 ialah ukuran lebar windows Popup
  • n=1000 ialah ukuran tinggi windows Popup

Silahkan kau sesuaikan.

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

Baca juga : Cara Praktis Memasang Widget Skill Bar di Blog


Untuk Menampilkan Widget tersebut, silahkan kau buka halaman yang akan diberikan Widget ini (atau Halaman Baru) kemudian ikuti langkah dibawah ini.
  1. Salin Kode HTML dibawah ini
    2. <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>
  2. Letakkan pada Tab HTML, bukan pada Tab Compose
  3. Simpan dan coba kau pratinjau terlebih dulu
  4. Jika sudah sesuai, silahkan pribadi publikasikan
PERHATIAN
Perhatikan pada goresan pena yang ditandai pada Kolom HTML diatas.
Silahkan kau ganti URL tersebut dengan URL dari Google Form yang sudah dibentuk pada langkah pertama tadi.

Nah.. Sudah Cukup terperinci bukan penjelasannya?

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

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

Semoga bermanfaat.
Share This :

Related Post