Add Calculator to your Blogger/Wordpress (Norman/Scientific)

Posted on January 01, 2015 by 
Add Calculator to your Blogger/Wordpress full functioning
Need a simple Calculator on your little/big eCommerce site. Here I publishing a whole simple calculator for you, what is really full functional for daily accounting works again you may add this just for fun! This calculator is entirely designed with CSS, CSS3 and given life with some script codes. Developed by CSSFlow, And I just made it useable for your Blogger and Wordpress sites. Let’s see how it looks like and how to add it to your blogs, read on-


Normal Cool Calculator


Preview-
Add Calculator to your Blogger/Wordpress full functioning

Live Demo- (Live Demo)

Codes for copy-

<!--crawlist.net calculator starts-->
<div style="height:250px; width:210px; margin:auto; padding:10px 10px; background-color:#f5f5f5;">
<style>/*crawlist.blogspot.com calculator css starts*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {   margin: 0;              }
/*
 * Copyright (c) 2012-2013 Thibaut Courouble
 * http://www.cssflow.com
 *
 * Licensed under the MIT License:
 * http://www.opensource.org/licenses/mit-license.php
 */
input, button {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
::-moz-focus-inner {
  padding: 0;
  border: 0;
}
@font-face {
  font-family: 'Ubuntu Mono', ;
  font-style: normal;
  font-weight:normal;
  @import url(http://fonts.googleapis.com/css?family=Ubuntu+Mono);
}
.ks-calculator {
  padding: 15px;
  width: 177px;
  background: #3d4543;
  border: 1px solid #222;
  border-radius: 4px;
  background-image: -webkit-linear-gradient(top, #3d4543, #2f2a2f);
  background-image: -moz-linear-gradient(top, #3d4543, #2f2a2f);
  background-image: -o-linear-gradient(top, #3d4543, #2f2a2f);
  background-image: linear-gradient(to bottom, #3d4543, #2f2a2f);
  -webkit-box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1), 0 0 4px rgba(0, 0, 0, 0.5);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1), 0 0 4px rgba(0, 0, 0, 0.5);
}
.ks-calculator-display {
  margin: 0 0 20px;
  padding: 3px;
  background: #222;
  border-radius: 3px;
  -webkit-box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.ks-calculator-display-input {
  display: block;
  width: 100%;
  height: 35px;
  padding: 0 8px;
  font: 26px/35px UbuntuMono, monospace;
  color: #444;
  text-align: right;
  background: #bccd95;
  background-clip: padding-box;
  border: 1px solid #222;
  border-radius: 2px;
  background-image: -webkit-linear-gradient(top, #bccd95, #e0f5b1);
  background-image: -moz-linear-gradient(top, #bccd95, #e0f5b1);
  background-image: -o-linear-gradient(top, #bccd95, #e0f5b1);
  background-image: linear-gradient(to bottom, #bccd95, #e0f5b1);
  -webkit-box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.12);
  box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.12);
}
.ks-calculator-row {
  margin-top: 7px;
  zoom: 1;
}
.ks-calculator-row:before, .ks-calculator-row:after {
  content: '';
  display: table;
}
.ks-calculator-row:after {
  clear: both;
}
.ks-calculator-button {
  float: left;
  padding: 0;
  margin: 0 0 0 7px;
  width: 39px;
  font: 14px/23px UbuntuMono, monospace;
  color: white;
  text-align: center;
  text-decoration: none;
  text-shadow: 0 1px rgba(0, 0, 0, 0.4);
  background: #313131;
  background-clip: padding-box !important;
  border: 0;
  border: 1px solid rgba(0, 0, 0, 0.8);
  border-radius: 3px;
  cursor: pointer;
  background-image: -webkit-linear-gradient(top, #313131, #1c1c1c);
  background-image: -moz-linear-gradient(top, #313131, #1c1c1c);
  background-image: -o-linear-gradient(top, #313131, #1c1c1c);
  background-image: linear-gradient(to bottom, #313131, #1c1c1c);
  -webkit-box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 1px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 1px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.ks-calculator-button:first-child {
  margin-left: 0;
}
.ks-calculator-button:active {
  background: #282828;
  -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.6), 0 1px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(255, 255, 255, 0.05);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.6), 0 1px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(255, 255, 255, 0.05);
}
.ks-calculator-button-gray {
  background: #6f6f6f;
  background-image: -webkit-linear-gradient(top, #6f6f6f, #515151);
  background-image: -moz-linear-gradient(top, #6f6f6f, #515151);
  background-image: -o-linear-gradient(top, #6f6f6f, #515151);
  background-image: linear-gradient(to bottom, #6f6f6f, #515151);
}
.ks-calculator-button-gray:active {
  background: #555;
}
.ks-calculator-button-red {
  background: #ff4561;
  background-image: -webkit-linear-gradient(top, #ff7286, #ff4561);
  background-image: -moz-linear-gradient(top, #ff7286, #ff4561);
  background-image: -o-linear-gradient(top, #ff7286, #ff4561);
  background-image: linear-gradient(to bottom, #ff7286, #ff4561);
}
.ks-calculator-button-red:active {
  background: #ff4561;
}
.ks-calculator-button-yellow {
  background: #ffa70c;
  background-image: -webkit-linear-gradient(top, #ffb935, #ffa70c);
  background-image: -moz-linear-gradient(top, #ffb935, #ffa70c);
  background-image: -o-linear-gradient(top, #ffb935, #ffa70c);
  background-image: linear-gradient(to bottom, #ffb935, #ffa70c);
}
.ks-calculator-button-yellow:active {
  background: #ffa70c;
}
.ks-calculator-button-big {
  font-size: 16px;
}
.lt-ie8 .ks-calculator-display-input {
  width: 152px;
}
.lt-ie7 .ks-calculator-row {
  margin-left: -7px;
}/*crawlist.net calculator css ends*/</style>
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html lang="en"> <!--<![endif]-->
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <!--[if lt IE 9]><script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
</head>
<body>
  <form class="ks-calculator">
    <p class="ks-calculator-display">
      <input type="text" name="res" id="res" value="" class="ks-calculator-display-input" onfocus="this.blur()">
    </p>
    <p class="ks-calculator-row">
      <button type="button" class="ks-calculator-button ks-calculator-button-gray" onclick="s('Just....')">mrc</button>
      <button type="button" class="ks-calculator-button ks-calculator-button-gray" onclick="s('....do..')">m-</button>
      <button type="button" class="ks-calculator-button ks-calculator-button-gray" onclick="s('......it')">m+</button>
      <button type="button" class="ks-calculator-button ks-calculator-button-red ks-calculator-button-big" onclick="a('/')">÷</button>
    </p>
    <p class="ks-calculator-row">
      <button type="button" class="ks-calculator-button" onclick="a('7')">7</button>
      <button type="button" class="ks-calculator-button" onclick="a('8')">8</button>
      <button type="button" class="ks-calculator-button" onclick="a('9')">9</button>
      <button type="button" class="ks-calculator-button ks-calculator-button-red ks-calculator-button-big" onclick="a('*')">x</button>
    </p>
    <p class="ks-calculator-row">
      <button type="button" class="ks-calculator-button" onclick="a('4')">4</button>
      <button type="button" class="ks-calculator-button" onclick="a('5')">5</button>
      <button type="button" class="ks-calculator-button" onclick="a('6')">6</button>
      <button type="button" class="ks-calculator-button ks-calculator-button-red ks-calculator-button-big" onclick="a('-')">-</button>
    </p>
    <p class="ks-calculator-row">
      <button type="button" class="ks-calculator-button" onclick="a('1')">1</button>
      <button type="button" class="ks-calculator-button" onclick="a('2')">2</button>
      <button type="button" class="ks-calculator-button" onclick="a('3')">3</button>
      <button type="button" class="ks-calculator-button ks-calculator-button-red ks-calculator-button-big" onclick="a('+')">+</button>
    </p>
    <p class="ks-calculator-row">
      <button type="button" class="ks-calculator-button" onclick="a('0')">0</button>
      <button type="button" class="ks-calculator-button" onclick="a('.')">.</button>
      <button type="button" class="ks-calculator-button" onclick="s('')">C</button>
      <button type="button" class="ks-calculator-button ks-calculator-button-yellow ks-calculator-button-big" onclick="e()">=</button>
    </p>
  </form>
<script>
    function s(v) { document.getElementById('res').value = v }
    function a(v) { document.getElementById('res').value += v }
    function e() { try { s(eval(document.getElementById('res').value)) } catch(e) { s('Error') } }
  </script></body></html></div><!--crawlist.net calculator ends-->

Compact Scientific Calculator

Preview:-
Compact Scientific Calculator
Live Demo:- (Click here)

Codes for copy:

<!--crawlist.net calculator starts--><div id="fw_138353843297908119"><a href="https://www.formloop.com/Calculator-Widget">FormLoop Calculator</a></div>
<script type="text/javascript" src="https://d15pwioa8qyjit.cloudfront.net/js/calc_quick_c.js"></script>
<script type="text/javascript">
var pass_id='138353843297908119';
var height='320';
var width='325';
var lang_code='';
var mobile='';
formloop_cw(pass_id,width,height,lang_code,mobile);
</script><!--crawlist.net calculator ends-->

How to add these widget in Blogger
  • Widget area:- First log in to your Blogger, select your Blog, 
  • Go to 'Layout' tab than click 'add a gadget’
  • Select 'html/javascript' from pop up menu. 
  • Copy following codes and ‘Save gadget’.
  • Or In post:- From post editor's top (Compose/Html) 
  • Select 'Html' and copy and paste following codes.

How to add these widget in Wordpress
  • Widget area:- From dashboard hover mouse on ‘Appearance’ tab, 
  • From ‘Appearance’ menu select 'widgets', 
  • Then drag and drop 'Text' content box in widget area, 
  • Copy following codes and paste into 'text' box, 
  • For new dashboard hover mouse on ‘Appearance’ tab, 
  • From ‘Appearance’ menu click on 'Text' add it to sidebar 
  • And paste following codes and save.
  • Or In post:- From post editor's top (Post/Html) select 'Html' 
  • And copy and paste following codes.

Compatibility
  • These Calculator widget is compatible with most web browser.
  • These Calculator widget is compatible with most themes and templates. Some case if it crashes on your site remove it.
So what you think about this widget don’t forget to mention I would love to hear. New cool widget will be release soon stay connected on Facebook and Feedburner. Chill…