আপনার প্রশ্ন উত্তর সাইটটির (যেমন Ask Answers) জন্য সরাসরি তৈরি করা কোনো অফিশিয়াল "Calculator Plugin" পাওয়া যাবে না, কারণ Q2A (Question2Answer) প্ল্যাটফর্মে এই ধরণের উইজেট প্লাগইন আলাদাভাবে কেউ তৈরি করেনি।
তবে এর একটি দারুণ বিকল্প ও প্রফেশনাল সমাধান রয়েছে। আপনি একটি রেডিমেড রেসপনসিভ ক্যালকুলেটর উইজেট কোড আপনার সাইটের সাইডবারে বা কাস্টম উইজেটে বসিয়ে হুবহু এই সুবিধাটি চালু করতে পারেন।
নিচে এর সম্পূর্ণ গাইডলাইন এবং কোড দেওয়া হলো:
️ কিভাবে সাইটে ক্যালকুলেটর যুক্ত করবেন
আপনাকে কোনো প্লাগইন ফাইল ডাউনলোড করতে হবে না। আপনি সরাসরি HTML উইজেট ব্যবহার করে এটি করতে পারবেন:
১. আপনার সাইটের Admin Panel ➡️ Layout অপশনে যান।
২. স্ক্রোল করে নিচের দিকে Add Widget অপশনে যান এবং Custom HTML সিলেক্ট করুন।
৩. উইজেটের পজিশন "Side panel" (সাইডবার) সিলেক্ট করুন।
৪. নিচের বক্সে এই রেডিমেড ক্যালকুলেটরের HTML কোডটি পেস্ট করে দিন:
html
<div class="q2a-calc-widget" style="max-width: 260px; margin: 10px auto; padding: 15px; background: #f4f6f9; border-radius: 10px; box-shadow: 0 4px 8px rgba(0,0,0,0.1); text-align: center; font-family: Arial, sans-serif;">
<h4 style="margin-top:0; color:#333;">ক্যালকুলেটর</h4>
<input type="text" id="calc-display" readonly style="width: 100%; height: 40px; text-align: right; margin-bottom: 10px; padding: 5px; font-size: 18px; border: 1px solid #ccc; border-radius: 5px; background: #fff;">
<div style="display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;">
<button onclick="clearCalc()" style="padding: 10px; background: #e74c3c; color: white; border: none; border-radius: 5px; cursor: pointer; font-weight: bold;">C</button>
<button onclick="pressCalc('/')" style="padding: 10px; background: #3498db; color: white; border: none; border-radius: 5px; cursor: pointer;">/</button>
<button onclick="pressCalc('*')" style="padding: 10px; background: #3498db; color: white; border: none; border-radius: 5px; cursor: pointer;">*</button>
<button onclick="pressCalc('-')" style="padding: 10px; background: #3498db; color: white; border: none; border-radius: 5px; cursor: pointer;">-</button>
<button onclick="pressCalc('7')" style="padding: 10px; background: #fff; border: 1px solid #ddd; border-radius: 5px; cursor: pointer;">7</button>
<button onclick="pressCalc('8')" style="padding: 10px; background: #fff; border: 1px solid #ddd; border-radius: 5px; cursor: pointer;">8</button>
<button onclick="pressCalc('9')" style="padding: 10px; background: #fff; border: 1px solid #ddd; border-radius: 5px; cursor: pointer;">9</button>
<button onclick="pressCalc('+')" style="padding: 10px; background: #3498db; color: white; border: none; border-radius: 5px; grid-row: span 2; height: 100%; cursor: pointer;">+</button>
<button onclick="pressCalc('4')" style="padding: 10px; background: #fff; border: 1px solid #ddd; border-radius: 5px; cursor: pointer;">4</button>
<button onclick="pressCalc('5')" style="padding: 10px; background: #fff; border: 1px solid #ddd; border-radius: 5px; cursor: pointer;">5</button>
<button onclick="pressCalc('6')" style="padding: 10px; background: #fff; border: 1px solid #ddd; border-radius: 5px; cursor: pointer;">6</button>
<button onclick="pressCalc('1')" style="padding: 10px; background: #fff; border: 1px solid #ddd; border-radius: 5px; cursor: pointer;">1</button>
<button onclick="pressCalc('2')" style="padding: 10px; background: #fff; border: 1px solid #ddd; border-radius: 5px; cursor: pointer;">2</button>
<button onclick="pressCalc('3')" style="padding: 10px; background: #fff; border: 1px solid #ddd; border-radius: 5px; cursor: pointer;">3</button>
<button onclick="calculateResult()" style="padding: 10px; background: #2ecc71; color: white; border: none; border-radius: 5px; grid-row: span 2; height: 100%; cursor: pointer; font-weight: bold;">=</button>
<button onclick="pressCalc('0')" style="padding: 10px; background: #fff; border: 1px solid #ddd; border-radius: 5px; grid-column: span 2; cursor: pointer;">0</button>
<button onclick="pressCalc('.')" style="padding: 10px; background: #fff; border: 1px solid #ddd; border-radius: 5px; cursor: pointer;">.</button>
</div>
</div>
<script>
function pressCalc(val) { document.getElementById("calc-display").value += val; }
function clearCalc() { document.getElementById("calc-display").value = ""; }
function calculateResult() {
try { document.getElementById("calc-display").value = eval(document.getElementById("calc-display").value); }
catch(err) { document.getElementById("calc-display").value = "Error"; }
}
</script>
Use code with caution.
৫. কোডটি পেস্ট করার পর Save Options দিয়ে দিন। ব্যস, আপনার প্রশ্ন-উত্তর সাইটের সাইডবারে একটি চমৎকার ও কার্যকর ক্যালকুলেটর চালু হয়ে যাবে।
আপনি কি ওয়ার্ডপ্রেসের জন্য খুঁজছেন?
আপনার সাইটটি যদি Q2A না হয়ে কোনো কারণে WordPress দিয়ে তৈরি হয়ে থাকে, তবে আপনি রেডিমেড প্লাগইন ডাউনলোড করতে পারেন। ওয়ার্ডপ্রেসের জন্য অফিশিয়াল ডিরেক্টরি থেকে একদম ফ্রিতে Calculator Builder প্লাগইনটি ডাউনলোড করে শর্টকোডের মাধ্যমে আপনার পছন্দমতো যেকোনো জায়গায় ক্যালকুলেটর বসিয়ে নিতে পারবেন।