Menambahkan Kalkulator Mini ke Blog

Kalkulator adalah alat untuk melakukan operasi hitung. Seperti penambahan, perkurangan, perkalian, pembagian, perpangkatan, dan lain-lain. Operasi hitung yang paling sering digunakan adalah penambahan, perkurangan dan perkalian/pembagian. Nah, keempat operasi hitung itu ada di kalkulator mini ini.

Kalkulator mini ini dibuat menggunakan Javascript, HTML dan CSS. Widget ini kecil, sekitar 150x150 pixel. Bentuknya pun simpel. Untuk memasangnya, anda hanya perlu menambahkan kode dibawah ini ke tempat dimana kalkulator mini ini akan dipasang!

<style type="text/css">

.calcbutton {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
border: 0px;
background: #dedede;
color:#000;
text-align:center;
vertical-align:middle;
font-family:arial;
width:40px;
text-transform:uppercase;
padding: 3px 10px;
}
.calcbutton:hover {
background:#dadada;
}
.inputia {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
outline:none;
border: 1px #ddd solid;
font-size: 18px;
font-family:arial;
margin-left:4.5px;
}
#formcalc {
background:#F2F2F2;
width:180px;
padding:5px;-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.tbgrabthis {
background: #ff0066;padding: 3px 10px;
color:#fff;font-family:arial;
margin-left:50px;margin-top:-15px;
font-size:12px;font-weight:bold;
width:70px;text-align:center;;cursor:pointer;
margin-bottom:15px;
-webkit-border-bottom-right-radius: 15px;
-webkit-border-bottom-left-radius: 15px;
-moz-border-radius-bottomright: 15px;
-moz-border-radius-bottomleft: 15px;
border-bottom-right-radius: 15px;
border-bottom-left-radius: 15px;
}
.tbgrabthis:hover{box-shadow:0px 0px 8px #CCCCCC;}
.tbgrabthis a{text-decoration:none;color:#fff!important;}
.tbgrabthis a:hover{text-decoration:none;color:#fff!important;}

</style>


<FORM NAME="Calc" id="formcalc">
<TABLE BORDER=0>
<TR><TD><INPUT TYPE="text" NAME="Input" Size="15 " class="inputia" readonly="">
<br></TD></TR><TR><TD>
<INPUT TYPE="button" class="calcbutton" NAME="one"   VALUE="  1  " OnClick="Calc.Input.value += '1'">
<INPUT TYPE="button" class="calcbutton" NAME="two"   VALUE="  2  " OnCLick="Calc.Input.value += '2'">
<INPUT TYPE="button" class="calcbutton" NAME="three" VALUE="  3  " OnClick="Calc.Input.value += '3'">
<INPUT TYPE="button" class="calcbutton" NAME="plus"  title="Ditambah" VALUE="  +  " OnClick="Calc.Input.value += ' + '">
<br>
<INPUT TYPE="button" class="calcbutton" NAME="four"  VALUE="  4  " OnClick="Calc.Input.value += '4'">
<INPUT TYPE="button" class="calcbutton" NAME="five"  VALUE="  5  " OnCLick="Calc.Input.value += '5'">
<INPUT TYPE="button" class="calcbutton" NAME="six"   VALUE="  6  " OnClick="Calc.Input.value += '6'">
<INPUT TYPE="button" class="calcbutton" NAME="minus" title="Dikurang" VALUE="  -  " OnClick="Calc.Input.value += ' - '">
<br>
<INPUT TYPE="button" class="calcbutton" NAME="seven" VALUE="  7  " OnClick="Calc.Input.value += '7'">
<INPUT TYPE="button" class="calcbutton" NAME="eight" VALUE="  8  " OnCLick="Calc.Input.value += '8'">
<INPUT TYPE="button" class="calcbutton" NAME="nine"  VALUE="  9  " OnClick="Calc.Input.value += '9'">
<INPUT TYPE="button" class="calcbutton" NAME="times" title="Dikali" VALUE="  x  " OnClick="Calc.Input.value += ' * '">
<br>
<INPUT TYPE="button" NAME="clear" class="calcbutton" VALUE="  c  " title="Hapus penghitungan" OnClick="Calc.Input.value = ''">
<INPUT TYPE="button" NAME="zero"  class="calcbutton" VALUE="  0  " OnClick="Calc.Input.value += '0'">
<INPUT TYPE="button" NAME="DoIt"  class="calcbutton" VALUE="  =  " title="Jumlah penghitungan" OnClick="Calc.Input.value = eval(Calc.Input.value)">
<INPUT TYPE="button" NAME="div"   class="calcbutton" VALUE="  /  " title="Pembagian" OnClick="Calc.Input.value += ' / '">
<br></TD></TR></table>
</form> 
<div class="tbgrabthis"><a href="http://blogger-bite.blogspot.com/">Grab This +</a></div></center>

Terima kasih :)