إضافة أله حاسبة لمدونات بلوجر بشكل رائع

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

معاينة الإضافة

معاينة 

شرح التركيب للإضافة

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

table{margin:auto;background-color:#7986CB;width:295px;height:325px;text-align:center;border-radius:4px}
#calculator{position:absolute;max-width:60%;left:58%;top:10%}
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)}
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)}
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}
#answer{width:270px;font-size:26px;text-align:center;background-color:#F1FAEB;float:left}
#answer:hover{width:270px;font-size:26px;text-align:center;background-color:#F1FAEB;box-shadow:0 4px rgba(0,0,0,0.2)}
#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)}
.operator{background-color:#B9E899;position:relative}
.operator:active{top:4px;box-shadow:none}
#clear{float:left;position:relative;display:block;background-color:#ff9fa8;margin-bottom:15px}
#clear:hover{float:left;display:block;background-color:#D35400;margin-bottom:15px}
#clear:active{float:left;top:4px;display:block;background-color:#F297A0;margin-bottom:15px;box-shadow:none}

1. الأن قم بحفظ القالب وأنتقل الى تخطيط مدونتك
2. الأن فى السيدبار قم أداة جديد وضع بها الكود التالى

<form name="calc">
    <table>
        <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>
    </table>
</form>

1. الأن قم بحفظ الإداة ومبروك عليك الأن

وهكذا كان موضوع اليوم بالتوفيق للجميع فى أمان الله 

لا تنس مشاركة الموضوع حتى يتسفيد غيرك وأى مشكلة تجدها تضعها فى تعليق

المصدر عالم المدون