Widget Kalkulator Interaktif di Sidebar Blogger

Menghias tampilan sidebar atau widget area dengan berbagai pernak-pernik interaktif merupakan kepuasan tersendiri bagi sebagian blogger. Keberadaan widget yang berguna tidak hanya membuat blog terlihat lebih menarik, tetapi juga memberikan fungsi tambahan bagi para pengunjung. Kayak widget ini cocok buat anak akuntan atau blog jual beli ya?

Pasti banyak pengunjung yang akan membutuhkan alat bantu hitung cepat saat sedang membaca artikel tutorial, analisis finansial, atau sekadar menjelajahi konten blog kita yang berisi jualan.

Memilih jalan pintas dengan memasang script kalkulator dari pihak ketiga menggunakan metode iframe memang terbilang praktis. Namun, terdapat kelemahan besar dari penggunaan iframe luar, yaitu beban muat (loading) halaman blog menjadi jauh lebih lambat karena harus memanggil source code eksternal. Selain itu, tampilan widget dari luar sering kali tidak cocok dengan tema warna atau desain dasar template blog yang digunakan.

Solusi paling efisien untuk mengatasi masalah ini adalah membangun widget kalkulator sendiri secara mandiri menggunakan widget kalkulator dengan kombinasi HTML, CSS, dan JavaScript murni. Dengan metode ini, seluruh kode berjalan langsung di browser pengunjung tanpa membebani kinerja server blog Anda.

Berikut Demo Kalkulatornya:


Menarik gak? Yuk kita buat widgetnya.

1. Setelah login, klik edit template. Cari kode: ]]></b:skin> atau </style>
2. Lalu letakkan Kode CSS berikut diatasnya:

   #calculator * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
     font: bold 14px Arial, sans-serif;
   }
   
   #calculator {
     width: 325px;
     margin: 20px auto;
     padding: 20px;
     background: #9dd2ea;
     background: linear-gradient(#9dd2ea, #8bceec);
     border-radius: 5px;
     box-shadow: 0px 4px #009de4, 0px 10px 15px rgba(0, 0, 0, 0.2);
   }
   
   .top {
     display: flex;
     justify-content: space-between;
     gap: 10px;
     margin-bottom: 15px;
   }
   
   .top span.clear {
     width: 66px;
     height: 40px;
     background: #ff9fa8;
     box-shadow: 0px 4px #ff7c87;
     color: white;
     border-radius: 3px;
     cursor: pointer;
     user-select: none;
     transition: all 0.2s ease;
     display: flex !important;
     align-items: center !important;
     justify-content: center !important;
     line-height: normal !important;
   }
   
   .top .screen {
     flex: 1;
     height: 40px;
     padding: 0 10px;
     background: rgba(0, 0, 0, 0.2);
     border-radius: 3px;
     box-shadow: inset 0px 4px rgba(0, 0, 0, 0.2);
     font-size: 17px;
     color: white;
     text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
     letter-spacing: 1px;
     overflow: hidden;
     display: flex !important;
     align-items: center !important;
     justify-content: flex-end !important;
     line-height: normal !important;
   }
   
   .keys {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     gap: 10px;
   }
   
   .keys span {
     position: relative;
     top: 0;
     height: 38px;
     background: white;
     border-radius: 3px;
     box-shadow: 0px 4px rgba(0, 0, 0, 0.2);
     color: #888;
     cursor: pointer;
     user-select: none;
     transition: all 0.2s ease;
     display: flex !important;
     align-items: center !important;
     justify-content: center !important;
     line-height: normal !important;
     padding: 0 !important;
   }
   
   .keys span.operator {
     background: #FFF0F5;
   }
   
   .keys span.eval {
     background: #f1ff92;
     box-shadow: 0px 4px #9da853;
     color: #888e5f;
   }
   
   .keys span:hover {
     background: #9c89f6;
     box-shadow: 0px 4px #6b54d3;
     color: white;
   }
   
   .keys span.eval:hover {
     background: #abb850;
     box-shadow: 0px 4px #717a33;
     color: #ffffff;
   }
   
   .top span.clear:hover {
     background: #f68991;
     box-shadow: 0px 4px #d3545d;
     color: white;
   }
   
   .keys span:active {
     box-shadow: 0px 0px #6b54d3;
     top: 4px;
   }
   
   .keys span.eval:active {
     box-shadow: 0px 0px #717a33;
     top: 4px;
   }
   
   .top span.clear:active {
     top: 4px;
     box-shadow: 0px 0px #d3545d;
   }
   

3. Klik tombol Save.
4. Lanjut ke langkah selanjutnya, yakni memasukkan kode javacsript.
5. Cari kode: <body>
6. Masukkan kode javascript berikut diatasnya:

   document.addEventListener("DOMContentLoaded", function () {
     const keys = document.querySelectorAll("#calculator .keys span");
     const operators = ["+", "-", "÷", "x"];
     const screen = document.querySelector("#calculator .screen");
     const clearBtn = document.querySelector("#calculator .clear");
     let decimalAdded = false;
   
     keys.forEach(function (key) {
       key.addEventListener("click", function () {
         let btnVal = this.innerText;
         let input = screen.innerHTML;
   
         if (btnVal === "=") {
           let equation = input;
           let lastChar = equation[equation.length - 1];
   
           equation = equation.replace(/x/g, "*").replace(/÷/g, "/");
   
           if (operators.includes(lastChar) || lastChar === ".") {
             equation = equation.slice(0, -1);
           }
   
           if (equation) {
             try {
               let result = Function('"use strict";return (' + equation + ')')();
               screen.innerHTML = Number.isInteger(result) ? result : parseFloat(result.toFixed(8));
             } catch (e) {
               screen.innerHTML = "Error";
             }
           }
           decimalAdded = false;
         } 
         else if (operators.includes(btnVal)) {
           let lastChar = input[input.length - 1];
   
           if (input !== "" && !operators.includes(lastChar)) {
             screen.innerHTML += btnVal;
           } else if (input === "" && btnVal === "-") {
             screen.innerHTML += btnVal;
           }
   
           if (operators.includes(lastChar) && input.length > 1) {
             screen.innerHTML = input.replace(/.$/, btnVal);
           }
   
           decimalAdded = false;
         } 
         else if (btnVal === ".") {
           if (!decimalAdded) {
             screen.innerHTML += btnVal;
             decimalAdded = true;
           }
         } 
         else {
           screen.innerHTML += btnVal;
         }
       });
     });
   
     clearBtn.addEventListener("click", function () {
       screen.innerHTML = "";
       decimalAdded = false;
     });
   });
   

7. Klik tombol Save.
8. Lanjut ke langkah berikutnya, yakni Tata Letak, tambahkan Gadget / Add Widget di sidebar yang Anda inginkan untuk meletakkan kalkulator ini.
9. Pilih HTML/Javascript
10. Masukkan kode HTML dibawah ini:

    <div id="calculator">
      <div class="top">
        <span class="clear">C</span>
        <div class="screen"></div>
      </div>
    
      <div class="keys">
        <span>7</span>
        <span>8</span>
        <span>9</span>
        <span class="operator">+</span>
        <span>4</span>
        <span>5</span>
        <span>6</span>
        <span class="operator">-</span>
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span class="operator">÷</span>
        <span>0</span>
        <span>.</span>
        <span class="eval">=</span>
        <span class="operator">x</span>
      </div>
    </div>
    

11. Selanjutnya Simpan, dan lihatlah hasilnya.

Kalkulator sederhana Anda sudah siap digunakan di blog. Selamat mencoba dan semoga bermanfaat.