إضافة أداة الة حاسبة لمدونة بلوجر

يا اهلاً بيكم متابعينا من شتى انحاء الدول العربية بتمنى تكونوا باحسن حال النهاردة 😙 جيت ومعايا إضافة مهمة بدرجة كبيرة لمدونات بلوجر وبالأخص المدونات اللى بتشتغل فى مجال الرياضيات لان الإضافة هى عبارة عن الة حاسبة ولكن ده ميمنعش انها مفيدة لكل المدونات حتى اللى مش متخصصة فى مجال الرياضيات و ده لانها تتيح فرصة اكبر للزائر انه يظل فترة طويلة فمثلا لو كنت متجر والزائر قد يحتاج لحساب سعر منتجك  انك كنت تبيعه بعملة مختلفة عن عملته و ببساطة مش هيخرج برا الموقع لانه هيقدر بسهولة يحسب كل الل هو عايزه من غير كلام كتير خلينا نبدأ بشرح الإضافة 😉

المعاينة وشرح التركيب 👇

معاينة

شرح التركيب 

1. إبحث عن الوسم ]]></b:skin>    ثم اضف الكود التالى فوقه

/*====================================== Calculator Mr-net======================================*/
#calculator table{margin:auto;background-color:#2196f3;width:295px;height:325px;text-align:center;border-radius:4px}#calculator{left:58%;top:10%}#calculator input{outline:0;position:relative;left:5px;top:5px;border:0;color:#495069;background-color:#fff;border-radius:4px;width:60px;height:50px;float:left;margin:5px;font-size:20px;box-shadow:0 4px rgba(0,0,0,0.2)}
#calculator input:hover{border:0 solid #000;color:#FFFFFF;background-color:#D35400;border-radius:4px;width:60px;height:50px;float:left;margin:5px;font-size:20px;transition:all 0.3s ease-out;box-shadow:0 0 6px rgba(0,0,0,0.27)}
#calculator input:active{top:4px;border:0 solid #000;color:#495069;background-color:#8F5FD4;border-radius:4px;width:60px;height:50px;float:left;margin:5px;font-size:20px;box-shadow:none}
#calculator #answer{width:270px;font-size:26px;text-align:center;background-color:#F1FAEB;float:left}
#calculator #answer:hover{width:270px;font-size:26px;text-align:center;background-color:#F1FAEB;box-shadow:0 4px rgba(0,0,0,0.2)}
#calculator #answer:active{top:5px;width:270px;font-size:26px;text-align:center;background-color:#F1FAEB;box-shadow:0 4px rgba(0,0,0,0.2)}
#calculator .operator{background-color:#98ec83;position:relative}
#calculator .operator:active{top:4px;box-shadow:none}
#calculator #clear{float:left;position:relative;display:block;background-color:#ff9fa8;margin-bottom:15px}
#calculator #clear:hover{float:left;display:block;background-color:#D35400;margin-bottom:15px}
#calculator #clear:active{float:left;top:4px;display:block;background-color:#F297A0;margin-bottom:15px;box-shadow:none}

بعض التخصيصات الهامة فى الوان الحاسبة

1. اللون #2196f3  هو لون خلفية الألة الحاسبة يمكنك تغييره حسبما تشاء
2. اللون #D35400 هو لون الهوفر او لون الزر عند تمرير مؤشر الفارة 
3. اللون #8F5FD4 هو لون الزر بعد الضغط عليه وتركه ما يعرف بال fade in
4. اللون #98ec83  هو لون ازرار الجمع و الطرح والضرب والقسمة 

اخيراً : نضيف الكود التالى فى اداة html/JavaScript
<div id='calculator'><form name="calc"><table><tbody><tr><td><input type="text" name="input" size="16" id="answer" /><br /></td></tr><tr><td><input type="button" name="one" value=" 1 " onclick="calc.input.value += &#39;1&#39;" /><input type="button" name="two" value=" 2 " onclick="calc.input.value += &#39;2&#39;" /><input type="button" name="three" value=" 3 " onclick="calc.input.value += &#39;3&#39;" /><input type="button" class="operator" name="plus" value=" + " onclick="calc.input.value += &#39;+ &#39;" /><br /><input type="button" name="four" value=" 4 " onclick="calc.input.value += &#39;4&#39;" /><input type="button" name="five" value=" 5 " onclick="calc.input.value += &#39;5&#39;" /><input type="button" name="six" value=" 6 " onclick="calc.input.value += &#39;6&#39;" /><input type="button" class="operator" name="minus" value=" - " onclick="calc.input.value += &#39;- &#39;" /><br /><input type="button" name="seven" value=" 7 " onclick="calc.input.value += &#39;7&#39;" /><input type="button" name="eight" value=" 8 " onclick="calc.input.value += &#39;8&#39;" /><input type="button" name="nine" value=" 9 " onclick="calc.input.value += &#39;9&#39;" /><input type="button" class="operator" name="times" value=" x " onclick="calc.input.value += &#39;* &#39;" /><br /><input type="button" id="clear" name="clear" value=" c " onclick="calc.input.value = &#39;&#39;" /><input type="button" name="zero" value=" 0 " onclick="calc.input.value += &#39;0&#39;" /><input type="button" name="doit" value=" = " onclick="calc.input.value = eval(calc.input.value)" /><input type="button" class="operator" name="div" value=" / " onclick="calc.input.value += &#39;/ &#39;" /><br />
</td></tr></tbody></table></form>
</div>

إلى هنا انتهى موضوعنا اليوم اى إستفسار او مشكلة لا تترد فى طرحها بالتعليقات 😏

<div dir="rtl" style="text-align: right;" trbidi="on"> <div dir="rtl" style="text-align: right;" trbidi="on"> <div dir="rtl" style="text-align: right;" trbidi="on"> يا اهلاً بيكم متابعينا من شتى انحاء الدول العربية بتمنى تكونوا باحسن حال النهاردة 😙 جيت ومعايا إضافة مهمة بدرجة كبيرة لمدونات بلوجر وبالأخص المدونات اللى بتشتغل فى مجال الرياضيات لان الإضافة هى عبارة عن الة حاسبة ولكن ده ميمنعش انها مفيدة لكل المدونات حتى اللى مش متخصصة فى مجال الرياضيات و ده لانها تتيح فرصة اكبر للزائر انه يظل فترة طويلة فمثلا لو كنت متجر والزائر قد يحتاج لحساب سعر منتجك  انك كنت تبيعه بعملة مختلفة عن عملته و ببساطة مش هيخرج برا الموقع لانه هيقدر بسهولة يحسب كل الل هو عايزه من غير كلام كتير خلينا نبدأ بشرح الإضافة 😉<br /> <br /> <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglnu1ZBQSv-rAqcz0KVZIsBshKfrW5_BTKjJpVDpjoyMSaGG3fe-YUcdjytlJdONvaLVjvYWnWH9xakKy3AbaELI_Yx3RnR90Rof7j8cU20Oz1q449k38Q4oXzaU-xuQbdC4FvY4mFVEs/s1600/Calcuolator-Topic-photo-mrnet.png" imageanchor="1"><img border="0" height="366" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglnu1ZBQSv-rAqcz0KVZIsBshKfrW5_BTKjJpVDpjoyMSaGG3fe-YUcdjytlJdONvaLVjvYWnWH9xakKy3AbaELI_Yx3RnR90Rof7j8cU20Oz1q449k38Q4oXzaU-xuQbdC4FvY4mFVEs/s640/Calcuolator-Topic-photo-mrnet.png" width="640" /></a></div> <h3 style="text-align: center;"> <b><a name='more'></a>المعاينة وشرح التركيب 👇</b></h3> <div style="text-align: center;"> <a class="demo" data-MRNdemo=''true" href="https://diwany-netmr.blogspot.com/" target="_blank">معاينة</a><br /> <h3> شرح التركيب </h3> </div> <div> <ol style="text-align: right;"> <li>إبحث عن الوسم <striks>]]></b:skin>   </striks> ثم اضف الكود التالى فوقه</li> </ol> </div> <blockquotc>/*====================================== Calculator Mr-net======================================*/<br /> #calculator table{margin:auto;background-color:<span style="color: red;">#2196f3</span>;width:295px;height:325px;text-align:center;border-radius:4px}#calculator{left:58%;top:10%}#calculator input{outline:0;position:relative;left:5px;top:5px;border:0;color:#495069;background-color:#fff;border-radius:4px;width:60px;height:50px;float:left;margin:5px;font-size:20px;box-shadow:0 4px rgba(0,0,0,0.2)}<br /> #calculator input:hover{border:0 solid #000;color:#FFFFFF;background-color:<span style="color: #b45f06;">#D35400</span>;border-radius:4px;width:60px;height:50px;float:left;margin:5px;font-size:20px;transition:all 0.3s ease-out;box-shadow:0 0 6px rgba(0,0,0,0.27)}<br /> #calculator input:active{top:4px;border:0 solid #000;color:#495069;background-color:<span style="color: #674ea7;">#8F5FD4</span>;border-radius:4px;width:60px;height:50px;float:left;margin:5px;font-size:20px;box-shadow:none}<br /> #calculator #answer{width:270px;font-size:26px;text-align:center;background-color:#F1FAEB;float:left}<br /> #calculator #answer:hover{width:270px;font-size:26px;text-align:center;background-color:#F1FAEB;box-shadow:0 4px rgba(0,0,0,0.2)}<br /> #calculator #answer:active{top:5px;width:270px;font-size:26px;text-align:center;background-color:#F1FAEB;box-shadow:0 4px rgba(0,0,0,0.2)}<br /> #calculator .operator{background-color:<span style="color: lime;">#98ec83</span>;position:relative}<br /> #calculator .operator:active{top:4px;box-shadow:none}<br /> #calculator #clear{float:left;position:relative;display:block;background-color:#ff9fa8;margin-bottom:15px}<br /> #calculator #clear:hover{float:left;display:block;background-color:#D35400;margin-bottom:15px}<br /> #calculator #clear:active{float:left;top:4px;display:block;background-color:#F297A0;margin-bottom:15px;box-shadow:none}</blockquotc><br /> <h4> بعض التخصيصات الهامة فى الوان الحاسبة</h4> <ol style="text-align: right;"> <li>اللون <span style="color: red;">#2196f3  </span>هو لون خلفية الألة الحاسبة يمكنك تغييره حسبما تشاء</li> <li>اللون <span style="color: #b45f06;">#D35400 </span>هو لون الهوفر او لون الزر عند تمرير مؤشر الفارة </li> <li>اللون <span style="color: #674ea7;">#8F5FD4 </span><span style="color: #674ea7;"></span>هو لون الزر بعد الضغط عليه وتركه ما يعرف بال fade in</li> <li>اللون <span style="color: lime;">#98ec83</span><span style="color: #b6d7a8;">  </span>هو لون ازرار الجمع و الطرح والضرب والقسمة </li> </ol> اخيراً : نضيف الكود التالى فى اداة html/JavaScript <br /> <blockquotw><div id='calculator'><form name="calc"><table><tbody><tr><td><input type="text" name="input" size="16" id="answer" /><br /></td></tr><tr><td><input type="button" name="one" value=" 1 " onclick="calc.input.value += &#39;1&#39;" /><input type="button" name="two" value=" 2 " onclick="calc.input.value += &#39;2&#39;" /><input type="button" name="three" value=" 3 " onclick="calc.input.value += &#39;3&#39;" /><input type="button" class="operator" name="plus" value=" + " onclick="calc.input.value += &#39;+ &#39;" /><br /><input type="button" name="four" value=" 4 " onclick="calc.input.value += &#39;4&#39;" /><input type="button" name="five" value=" 5 " onclick="calc.input.value += &#39;5&#39;" /><input type="button" name="six" value=" 6 " onclick="calc.input.value += &#39;6&#39;" /><input type="button" class="operator" name="minus" value=" - " onclick="calc.input.value += &#39;- &#39;" /><br /><input type="button" name="seven" value=" 7 " onclick="calc.input.value += &#39;7&#39;" /><input type="button" name="eight" value=" 8 " onclick="calc.input.value += &#39;8&#39;" /><input type="button" name="nine" value=" 9 " onclick="calc.input.value += &#39;9&#39;" /><input type="button" class="operator" name="times" value=" x " onclick="calc.input.value += &#39;* &#39;" /><br /><input type="button" id="clear" name="clear" value=" c " onclick="calc.input.value = &#39;&#39;" /><input type="button" name="zero" value=" 0 " onclick="calc.input.value += &#39;0&#39;" /><input type="button" name="doit" value=" = " onclick="calc.input.value = eval(calc.input.value)" /><input type="button" class="operator" name="div" value=" / " onclick="calc.input.value += &#39;/ &#39;" /><br /><br /> </td></tr></tbody></table></form><br /> </div><br /> </blockquotw></div> </div> <br /> <h4 style="text-align: center;"> إلى هنا انتهى موضوعنا اليوم اى إستفسار او مشكلة لا تترد فى طرحها بالتعليقات 😏</h4> </div>