كود عداد العروض والخصومات المؤقتة والمسابقات والجيفاوي لأصحاب المواقع والمتاجر وكتاب المقالات

معظم أصحاب المواقع بل وحتى كتاب المقالات قد يحتاجون لبعض الإضافات البرمجية التجميلية والتسويقية لمواقعهم أو مقالاتهم ومن أفضل تلك الإضافات البرمجية إضافة العداد وهي إضافة برمجية مهمة جداً في كثير من المجالات وبالأخص المواقع والمقالات التسويقية والتي تعتمد على العروض الخاصة والخصومات والكوبونات المؤقتة.

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

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

وقد يسأل البعض

هل هذا الكود مناسب لعمل عروض وخصومات مؤقتة؟

هل أستطيع تغيير ألوان العداد؟

هل هو كود عداد مجاني؟

وسيتم الإجابة عن تلك الأسئلة وأكثر في كامل المقالة

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

ولتغيير الوقت كل ماعلينا فعله هو البحث داخل كود العداد الذي نريده عن الجملة

var deadline = new Date("jul 13, 2023 15:37:25").getTime();

وإستبدال التاريخ

jul 13, 2023 15:37:25

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

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

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

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

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

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

ولتغيير الخلفية الكبيرة للعداد بالمجموعة الأولى من العدادات عليك البحث في الكود عن الجملة

background:linear-gradient(135deg,#4c7eb0,#512f75);

وتغيير الكود

#4c7eb0

وكذلك الكود

#512f75

بأي كودين أخرين للألوان بالبحث بجوجل عن الجملة " html color picker " لتجد الخدمة بموقع جوجل بحث نفسها عليك تحديد اللون وإختياره وأخذ الكود وإستبداله بالكودين السابقين دون المساس ببقية الكود أو تغيير أي شيء فيه وحتى تصل للألوان التي تريد وملاحظة إن كنت لا تريد الكثير من التعديلات إختار ألوان غامقة أو داكنة حتى لا تحتاج لتغيير ألوان الكتابة بالعداد.

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

background:linear-gradient(45deg,#512f75,#036);

وستجدها موجودة مرتين عدل الجملتين بنفس الشكل تماماً في كل تعديل

وستعدل كودين الألوان

#512f75

وكذلك الكود

#036

وستغير الكودين للألوان في الجملتين بنفس الشكل تماماً بالطريقة التي تم شرحها في الجملة السابقة من خدمة " html color picker " الموجودة عندما تبحث عنها بجوجل بحث.

الأن لم يبقى إلا تغيير لون مربع الأرقام بالعداد الداخلي فقط عليك البحث عن الجملة

background: #01185e;

وستغير كود الألوان

#01185e

بكود الألوان الذي تريد كما تم شرحها بالأعلى سابقاً وعليك أن تكون دقيق جداً وتعرف ما تفعل كما تم الشرح حتى لا يخرب الكود منك لتحاول مرة أخرى التعديل بالكود من جديد.

ماذا إن كنت تريد عمل ألوان فاتحة للعداد في تلك الحالة لن يظهر لون الأرقام والكتابة بالعداد والكتابة التي فوقه وكلمات أيام وساعات ودقائق وثواني لذا عليك تغيير ألوان الكتابة ولتغييرها عليك الإنتباه جيداً لأن الأمر أعقد قليلاً من التعديلات السابقة

فقط عليك البحث بالكود عن الجملة

#clockdiv{

ثم تغيير الكود

#fff

بالجملة

color: #fff;

فقط الموجودة أسفل الجملة #clockdiv{

بسطرين بعدها قم بحفظ التغيير وتأكد من نجاح التعديل بكود لون الخط الأخر الذي تريد وأنصح في حالة إستخدمت ألوان خلفيات فاتحة أن تستخدم كود اللون الأسود وهو بالكود

#000

وبنفس الطريقة لتغيير لون كلمة العداد الكبيرة فوق أرقام العداد فقط عليك البحث عن الجملة

#countertitle1{

ثم تغيير الكود

#FFF

بالجملة

color: #FFF;

فقط الموجودة أسفل الجملة #countertitle1{

مباشرة ولا تغير شيء أخر وبعد التعديل تقوم بالحفظ والتأكد من تمام نجاح التعديل بالكود الأخر للألوان الذي تريد وأرجح في حالة أنك إستخدمت ألوان فاتحة بالخلفية أن تستخدم كود اللون للكتابة والأرقام

#000

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

أما كلمة أكتب هنا ما تريد إن أردت حذفها وكتابة ماتريد بمحرر الكتابة الخاص بك أسفل العداد الأمر بسيط جداً عليك البحث عن الجملة

أكتب هنا ماتريد

وإزالة كامل هذا الكود أو الجملة

<div><p class="p1des">أكتب هنا ماتريد</p>

</div>

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

وهذا وعلى سبيل المثال الشكل الحقيقي بعد تشغيل وتركيب كود العداد رقم 1

العداد

أيام

ساعات

دقائق

ثواني

إنتهى الوقت

أكتب هنا ماتريد

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

المجموعة الأولى من العدادات

كود العداد رقم 1

<div id="container1a" dir="ltr">
<div id="table1a">
<h2 id="countertitle1">العداد</h2>
<div id="clockdiv">
<div>
	<span class="days" id="day"></span>
	<div class="smalltext1a" style="padding-top: 7px;font-size:18px;">أيام</div>
</div>
<div>
	<span class="hours" id="hour"></span>
	<div class="smalltext1a" style="padding-top: 7px;font-size:18px;">ساعات</div>
</div>
<div>
	<span class="minutes" id="minute"></span>
	<div class="smalltext1a" style="padding-top: 7px;font-size:18px;">دقائق</div>
</div>
<div>
	<span class="seconds" id="second"></span>
	<div class="smalltext1a" style="padding-top: 7px;font-size:18px;">ثواني</div>
</div>
</div>
</div>

<p id="timer1"></p>

<style>
#container1a{
	text-align: center;
font-family:Tahoma, Geneva, sans-serif;
font-weight: 100;
color:#FFF;
}
#table1a{
	height:auto;
	width:auto;
	background:linear-gradient(135deg,#4c7eb0,#512f75);
	border:solid 2px #FFF;
	padding-bottom:15px;
	border-radius:15px;
}
#countertitle1{
color: #FFF;
font-weight: 100;
font-size: 40px;
margin: 40px 0px 20px;
font-family:Tahoma, Geneva, sans-serif;
}
.p1des{
	font-size:18px;
	color:#000;
	font-family:Tahoma, Geneva, sans-serif;
}
#clockdiv{
	font-family: sans-serif;
	color: #fff;
	display: inline-block;
	font-weight: 100;
	text-align: center;
	font-size: 30px;
	font-weight:bold;
}
#clockdiv > div{
	padding: 10px;
	border-radius: 3px;
	background: #036;
	background:linear-gradient(45deg,#512f75,#036);
	display: inline-block;
	border:solid 1px #FFF;
	border-radius:20px;
}
#clockdiv > div:hover{
	padding: 10px;
	border-radius: 3px;
	background: #036;
	background:linear-gradient(45deg,#512f75,#036);
	display: inline-block;
	border:solid 1px #FFF;
	border-radius:20px;
	box-shadow:2px 2px 2px #FFF,-2px -2px 2px #fff;
}
#clockdiv div > span{
	padding: 15px;
	background: #01185e;
	display: inline-block;
	border:solid 1px #FFF;
	border-radius:10px;
}
smalltext1a{
	font-size: 16px;
}
</style>

<script>

var deadline = new Date("jul 13, 2023 15:37:25").getTime();

var x = setInterval(function() {

var now = new Date().getTime();
var t = deadline - now;
var days = Math.floor(t / (1000 * 60 * 60 * 24));
var hours = Math.floor((t%(1000 * 60 * 60 * 24))/(1000 * 60 * 60));
var minutes = Math.floor((t % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((t % (1000 * 60)) / 1000);
document.getElementById("day").innerHTML =("0" + days).slice(-2) ;
document.getElementById("hour").innerHTML =("0" + hours).slice(-2);
document.getElementById("minute").innerHTML = ("0" + minutes).slice(-2);
document.getElementById("second").innerHTML =("0" + seconds).slice(-2);
if (t < 0) {
		clearInterval(x);
		document.getElementById("timer1").innerHTML = '<h3 style="color:#fff; background:linear-gradient(#bf0208,#f79498);padding:7px;text-shadow:2px 2px 2px #787878,-1px -1px 2px #787878;" >إنتهى الوقت</h3>';
		document.getElementById("day").innerHTML ='00';
		document.getElementById("hour").innerHTML ='00';
		document.getElementById("minute").innerHTML ='00' ;
		document.getElementById("second").innerHTML = '00'; }
}, 1000);
</script>
<div><p class="p1des">أكتب هنا ماتريد</p>
</div>
</div>

كود العداد رقم 2

<div id="container1a" dir="ltr">
<div id="table1a">
<h2 id="countertitle1">العداد</h2>
<div id="clockdiv">
<div>
	<span class="days" id="day"></span>
	<div class="smalltext1a" style="padding-top: 7px;font-size:18px;">أيام</div>
</div>
<div>
	<span class="hours" id="hour"></span>
	<div class="smalltext1a" style="padding-top: 7px;font-size:18px;">ساعات</div>
</div>
<div>
	<span class="minutes" id="minute"></span>
	<div class="smalltext1a" style="padding-top: 7px;font-size:18px;">دقائق</div>
</div>
<div>
	<span class="seconds" id="second"></span>
	<div class="smalltext1a" style="padding-top: 7px;font-size:18px;">ثواني</div>
</div>
</div>
</div>

<p id="timer1"></p>

<style>
#container1a{
	text-align: center;
font-family:Tahoma, Geneva, sans-serif;
font-weight: 100;
color:#FFF;
}
#table1a{
	height:auto;
	width:auto;
	background:linear-gradient(135deg,#4c7eb0,#512f75);
	border:solid 2px #FFF;
	padding-bottom:15px;
	border-radius:15px;
}
#countertitle1{
color: #FFF;
font-weight: 100;
font-size: 40px;
margin: 40px 0px 20px;
font-family:Tahoma, Geneva, sans-serif;
}
.p1des{
	font-size:18px;
	color:#000;
	font-family:Tahoma, Geneva, sans-serif;
}
#clockdiv{
	font-family: sans-serif;
	color: #fff;
	display: inline-block;
	font-weight: 100;
	text-align: center;
	font-size: 30px;
	font-weight:bold;
}
#clockdiv > div{
	padding: 10px;
	border-radius: 3px;
	background: #036;
	background:linear-gradient(45deg,#512f75,#036);
	display: inline-block;
	border-radius:20px;
}
#clockdiv > div:hover{
	display: inline-block;
	box-shadow:-2px -2px 2px #FFF,2px 2px 2px #fff;
}
#clockdiv div > span{
	padding: 15px;
	background: #01185e;
	display: inline-block;
	border-radius:10px;
}
smalltext1a{
	font-size: 16px;
}
</style>

<script>

var deadline = new Date("jul 13, 2023 15:37:25").getTime();

var x = setInterval(function() {

var now = new Date().getTime();
var t = deadline - now;
var days = Math.floor(t / (1000 * 60 * 60 * 24));
var hours = Math.floor((t%(1000 * 60 * 60 * 24))/(1000 * 60 * 60));
var minutes = Math.floor((t % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((t % (1000 * 60)) / 1000);
document.getElementById("day").innerHTML =("0" + days).slice(-2) ;
document.getElementById("hour").innerHTML =("0" + hours).slice(-2);
document.getElementById("minute").innerHTML = ("0" + minutes).slice(-2);
document.getElementById("second").innerHTML =("0" + seconds).slice(-2);
if (t < 0) {
		clearInterval(x);
		document.getElementById("timer1").innerHTML = '<h3 style="color:#fff; background:linear-gradient(#bf0208,#f79498);padding:7px;text-shadow:2px 2px 2px #787878,-1px -1px 2px #787878;" >إنتهى الوقت</h3>';
		document.getElementById("day").innerHTML ='00';
		document.getElementById("hour").innerHTML ='00';
		document.getElementById("minute").innerHTML ='00' ;
		document.getElementById("second").innerHTML = '00'; }
}, 1000);
</script>
<div><p class="p1des">أكتب هنا ماتريد</p>
</div>
</div>

كود العداد رقم 3

<div id="container1a" dir="ltr">
<div id="table1a">
<h2 id="countertitle1">العداد</h2>
<div id="clockdiv">
<div>
	<span class="days" id="day"></span>
	<div class="smalltext1a" style="padding-top: 7px;font-size:18px;">أيام</div>
</div>
<div>
	<span class="hours" id="hour"></span>
	<div class="smalltext1a" style="padding-top: 7px;font-size:18px;">ساعات</div>
</div>
<div>
	<span class="minutes" id="minute"></span>
	<div class="smalltext1a" style="padding-top: 7px;font-size:18px;">دقائق</div>
</div>
<div>
	<span class="seconds" id="second"></span>
	<div class="smalltext1a" style="padding-top: 7px;font-size:18px;">ثواني</div>
</div>
</div>
</div>

<p id="timer1"></p>

<style>
#container1a{
	text-align: center;
font-family:Tahoma, Geneva, sans-serif;
font-weight: 100;
color:#FFF;
}
#table1a{
	height:auto;
	width:auto;
	background:linear-gradient(135deg,#4c7eb0,#512f75);
	border:solid 2px #FFF;
	padding-bottom:15px;
	border-radius:15px;
}
#countertitle1{
color: #FFF;
font-weight: 100;
font-size: 40px;
margin: 40px 0px 20px;
font-family:Tahoma, Geneva, sans-serif;
}
.p1des{
	font-size:18px;
	color:#000;
	font-family:Tahoma, Geneva, sans-serif;
}
#clockdiv{
	font-family: sans-serif;
	color: #fff;
	display: inline-block;
	font-weight: 100;
	text-align: center;
	font-size: 30px;
	font-weight:bold;
}
#clockdiv > div{
	padding: 10px;
	border-radius: 3px;
	background: #036;
	background:linear-gradient(45deg,#512f75,#036);
	display: inline-block;
	border-radius:20px;
}
#clockdiv div > span{
	padding: 15px;
	background: #01185e;
	display: inline-block;
	border-radius:50%;
}
smalltext1a{
	font-size: 16px;
}
</style>

<script>

var deadline = new Date("jul 13, 2023 15:37:25").getTime();

var x = setInterval(function() {

var now = new Date().getTime();
var t = deadline - now;
var days = Math.floor(t / (1000 * 60 * 60 * 24));
var hours = Math.floor((t%(1000 * 60 * 60 * 24))/(1000 * 60 * 60));
var minutes = Math.floor((t % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((t % (1000 * 60)) / 1000);
document.getElementById("day").innerHTML =("0" + days).slice(-2) ;
document.getElementById("hour").innerHTML =("0" + hours).slice(-2);
document.getElementById("minute").innerHTML = ("0" + minutes).slice(-2);
document.getElementById("second").innerHTML =("0" + seconds).slice(-2);
if (t < 0) {
		clearInterval(x);
		document.getElementById("timer1").innerHTML = '<h3 style="color:#fff; background:linear-gradient(#bf0208,#f79498);padding:7px;text-shadow:2px 2px 2px #787878,-1px -1px 2px #787878;" >إنتهى الوقت</h3>';
		document.getElementById("day").innerHTML ='00';
		document.getElementById("hour").innerHTML ='00';
		document.getElementById("minute").innerHTML ='00' ;
		document.getElementById("second").innerHTML = '00'; }
}, 1000);
</script>
<div><p class="p1des">أكتب هنا ماتريد</p>
</div>
</div>

كود العداد رقم 4

<div id="container1a" dir="ltr">
<div id="table1a">
<h2 id="countertitle1">العداد</h2>
<div id="clockdiv">
<div>
	<span class="days" id="day"></span>
	<div class="smalltext1a" style="padding-top: 7px;font-size:18px;">أيام</div>
</div>
<div>
	<span class="hours" id="hour"></span>
	<div class="smalltext1a" style="padding-top: 7px;font-size:18px;">ساعات</div>
</div>
<div>
	<span class="minutes" id="minute"></span>
	<div class="smalltext1a" style="padding-top: 7px;font-size:18px;">دقائق</div>
</div>
<div>
	<span class="seconds" id="second"></span>
	<div class="smalltext1a" style="padding-top: 7px;font-size:18px;">ثواني</div>
</div>
</div>
</div>

<p id="timer1"></p>

<style>
#container1a{
	text-align: center;
font-family:Tahoma, Geneva, sans-serif;
font-weight: 100;
color:#FFF;
}
#table1a{
	height:auto;
	width:auto;
	background:linear-gradient(135deg,#4c7eb0,#512f75);
	border:solid 2px #FFF;
	padding-bottom:15px;
	border-radius:15px;
}
#countertitle1{
color: #FFF;
font-weight: 100;
font-size: 40px;
margin: 40px 0px 20px;
font-family:Tahoma, Geneva, sans-serif;
}
.p1des{
	font-size:18px;
	color:#000;
	font-family:Tahoma, Geneva, sans-serif;
}
#clockdiv{
	font-family: sans-serif;
	color: #fff;
	display: inline-block;
	font-weight: 100;
	text-align: center;
	font-size: 30px;
	font-weight:bold;
}
#clockdiv > div{
	display: inline-block;
}
#clockdiv > div span:hover{
	display: inline-block;
	box-shadow:-2px -2px 2px #FFF,2px 2px 2px #fff;
}
#clockdiv div > span{
	padding: 20px;
	background: #01185e;
	display: inline-block;
	border-radius:50%;
}
smalltext1a{
	font-size: 14px;
}
</style>

<script>

var deadline = new Date("jul 13, 2023 15:37:25").getTime();

var x = setInterval(function() {

var now = new Date().getTime();
var t = deadline - now;
var days = Math.floor(t / (1000 * 60 * 60 * 24));
var hours = Math.floor((t%(1000 * 60 * 60 * 24))/(1000 * 60 * 60));
var minutes = Math.floor((t % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((t % (1000 * 60)) / 1000);
document.getElementById("day").innerHTML =("0" + days).slice(-2) ;
document.getElementById("hour").innerHTML =("0" + hours).slice(-2);
document.getElementById("minute").innerHTML = ("0" + minutes).slice(-2);
document.getElementById("second").innerHTML =("0" + seconds).slice(-2);
if (t < 0) {
		clearInterval(x);
		document.getElementById("timer1").innerHTML = '<h3 style="color:#fff; background:linear-gradient(#bf0208,#f79498);padding:7px;text-shadow:2px 2px 2px #787878,-1px -1px 2px #787878;" >إنتهى الوقت</h3>';
		document.getElementById("day").innerHTML ='00';
		document.getElementById("hour").innerHTML ='00';
		document.getElementById("minute").innerHTML ='00' ;
		document.getElementById("second").innerHTML = '00'; }
}, 1000);
</script>
<div><p class="p1des">أكتب هنا ماتريد</p>
</div>
</div>

المجموعة الثانية من العدادات

كود العداد رقم 5

<div id="container1a" dir="ltr">
<div id="table1a">
<h2 id="countertitle1">العداد</h2>
<div id="clockdiv">
<div>
	<span class="days" id="day"></span>
	<div class="smalltext1a" style="padding-top: 7px;font-size:18px;">أيام</div>
</div>
<div>
	<span class="hours" id="hour"></span>
	<div class="smalltext1a" style="padding-top: 7px;font-size:18px;">ساعات</div>
</div>
<div>
	<span class="minutes" id="minute"></span>
	<div class="smalltext1a" style="padding-top: 7px;font-size:18px;">دقائق</div>
</div>
<div>
	<span class="seconds" id="second"></span>
	<div class="smalltext1a" style="padding-top: 7px;font-size:18px;">ثواني</div>
</div>
</div>
</div>

<p id="timer1"></p>

<style>
#container1a{
	text-align: center;
font-family:Tahoma, Geneva, sans-serif;
font-weight: 100;
color:#FFF;
}
#table1a{
	height:auto;
	width:auto;
	padding-bottom:15px;
}
#countertitle1{
color: #000;
font-weight: 100;
font-size: 40px;
margin: 40px 0px 20px;
font-family:Tahoma, Geneva, sans-serif;
}
.p1des{
	font-size:18px;
	color:#000;
	font-family:Tahoma, Geneva, sans-serif;
}
#clockdiv{
	font-family: sans-serif;
	color: #fff;
	display: inline-block;
	font-weight: 100;
	text-align: center;
	font-size: 30px;
	font-weight:bold;
}
#clockdiv > div{
	padding: 10px;
	border-radius: 3px;
	background: #036;
	background:linear-gradient(45deg,#512f75,#036);
	display: inline-block;
	border-radius:20px;
}
#clockdiv div > span{
	padding: 15px;
	background: #01185e;
	display: inline-block;
	border-radius:50%;
}
smalltext1a{
	font-size: 16px;
}
</style>

<script>

var deadline = new Date("jul 13, 2023 15:37:25").getTime();

var x = setInterval(function() {

var now = new Date().getTime();
var t = deadline - now;
var days = Math.floor(t / (1000 * 60 * 60 * 24));
var hours = Math.floor((t%(1000 * 60 * 60 * 24))/(1000 * 60 * 60));
var minutes = Math.floor((t % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((t % (1000 * 60)) / 1000);
document.getElementById("day").innerHTML =("0" + days).slice(-2) ;
document.getElementById("hour").innerHTML =("0" + hours).slice(-2);
document.getElementById("minute").innerHTML = ("0" + minutes).slice(-2);
document.getElementById("second").innerHTML =("0" + seconds).slice(-2);
if (t < 0) {
		clearInterval(x);
		document.getElementById("timer1").innerHTML = '<h3 style="color:#fff; background:linear-gradient(#bf0208,#f79498);padding:7px;text-shadow:2px 2px 2px #787878,-1px -1px 2px #787878;" >إنتهى الوقت</h3>';
		document.getElementById("day").innerHTML ='00';
		document.getElementById("hour").innerHTML ='00';
		document.getElementById("minute").innerHTML ='00' ;
		document.getElementById("second").innerHTML = '00'; }
}, 1000);
</script>
<div><p class="p1des">أكتب هنا ماتريد</p>
</div>
</div>

كود العداد رقم 6

<div id="container1a" dir="ltr">
<div id="table1a">
<h2 id="countertitle1">العداد</h2>
<div id="clockdiv">
<div>
	<span class="days" id="day"></span>
	<div class="smalltext1a" style="padding-top: 7px;font-size:18px;">أيام</div>
</div>
<div>
	<span class="hours" id="hour"></span>
	<div class="smalltext1a" style="padding-top: 7px;font-size:18px;">ساعات</div>
</div>
<div>
	<span class="minutes" id="minute"></span>
	<div class="smalltext1a" style="padding-top: 7px;font-size:18px;">دقائق</div>
</div>
<div>
	<span class="seconds" id="second"></span>
	<div class="smalltext1a" style="padding-top: 7px;font-size:18px;">ثواني</div>
</div>
</div>
</div>

<p id="timer1"></p>

<style>
#container1a{
	text-align: center;
font-family:Tahoma, Geneva, sans-serif;
font-weight: 100;
color:#FFF;
}
#table1a{
	height:auto;
	width:auto;
	padding-bottom:15px;
}
#countertitle1{
color: #000;
font-weight: 100;
font-size: 40px;
margin: 40px 0px 20px;
font-family:Tahoma, Geneva, sans-serif;
}
.p1des{
	font-size:18px;
	color:#000;
	font-family:Tahoma, Geneva, sans-serif;
}
#clockdiv{
	font-family: sans-serif;
	color: #fff;
	display: inline-block;
	font-weight: 100;
	text-align: center;
	font-size: 30px;
	font-weight:bold;
	padding:0px;
}
#clockdiv > div{
	padding: 0px;
	display: inline-block;
	color:#000;
}
#clockdiv div > span{
	padding: 15px;
	background: #01185e;
	display: inline-block;
	border-radius:50%;
	color:#FFF;
}
smalltext1a{
	font-size: 16px;
}
</style>

<script>

var deadline = new Date("jul 13, 2023 15:37:25").getTime();

var x = setInterval(function() {

var now = new Date().getTime();
var t = deadline - now;
var days = Math.floor(t / (1000 * 60 * 60 * 24));
var hours = Math.floor((t%(1000 * 60 * 60 * 24))/(1000 * 60 * 60));
var minutes = Math.floor((t % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((t % (1000 * 60)) / 1000);
document.getElementById("day").innerHTML =("0" + days).slice(-2) ;
document.getElementById("hour").innerHTML =("0" + hours).slice(-2);
document.getElementById("minute").innerHTML = ("0" + minutes).slice(-2);
document.getElementById("second").innerHTML =("0" + seconds).slice(-2);
if (t < 0) {
		clearInterval(x);
		document.getElementById("timer1").innerHTML = '<h3 style="color:#fff; background:linear-gradient(#bf0208,#f79498);padding:7px;text-shadow:2px 2px 2px #787878,-1px -1px 2px #787878;" >إنتهى الوقت</h3>';
		document.getElementById("day").innerHTML ='00';
		document.getElementById("hour").innerHTML ='00';
		document.getElementById("minute").innerHTML ='00' ;
		document.getElementById("second").innerHTML = '00'; }
}, 1000);
</script>
<div><p class="p1des">أكتب هنا ماتريد</p>
</div>
</div>

كود العداد رقم 7

<div id="container1a" dir="ltr">
<div id="table1a">
<h2 id="countertitle1">العداد</h2>
<div id="clockdiv">
<div>
	<span class="days" id="day"></span>
	<div class="smalltext1a" style="padding-top: 7px;font-size:18px;">أيام</div>
</div>
<div>
	<span class="hours" id="hour"></span>
	<div class="smalltext1a" style="padding-top: 7px;font-size:18px;">ساعات</div>
</div>
<div>
	<span class="minutes" id="minute"></span>
	<div class="smalltext1a" style="padding-top: 7px;font-size:18px;">دقائق</div>
</div>
<div>
	<span class="seconds" id="second"></span>
	<div class="smalltext1a" style="padding-top: 7px;font-size:18px;">ثواني</div>
</div>
</div>
</div>

<p id="timer1"></p>

<style>
#container1a{
	text-align: center;
font-family:Tahoma, Geneva, sans-serif;
font-weight: 100;
color:#FFF;
}
#table1a{
	height:auto;
	width:auto;
	padding-bottom:15px;
}
#countertitle1{
color: #000;
font-weight: 100;
font-size: 40px;
margin: 40px 0px 20px;
font-family:Tahoma, Geneva, sans-serif;
}
.p1des{
	font-size:18px;
	color:#000;
	font-family:Tahoma, Geneva, sans-serif;
}
#clockdiv{
	font-family: sans-serif;
	color: #fff;
	display: inline-block;
	font-weight: 100;
	text-align: center;
	font-size: 30px;
	font-weight:bold;
	padding:0px;
}
#clockdiv > div{
	padding: 0px;
	display: inline-block;
	color:#000;
}
#clockdiv div > span{
	padding: 15px;
	background: #01185e;
	display: inline-block;
	border-radius:10px;
	color:#FFF;
}
smalltext1a{
	font-size: 16px;
}
</style>

<script>

var deadline = new Date("jul 13, 2023 15:37:25").getTime();

var x = setInterval(function() {

var now = new Date().getTime();
var t = deadline - now;
var days = Math.floor(t / (1000 * 60 * 60 * 24));
var hours = Math.floor((t%(1000 * 60 * 60 * 24))/(1000 * 60 * 60));
var minutes = Math.floor((t % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((t % (1000 * 60)) / 1000);
document.getElementById("day").innerHTML =("0" + days).slice(-2) ;
document.getElementById("hour").innerHTML =("0" + hours).slice(-2);
document.getElementById("minute").innerHTML = ("0" + minutes).slice(-2);
document.getElementById("second").innerHTML =("0" + seconds).slice(-2);
if (t < 0) {
		clearInterval(x);
		document.getElementById("timer1").innerHTML = '<h3 style="color:#fff; background:linear-gradient(#bf0208,#f79498);padding:7px;text-shadow:2px 2px 2px #787878,-1px -1px 2px #787878;" >إنتهى الوقت</h3>';
		document.getElementById("day").innerHTML ='00';
		document.getElementById("hour").innerHTML ='00';
		document.getElementById("minute").innerHTML ='00' ;
		document.getElementById("second").innerHTML = '00'; }
}, 1000);
</script>
<div><p class="p1des">أكتب هنا ماتريد</p>
</div>
</div>

كود العداد رقم 8

<div id="container1a" dir="ltr">
<div id="table1a">
<h2 id="countertitle1">العداد</h2>
<div id="clockdiv">
<div>
	<span class="days" id="day"></span>
	<div class="smalltext1a" style="padding-top: 7px;font-size:18px;">أيام</div>
</div>
<div>
	<span class="hours" id="hour"></span>
	<div class="smalltext1a" style="padding-top: 7px;font-size:18px;">ساعات</div>
</div>
<div>
	<span class="minutes" id="minute"></span>
	<div class="smalltext1a" style="padding-top: 7px;font-size:18px;">دقائق</div>
</div>
<div>
	<span class="seconds" id="second"></span>
	<div class="smalltext1a" style="padding-top: 7px;font-size:18px;">ثواني</div>
</div>
</div>
</div>

<p id="timer1"></p>

<style>
#container1a{
	text-align: center;
font-family:Tahoma, Geneva, sans-serif;
font-weight: 100;
color:#FFF;
}
#table1a{
	height:auto;
	width:auto;
	padding-bottom:15px;
}
#countertitle1{
color: #000;
font-weight: 100;
font-size: 40px;
margin: 40px 0px 20px;
font-family:Tahoma, Geneva, sans-serif;
}
.p1des{
	font-size:18px;
	color:#000;
	font-family:Tahoma, Geneva, sans-serif;
}
#clockdiv{
	font-family: sans-serif;
	color: #fff;
	display: inline-block;
	font-weight: 100;
	text-align: center;
	font-size: 30px;
	font-weight:bold;
	padding:1px;
}
#clockdiv > div{
	padding: 0px;
	display: inline-block;
	color:#000;
}
#clockdiv div > span{
	padding: 15px;
	background: #01185e;
	display: inline-block;
	border-radius:2px;
	color:#FFF;
}
smalltext1a{
	font-size: 16px;
}
</style>

<script>

var deadline = new Date("jul 13, 2023 15:37:25").getTime();

var x = setInterval(function() {

var now = new Date().getTime();
var t = deadline - now;
var days = Math.floor(t / (1000 * 60 * 60 * 24));
var hours = Math.floor((t%(1000 * 60 * 60 * 24))/(1000 * 60 * 60));
var minutes = Math.floor((t % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((t % (1000 * 60)) / 1000);
document.getElementById("day").innerHTML =("0" + days).slice(-2) ;
document.getElementById("hour").innerHTML =("0" + hours).slice(-2);
document.getElementById("minute").innerHTML = ("0" + minutes).slice(-2);
document.getElementById("second").innerHTML =("0" + seconds).slice(-2);
if (t < 0) {
		clearInterval(x);
		document.getElementById("timer1").innerHTML = '<h3 style="color:#fff; background:linear-gradient(#bf0208,#f79498);padding:7px;text-shadow:2px 2px 2px #787878,-1px -1px 2px #787878;" >إنتهى الوقت</h3>';
		document.getElementById("day").innerHTML ='00';
		document.getElementById("hour").innerHTML ='00';
		document.getElementById("minute").innerHTML ='00' ;
		document.getElementById("second").innerHTML = '00'; }
}, 1000);
</script>
<div><p class="p1des">أكتب هنا ماتريد</p>
</div>
</div>

وأما في حالة أردت عداد مخصص به خانة الأيام 3 خانات في حالة كان العرض أو الحدث على سبيل المثال يتخطى أيامه للعد عن 99 يوم فهذا العداد المخصص يمكنه العد بشكل صحيح بدون أية مشاكل حتى 999 يوم وهذا كافي جداً في بعض الحالات النادرة التي قد تحتاج لعداد به عدد أيام للعد تتخطى 99 يوم ويمكنك الحصول على كود هذا العداد أسفله وهو كود العداد رقم 9

كود العداد رقم 9

<div id="container1a" dir="ltr">
<div id="table1a">
<h2 id="countertitle1">العداد</h2>
<div id="clockdiv">
<div>
	<span class="days" id="day"></span>
	<div class="smalltext1a" style="padding-top: 7px;font-size:18px;">أيام</div>
</div>
<div>
	<span class="hours" id="hour"></span>
	<div class="smalltext1a" style="padding-top: 7px;font-size:18px;">ساعات</div>
</div>
<div>
	<span class="minutes" id="minute"></span>
	<div class="smalltext1a" style="padding-top: 7px;font-size:18px;">دقائق</div>
</div>
<div>
	<span class="seconds" id="second"></span>
	<div class="smalltext1a" style="padding-top: 7px;font-size:18px;">ثواني</div>
</div>
</div>
</div>

<p id="timer1"></p>

<style>
#container1a{
	text-align: center;
font-family:Tahoma, Geneva, sans-serif;
font-weight: 100;
color:#FFF;
}
#table1a{
	height:auto;
	width:auto;
	background:linear-gradient(135deg,#4c7eb0,#512f75);
	border:solid 2px #FFF;
	padding-bottom:15px;
	border-radius:15px;
}
#countertitle1{
color: #FFF;
font-weight: 100;
font-size: 40px;
margin: 40px 0px 20px;
font-family:Tahoma, Geneva, sans-serif;
}
.p1des{
	font-size:18px;
	color:#000;
	font-family:Tahoma, Geneva, sans-serif;
}
#clockdiv{
	font-family: sans-serif;
	color: #fff;
	display: inline-block;
	font-weight: 100;
	text-align: center;
	font-size: 30px;
	font-weight:bold;
}
#clockdiv > div{
	padding: 10px;
	border-radius: 3px;
	background: #036;
	background:linear-gradient(45deg,#512f75,#036);
	display: inline-block;
	border:solid 1px #FFF;
	border-radius:20px;
}
#clockdiv > div:hover{
	padding: 10px;
	border-radius: 3px;
	background: #036;
	background:linear-gradient(45deg,#512f75,#036);
	display: inline-block;
	border:solid 1px #FFF;
	border-radius:20px;
	box-shadow:2px 2px 2px #FFF,-2px -2px 2px #fff;
}
#clockdiv div > span{
	padding: 15px;
	background: #01185e;
	display: inline-block;
	border:solid 1px #FFF;
	border-radius:10px;
}
smalltext1a{
	font-size: 16px;
}
</style>

<script>

var deadline = new Date("aug 13, 2024 15:37:25").getTime();

var x = setInterval(function() {

var now = new Date().getTime();
var t = deadline - now;
var days = Math.floor(t / (1000 * 60 * 60 * 24));
var hours = Math.floor((t%(1000 * 60 * 60 * 24))/(1000 * 60 * 60));
var minutes = Math.floor((t % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((t % (1000 * 60)) / 1000);
document.getElementById("day").innerHTML =("0" + days).slice(-3) ;
document.getElementById("hour").innerHTML =("0" + hours).slice(-2);
document.getElementById("minute").innerHTML = ("0" + minutes).slice(-2);
document.getElementById("second").innerHTML =("0" + seconds).slice(-2);
if (t < 0) {
		clearInterval(x);
		document.getElementById("timer1").innerHTML = '<h3 style="color:#fff; background:linear-gradient(#bf0208,#f79498);padding:7px;text-shadow:2px 2px 2px #787878,-1px -1px 2px #787878;" >إنتهى الوقت</h3>';
		document.getElementById("day").innerHTML ='000';
		document.getElementById("hour").innerHTML ='00';
		document.getElementById("minute").innerHTML ='00' ;
		document.getElementById("second").innerHTML = '00'; }
}, 1000);
</script>
<div><p class="p1des">أكتب هنا ماتريد</p>
</div>
</div>

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

وعلى كل حال الأمر بسيط ويمكن عمله على أي كود عداد من الأكواد أعلاه فقط عليك البحث عن الجملة

var deadline = new Date("jul 13, 2023 15:37:25").getTime();

وإستبداله بالكود التالي

var deadline = new Date().setSeconds(new Date().getSeconds() + 1234);

مع تغيير الرقم

1234

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

الخلاصة

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

كود عداد العروض والخصومات المؤقتة والمسابقات والجيفاوي لأصحاب المواقع والمتاجر وكتاب المقالات

العداد

إنتهى الوقت

المجموعة الأولى من العدادات

المجموعة الثانية من العدادات

الأقسام

تقنية

تطوير مواقع

شرح برامج

طرق ومواقع

ووردبريس

التعليقات

تابعنا على مواقع التواصل الإجتماعي

Contact form

كود عداد العروض والخصومات المؤقتة والمسابقات والجيفاوي لأصحاب المواقع والمتاجر وكتاب المقالات

العداد

إنتهى الوقت

المجموعة الأولى من العدادات

المجموعة الثانية من العدادات

المزيد من المقالات

الأقسام

تقنية

تطوير مواقع

شرح برامج

طرق ومواقع

ووردبريس

التعليقات

تابعنا على مواقع التواصل الإجتماعي

Contact form