Cara Membuat Kalkulator Untuk Website Tanpa Programmer. Bagian 1: Pembuat Kalkulator

Daftar Isi:

Cara Membuat Kalkulator Untuk Website Tanpa Programmer. Bagian 1: Pembuat Kalkulator
Cara Membuat Kalkulator Untuk Website Tanpa Programmer. Bagian 1: Pembuat Kalkulator

Video: Cara Membuat Kalkulator Untuk Website Tanpa Programmer. Bagian 1: Pembuat Kalkulator

Video: Cara Membuat Kalkulator Untuk Website Tanpa Programmer. Bagian 1: Pembuat Kalkulator
Video: Cara Membuat Kalkulator Sederhana dengan HTML u0026 CSS 2024, November
Anonim

Biasanya, membuat widget kalkulator untuk situs web memerlukan programmer berbayar dan anggaran dukungan teknis. Namun, baru-baru ini, setidaknya tiga opsi telah muncul tentang cara menghemat waktu dan uang untuk membuat dan memelihara kalkulator: mari kita mulai dengan yang paling sederhana dan paling terjangkau - pembuat kalkulator gratis yang akan membantu Anda merakit kalkulator secara visual - seperti mengisi profil di jejaring sosial.

Contoh kalkulator yang dibuat tanpa pengetahuan tentang teknologi dan mempekerjakan programmer
Contoh kalkulator yang dibuat tanpa pengetahuan tentang teknologi dan mempekerjakan programmer

Itu perlu

Laptop atau komputer, browser apa pun, waktu 10-30 menit, kotak surat atau akun jejaring sosial (Facebook, Vkontakte, Google+, UID), ditambah pemahaman tentang seperti apa seharusnya kalkulator Anda

instruksi

Langkah 1

Untuk mulai merakit dan mengelola kalkulator Anda di masa mendatang, kami mendaftar di layanan uCalc.pro melalui surat atau salah satu jejaring sosial populer.

Setelah pendaftaran, Anda akan menerima email berisi saran tentang desain kalkulator melalui surat
Setelah pendaftaran, Anda akan menerima email berisi saran tentang desain kalkulator melalui surat

Langkah 2

Setelah pendaftaran, Anda akan dibawa ke akun pribadi Anda, tempat kalkulator Anda akan disimpan. Di sini Anda dapat memilih templat yang sudah jadi, atau mulai merakit kalkulator dari awal.

Dengan mengklik ikon
Dengan mengklik ikon

Langkah 3

Setelah memilih template atau rakitan sendiri, editor visual akan terbuka di depan Anda: dengan menyeret item - daftar, penggeser, tanda centang, kotak centang, bidang kontak, atau tombol - dari kolom di sebelah kiri, Anda dapat merakit kalkulator.

Elemen dapat ditempatkan berdampingan (beberapa dalam satu baris) atau di bawah satu sama lain
Elemen dapat ditempatkan berdampingan (beberapa dalam satu baris) atau di bawah satu sama lain

Langkah 4

Arahkan kursor ke elemen apa pun dengan mouse dan Anda akan melihat ikon pengaturan - di dalamnya Anda dapat mengatur ukuran, membuat elemen wajib, mengatur nama bidang untuk daftar dan mengubah tempatnya. Dan dengan mengklik bingkai hijau muda yang muncul di sekitar elemen, Anda dapat mengatur ulang di atas atau di bawah bagian kalkulator lainnya.

Secara opsional, Anda dapat menghapus item apa pun dengan mengkliknya dan menekan
Secara opsional, Anda dapat menghapus item apa pun dengan mengkliknya dan menekan

Langkah 5

Anda dapat mengubah warna dan ukuran label hanya dengan menyorot bagian teks yang diinginkan. Lebih baik menambahkan penjelasan pada teks: jika kita berbicara tentang lebar, tambahkan "meter" atau "mm", tentang harga "rubel", "rubel per meter" dan seterusnya.

Untuk mengubah warna teks, klik pada lingkaran abu-abu dan pilih warna dari palet
Untuk mengubah warna teks, klik pada lingkaran abu-abu dan pilih warna dari palet

Langkah 6

Untuk mengubah warna latar belakang atau mengubah warna penggeser dan tanda centang, gunakan ikon di atas kalkulator. Ikon kiri bertanggung jawab atas warna latar belakang - lebih baik melukisnya dengan warna halaman situs web Anda. Ikon tengah adalah warna elemen: Anda dapat memilih dari 10 skema yang sudah jadi.

Anda juga dapat mengubah gaya font dengan mengklik ikon kanan - saat ini ada 4 opsi yang tersedia
Anda juga dapat mengubah gaya font dengan mengklik ikon kanan - saat ini ada 4 opsi yang tersedia

Langkah 7

Untuk kejelasan, Anda dapat menambahkan gambar ke kalkulator: gambar dapat ditambahkan ke header dan ke salah satu elemen kalkulator. Untuk melakukan ini, pilih ikon "Gambar" dari panel kiri, seret ke lokasi yang diinginkan, dan kemudian, dengan mengklik elemen, unggah gambar dari komputer Anda.

Untuk membuat kalkulator memuat lebih cepat di situs Anda, gunakan gambar dengan sedikit
Untuk membuat kalkulator memuat lebih cepat di situs Anda, gunakan gambar dengan sedikit

Langkah 8

Untuk menentukan kisaran harga layanan dan parameter numerik lainnya, alihkan ke tab "Rumus". Anda akan melihat diagram kalkulator di mana Anda dapat memasukkan nilai yang Anda butuhkan.

Setiap nomor dapat mewakili baik jumlah dan berat atau, misalnya, jarak
Setiap nomor dapat mewakili baik jumlah dan berat atau, misalnya, jarak

Langkah 9

Setiap elemen kalkulator pada diagram diberi huruf. Dengan mengganti huruf di kotak rumus di sebelah kiri dan menambahkan tanda matematika, Anda dapat membuat satu atau lebih rumus: misalnya, jika Anda perlu memberikan harga dengan atau tanpa diskon, buat dua rumus dengan menambahkan perkalian dengan angka kurang dari 1 di detik (misalnya, 0,8 berarti diskon 20% dan seterusnya).

Rumus kedua atau ketiga dapat diatur jika Anda ingin menunjukkan secara terpisah harga bahan dan pekerjaan, dan seterusnya
Rumus kedua atau ketiga dapat diatur jika Anda ingin menunjukkan secara terpisah harga bahan dan pekerjaan, dan seterusnya

Langkah 10

Jika Anda ingin menerima permintaan pelanggan melalui surat atau SMS, kembali ke tab "Desain", klik tombol kalkulator Anda. Anda dapat menentukan dalam pengaturan. Di sana Anda juga akan menemukan pengaturan pembayaran - jika Anda ingin menerima pembayaran di muka melalui Yandex. Checkout.

Di sini Anda juga dapat mengatur tampilan tombol (oval, persegi, dll.) dan warna tambahan tombol saat Anda mengarahkan mouse ke atasnya
Di sini Anda juga dapat mengatur tampilan tombol (oval, persegi, dll.) dan warna tambahan tombol saat Anda mengarahkan mouse ke atasnya

Langkah 11

Untuk mengirim klien hasil perhitungan atau informasi lainnya (kode promo, tautan, pesan "Pesanan diterima"), klik "Beri tahu klien" di pengaturan tombol dan isi templat surat. Untuk mengumpulkan kontak pelanggan, tambahkan elemen "bidang" ke kalkulator dan tentukan "email", "nomor telepon" dan seterusnya dalam pengaturan.

Semua data pribadi klien ditransmisikan melalui SLL - dengan kata lain, tidak ada yang dapat mencegatnya
Semua data pribadi klien ditransmisikan melalui SLL - dengan kata lain, tidak ada yang dapat mencegatnya

Langkah 12

Jadi, kalkulator sudah siap. Untuk meletakkannya di situs, klik tombol "Simpan" di sudut kanan - dan sebuah jendela dengan kode widget yang sudah jadi akan muncul di depan Anda. Salin kode dan tempel ke halaman baru atau yang sudah ada di situs.

Kode kalkulator Anda tidak dapat disalin dari situs Anda dan ditempelkan di situs orang lain
Kode kalkulator Anda tidak dapat disalin dari situs Anda dan ditempelkan di situs orang lain

Langkah 13

Jika Anda tidak yakin dengan kemampuan Anda, gunakan instruksi yang sudah jadi untuk menambahkan kalkulator. Situs web uCalc telah mengilustrasikan tip untuk memasang kalkulator di CMS Wordpress, Joomla, Drupal, NetCat, pembuat situs uKit, uCoz, Tilda dan Wix dan platform terkenal lainnya. Jika Anda tidak menemukan platform Anda dalam daftar, buka deskripsi apa pun dan ikuti analoginya.

Instruksi ada di bagian FAQ
Instruksi ada di bagian FAQ

Langkah 14

Jika Anda memutuskan untuk mengubah apa pun setelah menginstalnya di situs (desain, harga, jumlah elemen, dll.), kalkulator yang Anda buat dapat diedit di konstruktor dan disimpan. Perubahan yang dilakukan akan otomatis ditampilkan di situs.

Direkomendasikan: