‏إظهار الرسائل ذات التسميات إضافات البلوجر. إظهار كافة الرسائل

الزيارات:

كود فانوس رمضان بصيغة Gif

Unknown إضافات البلوجر لا يــوجد تعـــليقات

السلام عليكم ورحمة الله وبركاتة

بمناسبة شهر رمضان الكريم جئتكم بكود فانوس رمضان المتحرك (Gif)
هذا الكود جميل ومتحرك بطريقة Gif ويعطي رونقا خاصا للمدونة، وذلك لتهنئة زوار مدونتك بقدوم شهر رمضان الكريم بشكل احترافي.

طريقة تركيب الإضافة :

1- لوحة تحكم.

2- القالب.

3- بحت عن كود :

<body>

4- ضع الكود التالي قبله او بعده :

body:before {
    content: &#39;&#39;;
    width: 200px;
    height: 195px;
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisw4wR9xAim_OoJWjgdFGDGKXQ9Hqbwd_6R39DfTqTMTCpBjbNf0fzsbkzdJcw-LZXOBj0OrCQlcx9lrPOlxVFljhPQtQUbDIXIVcYdzUs-sYoxR2wL2-4vejsdjxNr3lUmTXynjq2OsE/s1600/Ramdan.gif) top left no-repeat;
    position: absolute;
    left: -10px;
    top: -15px;
    z-index: 5;
}

body:after {
    content: &#39;&#39;;
    width: 164px;
    height: 240px;
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfEoNshsTPFGxKaML0X9076-ITgu0q4yK74orUT8TGNtMSVdxLTycYOym1YcmNW-2mGJUgIdxe6zl4TddAnSYg6pZXYtrK1R2b0yYUCRLDFfERwohUbbrjxykPsaFoGml2vpmOBV0SgNU/s1600/2e.png) top left no-repeat;
    position: absolute;
    left: -2px;
    top: -2px;
    z-index: 4;
}
</style>

5- قم بحفظ النموذج

اتمنى ان تنال اعجابكم ورمضان مبارك كريم

اقرء المزيد

الزيارات:

كود ذكر المصدر عند النسخ

Unknown إضافات البلوجر لا يــوجد تعـــليقات

السلام عليكم ورحمة الله وبركاته

أهلاً ومرحباً بزوار ومتتبعي شبكة عدناني

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

طريقة التركيب

1- إذهب إلي تحرير قالبHTML

2- ضع علامه في خانة توسيع القالب

3- إحفظ نسخه إحتياطيه من القالب "كالعاده"

4- إبحث عن الكودالتالي :

</head>

5- ضع الكود فوقه مباشرة

<!-- كود ذكر المصدر --> 
<script type='text/javascript'>
        if(document.location.protocol==&#39;http:&#39;){
         var Tynt=Tynt||[];Tynt.push(&#39;d-PytMlMWr4j7madbi-bnq&#39;);Tynt.i={&quot;ap&quot;:&quot;المصدر| شبكة عدناني&quot;};
         (function(){var s=document.createElement(&#39;script&#39;);s.async=&quot;async&quot;;s.type=&quot;text/javascript&quot;;s.src=&#39;http://tcr.tynt.com/ti.js&#39;;var h=document.getElementsByTagName(&#39;script&#39;)[0];h.parentNode.insertBefore(s,h);})();
        }
//for more visit www.3adnani.com
</script>
<!-- كود ذكر المصدر -->

6- إحفظ القالب وعاين الإضافه بنفسك

اقرء المزيد

الزيارات:

كود مشغل Mp3 للبلوجر

Unknown إضافات البلوجر لا يــوجد تعـــليقات

السلام عليكم ورحمة الله تعالى وبركاته

اليوم سنتطرق في هدا الدرس الجديد الى كيفية إدماج مشغلات Mp3 بدون فلاش او ريال بلايير....

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

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

1- المشاركة

2- تبويب HTML

3- تركيب الكود في المشاركة

4- نشر



<audio src="song.mp3" controls="controls">

Your browser does not support the audio element.

</audio>

song.mp3 : غيره برابط ملف mp3 مباشر

معاينة
بعض سور القران واناشيد اتمنى ان تنال إعجابكم

اقرء المزيد

الزيارات:

كود تاثير اللمعان على شعار المدونة

Unknown إضافات البلوجر لا يــوجد تعـــليقات

بسم الله الرحمان الرحيم

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

طريقة التركيب
للمعاينة هذه الإضافة تختلف لقالب لآخر، في البداية ستذهب إلى
1- قالب المدونة قم بحفظ نسخة احتياطية لقالبك
2- ابحث باستخدام ctrl+f عن هذا الكود

</body>

3- ثم تضيف قبله مباشرة هذا الكود


<!-- Start logo effect -->

<script src='https://trollvlhcv.googlecode.com/svn/trunk/fortroll/jquery-1.7.min.js' type='text/javascript'/>

<script src='https://trollvlhcv.googlecode.com/svn/trunk/fortroll/trolllg.js' type='text/javascript'/>

<!-- initialize the plugin -->

<script>

jQuery(document).ready(function () {

$(".peShiner").peShiner();

})

</script>

<!-- End logo effect-->

4- ثم بعدها إبحث عن الكود التالي

كل مدونة لها كود خاص بالصورة المهم انا لدي header-inner كل ماعليك البحت عن رابط شعارك بالقالب
ستجده على الشكل التالي

ستغير الكود الذي تم تحديده في الصورة بالكود التالي الذي تراه مناسب لمدونتك

التأثير الناري


<div class='peShiner'>

<a expr:href='data:blog.homepageUrl' style='display: block'>

<img data-color='fireHL' data-duration='3' expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + "_headerimg"' expr:src='data:sourceUrl' expr:width='data:width' style='display: block'/>

</a>

</div>

اللون السمائي


<div class='peShiner'>

<a expr:href='data:blog.homepageUrl' style='display: block'>

<img data-color='oceanHL' data-duration='3' expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + "_headerimg"' expr:src='data:sourceUrl' expr:width='data:width' style='display: block'/>

</a>

</div>

اللون الأسود


<div class='peShiner'>

<a expr:href='data:blog.homepageUrl' style='display: block'>

<img data-color='black' data-duration='3' expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + "_headerimg"' expr:src='data:sourceUrl' expr:width='data:width' style='display: block'/>

</a>

</div>

الان اضغط على حفظ وشاهد مدونتك

اقرء المزيد

الزيارات:

كود أداة "جدول المباريات العالمية"

Unknown إضافات البلوجر 17 تعــــليق

السلام عليكم ورحمة الله تعالى وبركاته

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

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

طريقة تركيب الاداة
1- لوحة التحكم بلوجر.
2- تخطيط.
3- إضافة أداة HTML/JavaScript .
4- ضع هذا الكود في الحقل:

<div class='widget-content'>
<iframe width="296" height="470" src="http://www.hibasport.com/livematch.php" frameborder="0" allowfullscreen=""></iframe>
</div>
<div class='clear'>
</div>

5- ثم قم بحفظ الأداة

أتمنى أن أكون قد أفدتكم لا تنسو دعمنا بتعليق والدعاء لوالدي بالمغفرة ولجميع المسلمين

دمتم في رعاية الله.

اقرء المزيد

الزيارات:

كود إضافة خاصية التلميح أو Tooltip

Unknown إضافات البلوجر 2 تعــــليق

السلام عليكم ورحمة الله تعالى وبركاته

اليوم اقدم لكم طريقة اضافة خاصية التلميح او tooltip لمدونة بلوجر وهي تساعد علي معرفة عناوين الصفجات والأقسام والصور والكتير حيت تلمح للزائر عند وضعه الماوس عنوان الصفحة او عنوان الاٌسام
وتتميز هاته الاضافة بخاصيات:before وafter ويمكنك تعديلها افقيا، عموديا، يمينا، يسارا.
نبقى مع طريقة التركيب

طريقة التركيب الإضافة
1- لوحة التحكم بلوجر.
2- قالب.
3- تحرير HTML .
4- نبحث عن الكود: ]]></b:skin>
5- ضع بعده التالي:

<style type='text/css'>
/* tooltip------------------------------------- */
[data-tooltip]:before {
    position: absolute;
    top: 145%;
    left: 125%;
    margin-bottom: 5px;
    margin-left: -90px;
    padding: 5px 0px 5px 0px;
    width: 80px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    background-color: #000;
    background-color: #b44;
    color: #fff;
    content: attr(data-tooltip);
    text-align: center;
    font-size: 12px;
    line-height: 1.2;
}
[data-tooltip]:after {
  position: absolute;
  top: 126%;
  left: 50%;
  margin-left: -5px;
  width: 0;
  border-bottom: 5px solid #000;
  border-bottom: 5px solid #b44;
  border-right: 5px solid transparent;
  border-left: 5px solid transparent;
  content: &quot; &quot;;
  font-size: 0;
  line-height: 0;
}
[data-tooltip] {
  position: relative;
  z-index: 2;
  cursor: pointer;
}

[data-tooltip]:before,
[data-tooltip]:after {
  visibility: hidden;
  -ms-filter: &quot;progid:DXImageTransform.Microsoft.Alpha(Opacity=0)&quot;;
  filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
  pointer-events: none;
}
[data-tooltip]:hover:before,
[data-tooltip]:hover:after {
  visibility: visible;
  -ms-filter: &quot;progid:DXImageTransform.Microsoft.Alpha(Opacity=100)&quot;;
  filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
}
/* tooltip------------------------------------- */
</style>

اضافة وسم data-tooltip في اي رابط او صورة او زر وهو عنوان اللإضافة.
متلا

اتمنى انت تنال اعجابكم ولا تنسونا بصالح الدعاء لي و لوالدي واخواني وجميع المسلمسن

اقرء المزيد

الزيارات:

كود تغيير شريط scroll bar

Unknown إضافات البلوجر لا يــوجد تعـــليقات

السلام عليكم ورحمة الله تعالى وبركاته

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

طريقة تركيب الإضافة
1- لوحة التحكم بلوجر.
2- قالب.
3- تحرير HTML .
4- نبحث عن الكود:

<style>
 /* css from:http://3adnani.com// */
::-webkit-scrollbar-thumb:horizontal{
height:10px;
background-color:#CCC;
}
::-webkit-scrollbar-thumb:vertical{
width:8px;
background-color:#B44;
box-shadow:1px 1px 4px rgba(0,0,0,0.16);
}
::-webkit-scrollbar{
width:8px;
height:5px;
background:#CCC;
box-shadow:inset 1px 1px 4px rgba(0,0,0,0.13);
}
</style>

ادا اردت تغيير شريط اللون الرمادي بلون اخر غير فقط رمز اللون بالازرق
ادا اردت تغيير شريط اللون الاحمر بلون اخر غير فقط رمز اللون الاحمر

اقرء المزيد

الزيارات:

اضافة روابط الكود الخاصة بك من خلال موقع Google code

Unknown إضافات البلوجر لا يــوجد تعـــليقات

سنتطرق في موضوعنا اليوم لخدمة Google Code ومميزاتها وطريقة حفظ ملفات الجافا فيها (استخدام Google Code لحفظ ملفات الجافا بروابط مباشرة)
Google Code يساعدك في رفع ملف CSS و HTML.... ويحفظها عن طريق رابط خاص بك أي اي كود قمت بخلقه يتم ربطه برابط خاص بك إدا حدفت هدا الرابط أكيد لن يشتغل الكود.
كما أنه يقوم بحفظ ملفات ورقة الأنماط CSS وغيرها من أنواع الملفات مثل الصور، وصفحات الويب HTML, وغيرها؛ رغم أنه بالإمكان رفعها بنفس الطريقة بدون مشاكل إلا أنها لن تعمل بعد رفعها ولن تحقق الغرض إذا أردت أن تربطها بقالب مدونتك كإضافة أو كورقة أنماط للمدونة ــ بل اسوأ من ذلك أنها ستضللك وتجعلك تشك في الإضافة أو قالب المدونة فتقضي وقتاً طويلاً تبحث عن الخلل في المكان السليم.

I لماذا لا تعمل ملفات CSS مباشرة عند حفظها في Google Code؟! وماهو الحل؟
خدمة Google Code موجهة في الأصل لأصحاب المشاريع البرمجية المختلفة, وهي بالتأكيد ليست خدمة استضافة ملفات مواقع, فعندما ترفع ملف CSS أو HTML فإن Google Code سيعتبرها ملفات خام ولن يفهمها كما فهمتها أنت فيعتبرها مجرد ملفات خام لا لون لها ولا طعم ولا رائحه,
مثلاً
لو قمت برفع ملف اسمه index.html ثم نسخت رابطه في المتصفح لن يتم استعراضه على أنه صفحة ويب بل مجرد ملف خام سيسالك المتصفح هل تريد حفظه أم لا!.
بتعبير أعمق قليلاً: المتصفحات عندما تتعامل مع الملفات تبحث في الخادم المستضيف لهذه الملفات عن بروتوكل اسمه (MIME) يعرّف بامتدادات الملفات وهو الذي يحدد نوع الملف المُستعرض فيخبر المتصفح أن هذا الملف عبارة عن ملف نصي HTML، أو ملف نصي CSS، أو ملف تنفيذي exe .. وهكذا. و Google Code لا يفعل هذا إلا بالطريقة التي سنبينها لاحقاً بمشيئة الله.
(إذا كنت تملك استضافة خاصة ستجد زر خاص باسم mime type وسترى أن هناك العديد من تعريفات الملفات ..)

والحل أيها الكريم أن نتعامل مع Google Code كأننا أصحاب مشروع!.
Google Code يوفر ثلاثة أنظمة لإدارة المشاريع غايتها تنظيم المشروع وحفظ إصداراته والتعديلات التي أجريت عليه من قبل مطوريه وهي: (Git) و (Mercurial) و (Subversion). وسنعتمد على الأخير الا وهو (Subversion). وحتى نصل اليه من خلال الحاسب الآلي سنتسخدم أحد البرامج المتخصصة.
لا يهمنا هنا فهم هذه الأنظمة ولا كيف تعمل نريد أن نقتطف من هذا المجال فقط ما يحقق هدفنا وهو كما سترى في غاية اليسر، وهذه المعلومات التي قد تربك البعض أوردتها فقط لفهم القضية ليس إلا.
{إذاً الخلاصة لنرفع ملفاتنا إلى Google Code سنتعامل مع نظام التحكم بالمشاريع المسمى (Subversion) من خلال برنامج اسمه (TortoiseSVN) يعمل على بيئة ويندوز وهناك بالطبع برامج للأنظمة الأخرى}

II فتح حساب في Google Code واختيار نظام التحكم المناسب

1. لفتح حساب في Google Code الدهاب الى الموقع https://code.google.com/ سنشرح في وقت لاحق كيفية التسجيل لمن لا يعرف القيام بذلك

2. دعنا نتأكد أن نظام التحكم بالمشروع لديك هو subversion:

توجه الى صفحة المشروع.
اختر التبويب الرئيسي “Administer”.
ثم اختر التبويب الثانوي “Source”.
تأكد أن كلمة (Subversion) مكتوبة بجانب العبارة “Version control system”
إذا لم تكن هي الكلمة ، فقم بالضغط على الزر “Subversion” ليتحول المشروع اليه. انظر الصورة:

III الحصول على بيانات حساب المشروع (الرابط – اسم المستخدم ــ كلمة المرور)
هذه البيانات مطلوبة حتى ندخل على حساب المشروع من خلال البرنامج كما سنرى لاحقاً، افتح ملف نصي لنحفظ فيه البيانات حتى نرجع اليه بسهولة فيما بعد، مسالة تنظيمية ليس إلا.
توجه إلى صفحة المشروع.
اختر التبويب الرئيسي “Source”
ستظهر لك البيانات كما في الصورة:

1. انسخ رابط المشروع إلى الملف النصي. (لاحظ أن اسم مشروعي adnanos)
2. انسخ اسم المستخدم إلى الملف النصي. (لاحظ أنه مجرد عنوان البريد الذي فتحت من خلاله المشروع).
3. لرؤية كلمة المرور اضغط على “googlecode.com password” ستظهر لك في صفحة جديدة، انسخها أيضاً إلى الملف النصي.

الآن تحصلنا على البيانات الضرورية للتخاطب مع المشروع من خلال البرنامج كما سنبينه لاحقاً إن شاء الله.

IV تثبيت برنامج TortoiseSVN Turtle
- برنامج TortoiseSVN أفضل برنامج مجاني بالنسبة لنظام ويندوز، يمكنك الحصول عليه من الموقع الرسمي باتباع هذا الرابط، هناك نسختان 32 بت و 64 بت اختر النسخة التي توافق نوع نظامك.
- قم بتثبيت البرنامج
- بعد تثبيت البرنامج سوف لن يظهر في قائمة البرامج، بل سيدمج مع مستكشف الملفات الخاص بويندوز، وهذا يعني أنك تستطيع تشغيله من أي مكان خلال ويندوز. فبرنامج Tortoise عبارة عن منفذ شيل shell extension.

V إعداد برنامج TortoiseSVN وتعريف امتدادات الملفات
في الفقرة I أشرت إلى أن بروتوكول MIME هو المسؤول عن تعريف الملفات للمستعرضات لتفهمها حسب امتدادتها.
هناك ميزة رائعة في نظام التحكم بالمشاريع Subversion اسمها auto-props تعرف امتدادت الملفات تلقائياً، كل ما علينا الآن هو إضافة أنواع الملفات التي نريد أن نستضيفها في Google Code إلى برنامج TortoiseSVN لمرةٍ واحدةٍ فقط.
اضغط بزر الفأرة الأيمن في أي مكان ثم اختر “TortoiseSVN” من القائمة.
- ثم اختر “Settings”. ستظهر نافذة الإعدادت.
- اضغط على الزر “Edit”
- سينبثق ملف نصي بواسطة برنامج الدفتر.
- قم باختيار كامل النص بالضغط على الزرين: Ctrl+A
- احذف كل شيء، واترك الملف مفتوح.
- الآن! افتح هذا الرابط (هنا).
- قم باختيار كامل النص بالضغط على الزرين: Ctrl+A وانسخه بالضغط على الزرين Ctrl+C
- عُد الى الملف النصي والصقه كاملاً Ctrl+V.
- احفظ الملف ووافق على التغييرات.
انتهى!

وبهذا انتهينا إعداد كل شيء ، ونستطيع البدء في استخدام برنامج Tortoise لرفع ملفاتنا إلى Google Code مباشرة.

VI طريقة رفع الملفات إلى Google Code بواسطة برنامج Tortoise
الجميل في Google Code أنك تستطيع أن ترفع مجلد بكامل محتوياته مثل DropBox، وهذه ميزة عظيمة فعندما ترفع إضافة مكونة من: ورقة أنماط CSS وملفات جافا وصور فلن تكون مضطراً لتعديل روابط الصور في ملف CSS ولا روابط ملفات الجافا. فقط ارفع المجلد كما هو وجرب إضافتك.
افتح ملف بيانات حسابك في Google Code الذي أنشاته في الفقرة III والمكون من:
رابط المشروع
واسم المستخدم
وكلمة المرور
اضغط بزر الفأرة الأيمن في أي مكان ثم اختر “TortoiseSVN” من القائمة.
اختر من القائمة المنسدلة “Repo-browser” (تعني استعراض مخزن المشروع)
ستظهر نافذة صغيرة انسخ فيها رابط المشروع. واضغط OK.
ستظهر نافذة مخزن المشروع (ستكون بطيئة وربما ستقرأ عدم استجابة .. تجاهل ولا تغلق النافذة)
اضغط من القائمة اليسرى مجلد “Trunk” (يُعتبر هو المجلد الرئيسي)
الآن اضغط بزر الفأرة الأيمن في المربع الأيمن، واختر “Add file” لرفع ملف أو “Add folder” لرفع مجلد بكامل ملفاته. ويمكنك أيضاً استخدام ميزة السحب والإفلات.
ستظهر نافذة تطلب منك كتابة وصف للملفات أكتب أي شيء.
ثم ستظهر نافذة تطالبك باسم المستخدم وكلمة المرور. أدخلهما وضع علامة صح عند الخيار “Save authentication” حتى لا يطالبك كل مرة.

الآن انتظر … حتى ينتهي.
يمكنك الآن التوجه لمجلد ملفاتك عبر المتصفح من خلال رابط المشروع.

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

اقرء المزيد

الزيارات:

اضافة ساعة رقمية لمدونة بلوجر ب 4 أشكال

Unknown إضافات البلوجر لا يــوجد تعـــليقات

السلام عليكم ورحمة الله وبركاته.

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

طريقة التركيب
اولأ اذهب الي لوحة التحكم
1- ثم تخطيط
2- اضافة اداة
3- JavaScript/Html

الساعة الاولى

<embed 
src=http://flash-clocks.com/free-flash-clocks-blog-topics/free-flash-clock-171.swf
 width=200 height=200 wmode=transparent 
type=application/x-shockwave-flash></embed>

الساعة الثانية

<embed 
src=http://flash-clocks.com/free-flash-clocks-blog-topics/free-flash-clock-167.swf
 width=200 height=200 wmode=transparent 
type=application/x-shockwave-flash></embed>

الساعة الثالتة

<embed 
src=http://flash-clocks.com/free-flash-clocks-blog-topics/free-flash-clock-152.swf
 width=200 height=200 wmode=transparent 
type=application/x-shockwave-flash></embed>

الساعة الرابعة

<embed 
src=http://flash-clocks.com/free-flash-clocks-blog-topics/free-flash-clock-117.swf
 width=200 height=200 wmode=transparent 
type=application/x-shockwave-flash></embed>

أدعوا لي و لوالدي بالرحمة و المغفرة ولجميع المسلمين

اقرء المزيد

الزيارات:

إضافة لوحة المفاتيح العربية على مدونتك

Unknown إضافات البلوجر لا يــوجد تعـــليقات

بسم الله الرحمن الرحيم

والصلاة والسلام على أشرف المرسلين سيدنا محمد وعلى آله وصحبه أجمعين

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

طريقة التركيب
1- مشاركة.
2- تحرير.
3- انتقال من تبويب التأليف الى تبويب HTML.
4- ثم ضع الكواد داخل الحقل.

<div dir="rtl" style="text-align: right;" trbidi="on">
<div style="text-align: center;">
<div style="text-align: right;">
<span style="color: red;">لوحة المفاتيح العربية أون لاين </span></div>
<form id="Form1" name="form1" style="margin-top: -58px;">
<div style="text-align: center;">
</div>
&nbsp;  &nbsp;  &nbsp; &nbsp;  &nbsp;  &nbsp; &nbsp;  &nbsp;  &nbsp; &nbsp;
<br />
<table align="center" cellpadding="0" cellspacing="0" id="Table1" style="width: 100%px;"><tbody>
<tr align="center" style="color: magenta;"><td dir="rtl">&nbsp; &nbsp; &nbsp; 
<br />
<center>
<textarea class="resizable processed" cols="62" dir="rtl" id="Textarea1" name="text1" rows="4" style="-moz-border-radius-topleft: 5px; -moz-border-radius-topright: 5px; border: 3px solid #B44; font-family: 'Amiri'; font-size: 14pt; height: 171px; height: 200px; margin-bottom: -50px; margin-right: 22px; opacity: 1; overflow: auto; position: relative; width: 437px;" tabindex="1"></textarea>
&nbsp; &nbsp; &nbsp; </center>
</td></tr>
<tr align="center"><td>&nbsp; &nbsp; &nbsp; 
<br />
<center>
<img border="0" height="156" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKwFGihyPSEwg34bNPP6Njw3ewetIXRa1G7vKJNXsP7LeYsFOVskUhJmPw1jcuqUud1iVhd_kLS4Lwi8CEiZNjExmCpftkbu4xbWavdqjsOCFSdz9yikfLNza74rTbln7VYiIUFmLz0r1j/s1600/del.gif" style="-moz-filter: invert(100%); -ms-filter: invert(100%); -o-filter: invert(100%); -webkit-filter: invert(100%); filter: invert(100%); padding: 1px 1px;" usemap="#key" width="450" /> </center>
</td></tr>
<tr><td height="52"><div style="margin-top: -45px; text-align: center;">
&nbsp; &nbsp; &nbsp; </div>
<div align="center">
<div style="-ms-filter: invert(100%); -o-filter: invert(100%); -webkit-filter: invert(100%); border: -moz-filter: invert(100%); filter: invert(100%); text-align: center;">
<img border="0" height="30" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7wCbM8qQiFasC7WxLALEMZlo20_nK9P7ik6AuxDjHXf4HduGD1b9dCEwBIw5uT_srFWKPZAC2uorbNDdiqmihbgQtzBmS8xs57cQRv8Nk6Z6edUrhWlZGRgTc3Ljovr8MPZaXW6kOarl_/s1600/de1.png.png" usemap="#key2" width="330" /></div>
<div style="text-align: center;">
<span style="color: black; font-size: medium; font-weight: bold;"><span style="font-family: &quot;amiri&quot;;">بعد الإنتهاء من الكـتابة حدّد النص و إضغط&nbsp; "Crtl + c " للنسخ و "Crtl + v " للصق</span></span></div>
</div>
</td></tr>
</tbody></table>
<center>
<map name="key">
<style>
.bt {
    cursor: pointer;
}
</style>
<area coords="121,126,292,150" onclick="form1.text1.value=form1.text1.value + ' ';" shape="RECT"></area>
<area coords="421,126,450,150" onclick="form1.text1.value=form1.text1.value + 'ْ';" shape="RECT"></area>
<area coords="391,126,417,150" onclick="form1.text1.value=form1.text1.value + 'َ';" shape="RECT"></area>
<area coords="362,126,387,150" onclick="form1.text1.value=form1.text1.value + 'ً';" shape="RECT"></area>
<area coords="330,126,357,150" onclick="form1.text1.value=form1.text1.value + 'ِ';" shape="RECT"></area>
<area coords="302,126,326,150" onclick="form1.text1.value=form1.text1.value + 'ٍ';" shape="RECT"></area>
<area coords="92,126,116,150" onclick="form1.text1.value=form1.text1.value + 'ُ';" shape="RECT"></area>
<area coords="61,126,87,150" onclick="form1.text1.value=form1.text1.value + 'ٌ';" shape="RECT"></area>
<area coords="1,1,30,30" onclick="form1.text1.value=form1.text1.value + 'ذ';" shape="RECT"></area>
<area coords="32,1,59,30" onclick="form1.text1.value=form1.text1.value + '١';" shape="RECT"></area>
<area coords="62,1,88,30" onclick="form1.text1.value=form1.text1.value + '٢';" shape="RECT"></area>
<area coords="90,1,117,30" onclick="form1.text1.value=form1.text1.value + '٣';" shape="RECT"></area>
<area coords="119,1,146,30" onclick="form1.text1.value=form1.text1.value + '٤';" shape="RECT"></area>
<area coords="149,1,177,30" onclick="form1.text1.value=form1.text1.value + '٥';" shape="RECT"></area>
<area coords="180,1,209,30" onclick="form1.text1.value=form1.text1.value + '٦';" shape="RECT"></area>
<area coords="212,1,240,30" onclick="form1.text1.value=form1.text1.value + '٧';" shape="RECT"></area>
<area coords="243,1,267,30" onclick="form1.text1.value=form1.text1.value + '٨';" shape="RECT"></area>
<area coords="270,1,298,30" onclick="form1.text1.value=form1.text1.value + '٩';" shape="RECT"></area>
<area coords="300,1,328,30" onclick="form1.text1.value=form1.text1.value + '٠';" shape="RECT"></area>
<area coords="330,1,358,30" onclick="form1.text1.value=form1.text1.value + '-';" shape="rect"></area>
<area coords="360,1,388,30" onclick="form1.text1.value=form1.text1.value + '=';" shape="RECT"></area>
<area coords="390,1,419,30" onclick="form1.text1.value=form1.text1.value + '+';" shape="rect"></area>
<area coords="38,92,65,115" onclick="form1.text1.value=form1.text1.value + '/';" shape="RECT"></area>
<area coords="421,1,445,30" hidefocus="" onclick="var result; var s = form1.text1.value; result = s.substr(0, s.length - 1); form1.text1.value = result;" shape="RECT"></area>
<area coords="22,64,50,86" onclick="form1.text1.value=form1.text1.value + ')';" shape="RECT"></area>
<area coords="16,35,44,55" onclick="form1.text1.value=form1.text1.value + '(';" shape="RECT"></area>
<area coords="369,98,396,124" onclick="form1.text1.value=form1.text1.value + '*';" shape="RECT"></area>
<area coords="399,98,425,124" onclick="form1.text1.value=form1.text1.value + 'ّ';" shape="RECT"></area>
<area coords="334,95,361,120" onclick="form1.text1.value=form1.text1.value + 'ظ';" shape="RECT"></area>
<area coords="306,95,331,120" onclick="form1.text1.value=form1.text1.value + 'ز';" shape="RECT"></area>
<area coords="276,95,300,120" onclick="form1.text1.value=form1.text1.value + 'و';" shape="RECT"></area>
<area coords="246,95,271,120" onclick="form1.text1.value=form1.text1.value + 'ة';" shape="RECT"></area>
<area coords="219,95,245,120" onclick="form1.text1.value=form1.text1.value + 'ى';" shape="RECT"></area>
<area coords="189,95,213,120" onclick="form1.text1.value=form1.text1.value + 'لا';" shape="RECT"></area>
<area coords="159,95,186,120" onclick="form1.text1.value=form1.text1.value + 'ر';" shape="RECT"></area>
<area coords="130,95,153,120" onclick="form1.text1.value=form1.text1.value + 'ؤ';" shape="RECT"></area>
<area coords="101,95,127,120" onclick="form1.text1.value=form1.text1.value + 'ء';" shape="RECT"></area>
<area coords="74,95,96,120" onclick="form1.text1.value=form1.text1.value + 'ئ';" shape="RECT"></area>
<area coords="351,64,376,90" onclick="form1.text1.value=form1.text1.value + 'ط';" shape="RECT"></area>
<area coords="321,64,348,90" onclick="form1.text1.value=form1.text1.value + 'ك';" shape="RECT"></area>
<area coords="293,64,315,90" onclick="form1.text1.value=form1.text1.value + 'م';" shape="RECT"></area>
<area coords="263,64,286,90" onclick="form1.text1.value=form1.text1.value + 'ن';" shape="RECT"></area>
<area coords="234,62,258,90" onclick="form1.text1.value=form1.text1.value + 'ت';" shape="RECT"></area>
<area coords="206,64,229,90" onclick="form1.text1.value=form1.text1.value + 'ا';" shape="RECT"></area>
<area coords="178,64,200,90" onclick="form1.text1.value=form1.text1.value + 'ل';" shape="RECT"></area>
<area coords="148,64,170,90" onclick="form1.text1.value=form1.text1.value + 'ب';" shape="RECT"></area>
<area coords="118,64,142,89" onclick="form1.text1.value=form1.text1.value + 'ي';" shape="RECT"></area>
<area coords="90,64,112,90" onclick="form1.text1.value=form1.text1.value + 'س';" shape="RECT"></area>
<area coords="60,64,84,90" onclick="form1.text1.value=form1.text1.value + 'ش';" shape="RECT"></area>
<area coords="371,33,397,60" onclick="form1.text1.value=form1.text1.value + 'د';" shape="RECT"></area>
<area coords="343,33,368,60" onclick="form1.text1.value=form1.text1.value + 'ج';" shape="RECT"></area>
<area coords="315,33,339,60" onclick="form1.text1.value=form1.text1.value + 'ح';" shape="RECT"></area>
<area coords="285,33,310,60" onclick="form1.text1.value=form1.text1.value + 'خ';" shape="RECT"></area>
<area coords="255,33,280,60" onclick="form1.text1.value=form1.text1.value + 'ه';" shape="RECT"></area>
<area coords="229,33,251,60" onclick="form1.text1.value=form1.text1.value + 'ع';" shape="RECT"></area>
<area coords="198,33,222,60" onclick="form1.text1.value=form1.text1.value + 'غ';" shape="RECT"></area>
<area coords="169,33,193,60" onclick="form1.text1.value=form1.text1.value + 'ف';" shape="RECT"></area>
<area coords="140,33,165,60" onclick="form1.text1.value=form1.text1.value + 'ق';" shape="RECT"></area>
<area coords="110,33,134,60" onclick="form1.text1.value=form1.text1.value + 'ث';" shape="RECT"></area>
<area coords="82,33,103,60" onclick="form1.text1.value=form1.text1.value + 'ص';" shape="RECT"></area>
<area coords="47,33,75,60" onclick="form1.text1.value=form1.text1.value + 'ض';" shape="RECT"></area>
<area coords="402,38,436,38,438,85,381,86,379,68,403,68" onclick="form1.text1.value=form1.text1.value + '\n';" shape="POLY"></area></map>
<map name="key2">
<area coords="300,5,325,33" onclick="form1.text1.value=form1.text1.value + '؛';" shape="RECT"></area>
<area coords="270,4,295,32" onclick="form1.text1.value=form1.text1.value + 'إ';" shape="RECT"></area>
<area coords="240,6,265,33" onclick="form1.text1.value=form1.text1.value + '،';" shape="RECT"></area>
<area coords="210,4,234,35" onclick="form1.text1.value=form1.text1.value + 'ـ';" shape="RECT"></area>
<area coords="180,5,205,33" onclick="form1.text1.value=form1.text1.value + 'أ';" shape="RECT"></area>
<area coords="150,6,175,32" onclick="form1.text1.value=form1.text1.value + 'لأ';" shape="RECT"></area>
<area coords="121,6,146,35" onclick="form1.text1.value=form1.text1.value + '؟';" shape="RECT"></area>
<area coords="92,6,117,32" onclick="form1.text1.value=form1.text1.value + '.';" shape="RECT"></area>
<area coords="62,6,87,34" onclick="form1.text1.value=form1.text1.value + ',';" shape="RECT"></area>
<area coords="29,6,56,34" onclick="form1.text1.value=form1.text1.value + 'آ';" shape="RECT"></area>
<area coords="2,6,27,34" onclick="form1.text1.value=form1.text1.value + 'لآ';" shape="RECT"></area>
</map></center>
</form>
<br /></div>
</div>

في موضوع اخر سندكر اضافة كيبورد بالفرنسية وكيفية ربطها بهاته الأضافة حتى يصير لك كيبورد عربي فرنسي بزر واحد.

اتمنى انت تنال اعجابكم ولاتبخلوا علينا بالدعاء لوالدي ولجميع المسلمين

اقرء المزيد

الزيارات:

أكواد الآلات الحاسبة لمدونة البلوجر

Unknown إضافات البلوجر 23 تعــــليق

السلام عليكم ورحمة الله تعالى وبركاته

اليوم سوف نعرض كيفية عمل آلة حاسبة إلكترونية باستخدام أكواد الجافا سكربت.

تعتبر الجافا سكربت من اقوى اللغات فى تطوير الويب ومن اكثرها سهولة، وفي هدا الدرس سنعرض مجموعة من الألات حاسبة قمت بنسخ اكوادها من مواقع اجنبية بحيت نقوم بوضع الاكواد في القالب الا اني طورتها وقمت بتجميع اكواد Css، HTML، JS ووضعتها في كود واحد يسهل على المدون او الزائر بوضعها داخل Java Script او داخل المنشور في جهة HTML او في الصفحة، عوض عن وضعها في القالب في الجهات المخصصة.

سنعرض الان اكواد الالات الحاسبة، على بركة الله.

الالة الحاسبة 1:

الة جميلة بالوان مختلفة وخفيفة كما في الصورة.

<style>
/* Basic reset */
* {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
 
 /* Better text styling */
 font: bold 14px Arial, sans-serif;
}

/* Finally adding some IE9 fallbacks for gradients to finish things up */

/* A nice BG gradient */
html {
 height: 100%;
 background: white;
 background: radial-gradient(circle, #fff 20%, #ccc);
 background-size: cover;
}

/* Using box shadows to create 3D effects */
#calculator {
 width: 325px;
 height: auto;
 
 margin: 100px auto;
 padding: 20px 20px 9px;
 
 background: #9dd2ea;
 background: linear-gradient(#9dd2ea, #8bceec);
 border-radius: 3px;
 box-shadow: 0px 4px #009de4, 0px 10px 15px rgba(0, 0, 0, 0.2);
}

/* Top portion */
.top span.clear {
 float: left;
}

/* Inset shadow on the screen to create indent */
.top .screen {
 height: 40px;
 width: 212px;
 
 float: right;
 
 padding: 0 10px;
 
 background: rgba(0, 0, 0, 0.2);
 border-radius: 3px;
 box-shadow: inset 0px 4px rgba(0, 0, 0, 0.2);
 
 /* Typography */
 font-size: 17px;
 line-height: 40px;
 color: white;
 text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
 text-align: right;
 letter-spacing: 1px;
}

/* Clear floats */
.keys, .top {overflow: hidden;}

/* Applying same to the keys */
.keys span, .top span.clear {
 float: left;
 position: relative;
 top: 0;
 
 cursor: pointer;
 
 width: 66px;
 height: 36px;
 
 background: white;
 border-radius: 3px;
 box-shadow: 0px 4px rgba(0, 0, 0, 0.2);
 
 margin: 0 7px 11px 0;
 
 color: #888;
 line-height: 36px;
 text-align: center;
 
 /* prevent selection of text inside keys */
 user-select: none;
 
 /* Smoothing out hover and active states using css3 transitions */
 transition: all 0.2s ease;
}

/* Remove right margins from operator keys */
/* style different type of keys (operators/evaluate/clear) differently */
.keys span.operator {
 background: #FFF0F5;
 margin-right: 0;
}

.keys span.eval {
 background: #f1ff92;
 box-shadow: 0px 4px #9da853;
 color: #888e5f;
}

.top span.clear {
 background: #ff9fa8;
 box-shadow: 0px 4px #ff7c87;
 color: white;
}

/* Some hover effects */
.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;
}

/* Simulating "pressed" effect on active state of the keys by removing the box-shadow and moving the keys down a bit */
.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;
}
</style>
<div id="calculator">
 <!-- Screen and clear key -->
 <div class="top">
  <span class="clear">C</span>
  <div class="screen"></div>
 </div>
 
 <div class="keys">
  <!-- operators and other 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>
<script type='text/javascript'>
// Get all the keys from document
var keys = document.querySelectorAll('#calculator span');
var operators = ['+', '-', 'x', '÷'];
var decimalAdded = false;

// Add onclick event to all the keys and perform operations
for(var i = 0; i < keys.length; i++) {
 keys[i].onclick = function(e) {
  // Get the input and button values
  var input = document.querySelector('.screen');
  var inputVal = input.innerHTML;
  var btnVal = this.innerHTML;
  
  // Now, just append the key values (btnValue) to the input string and finally use javascript's eval function to get the result
  // If clear key is pressed, erase everything
  if(btnVal == 'C') {
   input.innerHTML = '';
   decimalAdded = false;
  }
  
  // If eval key is pressed, calculate and display the result
  else if(btnVal == '=') {
   var equation = inputVal;
   var lastChar = equation[equation.length - 1];
   
   // Replace all instances of x and ÷ with * and / respectively. This can be done easily using regex and the 'g' tag which will replace all instances of the matched character/substring
   equation = equation.replace(/x/g, '*').replace(/÷/g, '/');
   
   // Final thing left to do is checking the last character of the equation. If it's an operator or a decimal, remove it
   if(operators.indexOf(lastChar) > -1 || lastChar == '.')
    equation = equation.replace(/.$/, '');
   
   if(equation)
    input.innerHTML = eval(equation);
    
   decimalAdded = false;
  }
  
  // Basic functionality of the calculator is complete. But there are some problems like 
  // 1. No two operators should be added consecutively.
  // 2. The equation shouldn't start from an operator except minus
  // 3. not more than 1 decimal should be there in a number
  
  // We'll fix these issues using some simple checks
  
  // indexOf works only in IE9+
  else if(operators.indexOf(btnVal) > -1) {
   // Operator is clicked
   // Get the last character from the equation
   var lastChar = inputVal[inputVal.length - 1];
   
   // Only add operator if input is not empty and there is no operator at the last
   if(inputVal != '' && operators.indexOf(lastChar) == -1) 
    input.innerHTML += btnVal;
   
   // Allow minus if the string is empty
   else if(inputVal == '' && btnVal == '-') 
    input.innerHTML += btnVal;
   
   // Replace the last operator (if exists) with the newly pressed operator
   if(operators.indexOf(lastChar) > -1 && inputVal.length > 1) {
    // Here, '.' matches any character while $ denotes the end of string, so anything (will be an operator in this case) at the end of string will get replaced by new operator
    input.innerHTML = inputVal.replace(/.$/, btnVal);
   }
   
   decimalAdded =false;
  }
  
  // Now only the decimal problem is left. We can solve it easily using a flag 'decimalAdded' which we'll set once the decimal is added and prevent more decimals to be added once it's set. It will be reset when an operator, eval or clear key is pressed.
  else if(btnVal == '.') {
   if(!decimalAdded) {
    input.innerHTML += btnVal;
    decimalAdded = true;
   }
  }
  
  // if any other key is pressed, just append it
  else {
   input.innerHTML += btnVal;
  }
  
  // prevent page jumps
  e.preventDefault();
 } 
}
</script>
<!-- PrefixFree -->
<script src="http://thecodeplayer.com/uploads/js/prefixfree-1.0.7.js" type="text/javascript" type="text/javascript"></script>

الالة الحاسبة 2:

الة جميلة تتوفر على زر% ، زر المسح .....

<style>
.calculatrice
{
        width:300px;
        height:300px;
        background-color:#eeeeee;
        border:2px solid #CCCCCC;
        margin:auto;
        padding-left:5px;
        padding-bottom:5px;
}
.calculatrice td
{
        height:16.66%;
}
.calc_td_resultat
{
        text-align:center;
}
.calc_resultat
{
        width:90%;
        text-align:right;
}
.calc_td_calculs
{
        text-align:center;
}
.calc_calculs
{
        width:90%;
        text-align:left;
}
.calc_td_btn
{
        width:25%;
        height:100%;
}
.calc_btn
{
        width:90%;
        height:90%;
        font-size:20px;
}
</style>

<script type='text/javascript'>
calc_array = new Array();
var calcul=0;
var pas_ch=0;
function $id(id)
{
        return document.getElementById(id);
}
function f_calc(id,n)
{
        if(n=='ce')
        {
                initialiser_calc(id);
        }
        else if(n=='=')
        {
                if(calc_array[id][0]!='=' && calc_array[id][1]!=1)
                {
                        eval('calcul='+calc_array[id][2]+calc_array[id][0]+calc_array[id][3]+';');
                        calc_array[id][0] = '=';
                        $id(id+'_resultat').value=calcul;
                        calc_array[id][2]=calcul;
                        calc_array[id][3]=0;
                }
        }
        else if(n=='+-')
        {
                $id(id+'_resultat').value=$id(id+'_resultat').value*(-1);
                if(calc_array[id][0]=='=')
                {
                        calc_array[id][2] = $id(id+'_resultat').value;
                        calc_array[id][3] = 0;
                }
                else
                {
                        calc_array[id][3] = $id(id+'_resultat').value;
                }
                pas_ch = 1;
        }
        else if(n=='nbs')
        {
                if($id(id+'_resultat').value<10 && $id(id+'_resultat').value>-10)
                {
                        $id(id+'_resultat').value=0;
                }
                else
                {
                        $id(id+'_resultat').value=$id(id+'_resultat').value.slice(0,$id(id+'_resultat').value.length-1);
                }
                if(calc_array[id][0]=='=')
                {
                        calc_array[id][2] = $id(id+'_resultat').value;
                        calc_array[id][3] = 0;
                }
                else
                {
                        calc_array[id][3] = $id(id+'_resultat').value;
                }
        }
        else
        {
                        if(calc_array[id][0]!='=' && calc_array[id][1]!=1)
                        {
                                eval('calcul='+calc_array[id][2]+calc_array[id][0]+calc_array[id][3]+';');
                                $id(id+'_resultat').value=calcul;
                                calc_array[id][2]=calcul;
                                calc_array[id][3]=0;
                        }
                        calc_array[id][0] = n;
        }
        if(pas_ch==0)
        {
                calc_array[id][1] = 1;
        }
        else
        {
                pas_ch=0;
        }
        document.getElementById(id+'_resultat').focus();
        return true;
}
function add_calc(id,n)
{
        if(calc_array[id][1]==1)
        {
                $id(id+'_resultat').value=n;
        }
        else
        {
                $id(id+'_resultat').value+=n;
        }
        if(calc_array[id][0]=='=')
        {
                calc_array[id][2] = $id(id+'_resultat').value;
                calc_array[id][3] = 0;
        }
        else
        {
                calc_array[id][3] = $id(id+'_resultat').value;
        }
        calc_array[id][1] = 0;
        document.getElementById(id+'_resultat').focus();
        return true;
}
function initialiser_calc(id)
{
        $id(id+'_resultat').value=0;
        calc_array[id] = new Array('=',1,'0','0',0);
        document.getElementById(id+'_resultat').focus();
        return true;
}
function key_detect_calc(id,evt)
{
        if((evt.keyCode>95) && (evt.keyCode<106))
        {
                var nbr = evt.keyCode-96;
                add_calc(id,nbr);
        }
        else if((evt.keyCode>47) && (evt.keyCode<58))
        {
                var nbr = evt.keyCode-48;
                add_calc(id,nbr);
        }
        else if(evt.keyCode==107)
        {
                f_calc(id,'+');
        }
        else if(evt.keyCode==109)
        {
                f_calc(id,'-');
        }
        else if(evt.keyCode==106)
        {
                f_calc(id,'*');
        }
        else if(evt.keyCode==111)
        {
                f_calc(id,'');
        }
        else if(evt.keyCode==110)
        {
                add_calc(id,'.');
        }
        else if(evt.keyCode==190)
        {
                add_calc(id,'.');
        }
        else if(evt.keyCode==188)
        {
                add_calc(id,'.');
        }
        else if(evt.keyCode==13)
        {
                f_calc(id,'=');
        }
        else if(evt.keyCode==46)
        {
                f_calc(id,'ce');
        }
        else if(evt.keyCode==8)
        {
                f_calc(id,'nbs');
        }
        else if(evt.keyCode==27)
        {
                f_calc(id,'ce');
        }
        return true;
}
</script>




  <table class="calculatrice" id="calc">
            <tr>
                <td colspan="4" class="calc_td_resultat">
                    <input type="text" readonly="readonly" name="calc_resultat" id="calc_resultat" class="calc_resultat" onkeydown="javascript:key_detect_calc('calc',event);" />
                </td>
            </tr>
            <tr>
                <td class="calc_td_btn">
                        <input type="button" class="calc_btn" value="CE" onclick="javascript:f_calc('calc','ce');" />
                </td>
                <td class="calc_td_btn">
                        <input type="button" class="calc_btn" value="&larr;" onclick="javascript:f_calc('calc','nbs');" />
                </td>
                <td class="calc_td_btn">
                        <input type="button" class="calc_btn" value="%" onclick="javascript:f_calc('calc','%');" />
                </td>
                <td class="calc_td_btn">
                        <input type="button" class="calc_btn" value="+" onclick="javascript:f_calc('calc','+');" />
                </td>
            </tr>
            <tr>
                <td class="calc_td_btn">
                        <input type="button" class="calc_btn" value="7" onclick="javascript:add_calc('calc',7);" />
                </td>
                <td class="calc_td_btn">
                        <input type="button" class="calc_btn" value="8" onclick="javascript:add_calc('calc',8);" />
                </td>
                <td class="calc_td_btn">
                        <input type="button" class="calc_btn" value="9" onclick="javascript:add_calc('calc',9);" />
                </td>
                <td class="calc_td_btn">
                        <input type="button" class="calc_btn" value="-" onclick="javascript:f_calc('calc','-');" />
                </td>
            </tr>
                        <tr>
                <td class="calc_td_btn">
                        <input type="button" class="calc_btn" value="4" onclick="javascript:add_calc('calc',4);" />
                </td>
                <td class="calc_td_btn">
                        <input type="button" class="calc_btn" value="5" onclick="javascript:add_calc('calc',5);" />
                </td>
                <td class="calc_td_btn">
                        <input type="button" class="calc_btn" value="6" onclick="javascript:add_calc('calc',6);" />
                </td>
                <td class="calc_td_btn">
                        <input type="button" class="calc_btn" value="x" onclick="javascript:f_calc('calc','*');" />
                </td>
            </tr>
            <tr>
                <td class="calc_td_btn">
                        <input type="button" class="calc_btn" value="1" onclick="javascript:add_calc('calc',1);" />
                </td>
                <td class="calc_td_btn">
                        <input type="button" class="calc_btn" value="2" onclick="javascript:add_calc('calc',2);" />
                </td>
                <td class="calc_td_btn">
                        <input type="button" class="calc_btn" value="3" onclick="javascript:add_calc('calc',3);" />
                </td>
                <td class="calc_td_btn">
                        <input type="button" class="calc_btn" value="&divide;" onclick="javascript:f_calc('calc','');" />
                </td>
            </tr>
            <tr>
                <td class="calc_td_btn">
                        <input type="button" class="calc_btn" value="0" onclick="javascript:add_calc('calc',0);" />
                </td>
                <td class="calc_td_btn">
                        <input type="button" class="calc_btn" value="&plusmn;" onclick="javascript:f_calc('calc','+-');" />
                </td>
                <td class="calc_td_btn">
                        <input type="button" class="calc_btn" value="," onclick="javascript:add_calc('calc','.');" />
                </td>
                <td class="calc_td_btn">
                        <input type="button" class="calc_btn" value="=" onclick="javascript:f_calc('calc','=');" />
                </td>
            </tr>
        </table>
        <script type="text/javascript">
                document.getElementById('calc').onload=initialiser_calc('calc');
        </script>

الالة الحاسبة 3:

الة بسيطة وصغيرة تناسب جميع المدونات.

<FORM NAME="Calc">
<TABLE BORDER=4>
<TR>
<TD>
<INPUT TYPE="text"   NAME="Input" Size="16">
<br>
</TD>
</TR>
<TR>
<TD>
<INPUT TYPE="button" NAME="one"   VALUE="  1  " OnClick="Calc.Input.value += '1'">
<INPUT TYPE="button" NAME="two"   VALUE="  2  " OnCLick="Calc.Input.value += '2'">
<INPUT TYPE="button" NAME="three" VALUE="  3  " OnClick="Calc.Input.value += '3'">
<INPUT TYPE="button" NAME="plus"  VALUE="  +  " OnClick="Calc.Input.value += ' + '">
<br>
<INPUT TYPE="button" NAME="four"  VALUE="  4  " OnClick="Calc.Input.value += '4'">
<INPUT TYPE="button" NAME="five"  VALUE="  5  " OnCLick="Calc.Input.value += '5'">
<INPUT TYPE="button" NAME="six"   VALUE="  6  " OnClick="Calc.Input.value += '6'">
<INPUT TYPE="button" NAME="minus" VALUE="  -  " OnClick="Calc.Input.value += ' - '">
<br>
<INPUT TYPE="button" NAME="seven" VALUE="  7  " OnClick="Calc.Input.value += '7'">
<INPUT TYPE="button" NAME="eight" VALUE="  8  " OnCLick="Calc.Input.value += '8'">
<INPUT TYPE="button" NAME="nine"  VALUE="  9  " OnClick="Calc.Input.value += '9'">
<INPUT TYPE="button" NAME="times" VALUE="  x  " OnClick="Calc.Input.value += ' * '">
<br>
<INPUT TYPE="button" NAME="clear" VALUE="  c  " OnClick="Calc.Input.value = ''">
<INPUT TYPE="button" NAME="zero"  VALUE="  0  " OnClick="Calc.Input.value += '0'">
<INPUT TYPE="button" NAME="DoIt"  VALUE="  =  " OnClick="Calc.Input.value = eval(Calc.Input.value)">
<INPUT TYPE="button" NAME="div"   VALUE="  /  " OnClick="Calc.Input.value += ' / '">
<br>
</TD>
</TR>
</TABLE>
</FORM>

<p align="center"><font face="arial" size="-2"></font><br>
<font face="arial, helvetica" size="-2"></font></p>

الالة الحاسبة 4:

الة حاسبة برأيي عادية، ليس كمتيلتها من الالات التي سبق ان رايناها لكن من تقوم بالواجب الحسابي

<SCRIPT>
function compute(obj) 
   {obj.expr.value = eval(obj.expr.value)}
var one = '1'
var two = '2'
var three = '3'
var four = '4'
var five = '5'
var six = '6'
var seven = '7'
var eight = '8'
var nine = '9'
var zero = '0'
var plus = '+'
var minus = '-'
var multiply = '*'
var divide = '/'
var decimal = '.'
function enter(obj, string) 
   {obj.expr.value += string}
function clear(obj) 
   {obj.expr.value = ''}
                      </SCRIPT>
      
      <FORM name="calc">
                        <DIV align="center">
       <TABLE border="1" bgcolor="#0033CC">
                          <TR>
                            <TD colSpan="4"><INPUT size=30 
                              name=expr action="compute(this.form)"></TD></TR>
                          <TR>
                            <TD bgColor="#000033">
                              <P><INPUT onclick="enter(this.form, seven)" type=button value="  7  "></P></TD>
                            <TD bgColor="#000033">
                              <P><INPUT onclick="enter(this.form, eight)" type=button value="  8  "></P></TD>
                            <TD bgColor="#000033">
                              <P><INPUT onclick="enter(this.form, nine)" type=button value="  9  "></P></TD>
                            <TD bgColor="#000033">
                              <P><INPUT onclick="enter(this.form, divide)" type=button value="   /  "></P></TD></TR>
                          <TR>
                            <TD bgColor="#000033">
                              <P><INPUT onclick="enter(this.form, four)" type=button value="  4  "></P></TD>
                            <TD bgColor="#000033">
                              <P><INPUT onclick="enter(this.form, five)" type=button value="  5  "></P></TD>
                            <TD bgColor="#000033">
                              <P><INPUT onclick="enter(this.form, six)" type=button value="  6  "></P></TD>
                            <TD bgColor="#000033">
                              <P><INPUT onclick="enter(this.form, multiply)" type=button value="  *  "></P></TD></TR>
                          <TR>
                            <TD bgColor="#000033">
                              <P><INPUT onclick="enter(this.form, one)" type=button value="  1  "></P></TD>
                            <TD bgColor="#000033">
                              <P><INPUT onclick="enter(this.form, two)" type=button value="  2  "></P></TD>
                            <TD bgColor="#000033">
                              <P><INPUT onclick="enter(this.form, three)" type=button value="  3  "></P></TD>
                            <TD bgColor="#000033">
                              <P><INPUT onclick="enter(this.form, minus)" type=button value="   -  "></P></TD></TR>
                          <TR>
                            <TD bgColor="#000033" colSpan=2>
                              <P><INPUT onclick="enter(this.form, zero)" type=button value="       0       "></P></TD>
                            <TD bgColor="#000033">
                              <P><INPUT onclick="enter(this.form, decimal)" type=button value="   .  "></P></TD>
                            <TD bgColor="#000033">
                              <P><INPUT onclick="enter(this.form, plus)" type=button value="  +  "></P></TD></TR>
                          <TR>
                            <TD bgColor="#000033" colSpan=2>
                              <P><INPUT onclick=compute(this.form) type=button value="   =   "></P></TD>
                            <TD bgColor="#000033" colSpan=2>
                              <P><INPUT onclick=clear(this.form) type=reset value=AC>
         </P></TD></TR></TABLE></DIV></FORM>
         <P align="center">
                              <FONT face="Courier , New tahoma , erdana, arial, helveticav" size="2"
                              color="#0000FF"><B><A target="_blank"

طريقة التركيب:
1- لوحة التحكم بلوجر.
2- تخطيط.
3- إضافة أداة HTML/JavaScript .
4- ثم ضع الأكواد المختارة في الحقل

أو

1- مشاركة.
2- تحرير.
3- انتقال من خانة تأليف الى خانة HTML.
4- ثم ضع الأكواد المختارة.

أو

1- صفحات.
2- صفحة جديدة.
3- خانة HTML.
4- ثم ضع الأكواد المختارة.

بالنسبة الى طريقة التركيب تبقى لصاحب المدونة طريقته الخاصة اما بالنسبة للمحترفين فيمكن تركيبها حتى في القالب.

اتمنى ان تنال اعجابكم

اقرء المزيد

الاشتراك في: الرسائل ( Atom )

الزيارات:

كود فانوس رمضان بصيغة Gif

الزيارات:

كود ذكر المصدر عند النسخ

الزيارات:

كود مشغل Mp3 للبلوجر

الزيارات:

كود تاثير اللمعان على شعار المدونة

الزيارات:

كود أداة "جدول المباريات العالمية"

الزيارات:

كود إضافة خاصية التلميح أو Tooltip

الزيارات:

كود تغيير شريط scroll bar

الزيارات:

اضافة روابط الكود الخاصة بك من خلال موقع Google code

الزيارات:

اضافة ساعة رقمية لمدونة بلوجر ب 4 أشكال

الزيارات:

إضافة لوحة المفاتيح العربية على مدونتك

الزيارات:

أكواد الآلات الحاسبة لمدونة البلوجر

مواقيت الصلاة

ترجم

المتصلين

عدد زوار الشبكة

مواقع صديقة

المواضيع المختارة

المشاركات الشائعة