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

الثلاثاء، 11 أبريل، 2017

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

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




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


معاينة 

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


  • قم أولا بالبحث عن الوسم هذا فى مدونتك]]></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}


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

<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>


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


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

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


شارك الموضوع ليستفيد الجميع

مواضيع مهمه ايضا سوف تعجبك

  • اضافة تعليق
  • 12 تعليق على موضوع : إضافة أله حاسبة لمدونات بلوجر بشكل رائع

    اخي الكود ال المفرود ندور عليه مش موجود يظهر حضرتك نسيت تحطه

    شكرا على التبيه تم وضع الوسم

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

    شكرا لك على الدعم
    ولكن للأسف أنا لست متمكن كثيرا فى صناعة الفديوهات ولا اهتم بها كثيرا

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

    شكرا لك أخى الفاضل على دعمك

    اخى الكريم اكواد css يوجد بها خطأ لان شكل الالة لا يظهر بل يظهر رموز

    ممكن معاينة من مدونتك

    تفضل اخر الكريم رابط مدونتى ولن الغى الاضافة
    http://www.memo-elkhawaga.ga/

    هل أنت متأكد من وضعك لأكواد css

    نعم اخى الكريم وهذا دليل لذلك
    http://store6.up-00.com/2017-07/149936681633311.jpg
    (y)

    حسنا أخى قم بوضع الكود بين الوسمين
    <style>

    <style/>

    فوق وسم </body> وجرب

    يسعدنا تفاعلكم بالتعليق ولكن نرجو منكم أن يكون خاص بالموضوع
    الأبتساماتأخفاء الأبتسامات

    جميع الحقوق محفوظة لـ عالم المدون | قوالب بلوجر,اضافات بلوجر, دروس وشروحات بلوجر