Membuat widget Kalkulator dengan html

Tampilan blog menjadi salah satu faktor penting dalam menarik minat pembaca pembaca. selain itu juga berfungsi untuk meningkatkan seo pada blog kita.

 Pada kesempatan kali ini saya akan berbagi tentang widget kalkulator. walaupun tidak begitu penting untuk ditampilkan di blog. setidaknya akan bermaanfaat bagi yang sedang belajar membuat website atau belajar html.

Umumnya setiap orang yang memiliki komputer sudah dilengkapi dengan program kalkulator bawaan sistem sendiri. namun saya lebih menekankan bagaimana membuat kalkulator dengan kode html bukan bagaimana kelengkapan dari fungsi programnya.

 Tutorial kali ini saya menggunakan blogspot sebagai objek webnya. adapun cara membuatnya sangat mudah. silakan ikuti langkah langkah berikut :

 1. masuk ke akun blog kamu.
 2. pilih tata letak
 3. pilih tambahkan widget. pilih html/javacsript
 4. copy script dibawah ini :

<form name="Kalkulator">
<table align="left" border="1"><tbody>
<tr><td><input name="Input" size="24" type="text" /></td></tr>
<tr><td><b><br />
<input   name="one"    onclick="Kalkulator.Input.value += '1'"   type="button" value="  1  " />
<input   name="two"    onclick="Kalkulator.Input.value += '2'"   type="button" value="  2  " />
<input   name="three" onclick="Kalkulator.Input.value += '3'"   type="button" value="  3  " />
<input   name="plus"    onclick="Kalkulator.Input.value += ' + '"  type="button" value="  + " /><br />
<input   name="four"   onclick="Kalkulator.Input.value += '4'"   type="button" value="  4  " />
<input   name="five"   onclick="Kalkulator.Input.value += '5'"   type="button" value="  5  " />
<input   name="six"     onclick="Kalkulator.Input.value += '6'"  type="button" value="  6  " />
<input   name="minus" onclick="Kalkulator.Input.value += ' - '" type="button" value="  -  " /><br />
<input   name="seven" onclick="Kalkulator.Input.value += '7'"  type="button" value="  7  " />
<input   name="eight"  onclick="Kalkulator.Input.value += '8'"  type="button" value="  8  " />
<input   name="nine"   onclick="Kalkulator.Input.value += '9'"   type="button" value="  9  " />
<input   name="times" onclick="Kalkulator.Input.value += ' * '"  type="button" value="  x " /><br />
<input   name="clear" onclick="Kalkulator.Input.value = ''"       type="button" value="  c  " />
<input   name="zero"  onclick="Kalkulator.Input.value += '0'"   type="button" value="  0  " />
<input   name="DoIt" onclick="Kalkulator.Input.value = eval(Kalkulator.Input.value)" type="button" value="  =  " />
<input   name="div" onclick="Kalkulator.Input.value += ' / '" type="button" value="  /  " /></b></td></tr>
</tbody></table>
</form>

 5. pastekan kode diatas pada kolom konten.
 6. terkhir, klik simpan.

 lalu bagaiman jika hanya ingin menampilkannya di satu postingan saja..? caranya setelah lembar tulis terbuka masuk ke html. kemudian pastekan kode diatas. kemudian lihat hasilnya.

untuk tampilan kamu bisa mengubah dan mengatur kodenya sesuai dengan keinginan.

Related Post