عداد المناسبات بإعداداتك وتنسيقك

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

معاينــة

 <script type="text/javascript" src="https://cnmu.googlecode.com/svn/trunk/cnmu-counter.js"></script>
<center>
<div style="background: #E1E0E0;background: -moz-linear-gradient(top,#fff,#E1E0E0);background: -webkit-linear-gradient(top,#fff,#E1E0E0); border-radius:4px;-webkit-border-radius:4px;-moz-border-radius:4px;width:240px; padding:5px;border:1px solid #bbb;box-shadow: 0 1px 2px #999;-moz-box-shadow: 0 1px 2px #999;-webkit-box-shadow: 0 1px 2px #999; font-family: Arial; font-size:20px; color:#FB913F; text-align:center;">
<center>
<b>كم بقي على رمضان</b>
<div id="countdowncontainer" style="background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhG4yT_GSNIiVip8PamdCWuK7Vq2-jP1lUwrXcvrMwI98AV6cmTwMuo4R7YtWTrblW09nF3n_cwjvbCp3679YkaW9wTKoRY0bRsJbYAJwYZeWXw3yhnelFcYDl1-lnz6ubygP_jhdsjgXk/s213/cnmu-counter.PNG) no-repeat center center transparent; height: 60px;width: 215px; font-family: Arial; line-height:1.2em; font-size:20px; font-weight:bold; color:#000;"></div>
<script type="text/javascript">
var futuredate = new cdtime("countdowncontainer", "june 18, 2015 00:00:00")
futuredate.displaycountdown("days", formatresults)
</script></center></div></center>

وبما أن شهر رمضان المبارك أصبح قريباً فتم إعداد الكود على تاريخ الشهر المبارك

فكل عام وأنتم بخير

ولكن طبعا يمكن تعديل وقت العداد بالشكل لتالي

قم بإستبدال 18 بتاريخ اليوم المراد أن يصل اليه العد التنازلي

واستبدل 2015 بتاريخ السنة

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

january
february
march
april
may
june
july
august
september
october
november
december

وطبعا بالنسبة للشهر الهجري انظر كم يوافق التاريخ الهجري ميلاديا ثم قم بالضبط على ذلك

والآن سنتكلم على طريقة تنسيق الألوان لمن يرغب بذك

هذه هي الاجزاء الموجوده في الكود الخاصة بالتنسيق

<div style="background: #E1E0E0;background: -moz-linear-gradient(top,#fff,#E1E0E0);background: -webkit-linear-gradient(top,#fff,#E1E0E0); border-radius:4px;-webkit-border-radius:4px;-moz-border-radius:4px;width:240px; padding:5px;border:1px solid #bbb;box-shadow: 0 1px 2px #999;-moz-box-shadow: 0 1px 2px #999;-webkit-box-shadow: 0 1px 2px #999; font-family: Arial; font-size:20px; color:#FB913F; text-align:center;">
<center>
<b>كم بقي على رمضان</b>

كم بقي على رمضان نستبدلها بالعبارة التي تعجبنا بحسب المناسبة

اللونين المعلمان بالأحمر والأزرق هما الوان تدرج الخلفية

أما هذا اللون #bbb   فهو لون الإطار الخارجي

وهذا اللون هو لون خط العبارة #FB913F

وهذا هو وسم الخط قم بتغييره إن كنت تستخدم خط خاص font-family: Arial;

والرقم 20 هو حجم الخط

طبعا التعديلات تكون على الكود الأصلي الموضوع في بداية الموضوع

آخر شئ

هذا هو الكود كعداد فقط بدون التنسيق الخارجي فقط أيقونات العداد

 <script type="text/javascript" src="https://cnmu.googlecode.com/svn/trunk/cnmu-counter.js"></script>
<center>
<div id="countdowncontainer" style="background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhG4yT_GSNIiVip8PamdCWuK7Vq2-jP1lUwrXcvrMwI98AV6cmTwMuo4R7YtWTrblW09nF3n_cwjvbCp3679YkaW9wTKoRY0bRsJbYAJwYZeWXw3yhnelFcYDl1-lnz6ubygP_jhdsjgXk/s213/cnmu-counter.PNG) no-repeat center center transparent; height: 60px;width: 215px; line-height:1.2em; font-size:20px; font-weight:bold; color:#000;"></div>
<script type="text/javascript">
var futuredate = new cdtime("countdowncontainer", "june 18, 2015 00:00:00")
futuredate.displaycountdown("days", formatresults)
</script></center>

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

وبالتوفيق للجميع