مدونة هلا تك

أضافة كم يوم باقي على راس السنة

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

اضافة مميزة لمعرفة الباقي لراس السنة

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

شرح التركيب

الدخول لمدونتك و الذهاب الى التنسيق
اضافة اداة جديدة و ليكن بالسيد بار مثلا
اختيار ~~HTML/javaScript~~
لصق الاكواد بداخلها مع اختيار اسم مناسب
قم بالحفظ

الكود الخاص بالأضافة

<!doctype html>
<style>
.widget-content {
text-align: center;
}
.widget-content img {
display: block;
position: relative;
max-width: 100%;
height: auto;
margin: 0 auto;
}
#countdown {
font-size: 20px;

display: inline-block;

}
#HTML4 {
padding: 20px 20px 30px;
background: var(--contentB);
box-shadow: 0 5px 35px rgba(0, 0, 0, .07);
border-radius: 10px;
}
</style>

<img src='https://i.imgur.com/xEd1SbF.png'/>


<div class="countdown-container">
<p id="countdown"></p>
</div>

<script>
// تحديد تاريخ رأس السنة
const newYear = new Date('January 1, 2025 00:00:00').getTime();

// تحديث العد كل ثانية
const countdownInterval = setInterval(function() {
const now = new Date().getTime();
const timeLeft = newYear - now;

// حساب الأيام والساعات والدقائق والثواني
const days = Math.floor(timeLeft / (1000 * 60 * 60 * 24));
const hours = Math.floor((timeLeft % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
const minutes = Math.floor((timeLeft % (1000 * 60 * 60)) / (1000 * 60));
const seconds = Math.floor((timeLeft % (1000 * 60)) / 1000);

// عرض النتيجة في العنصر HTML
document.getElementById('countdown').innerHTML = `${days} يوم و ${hours} ساعة و ${minutes} دقيقة و ${seconds} ثانية`;

// إيقاف العد بعد الوصول لرأس السنة
if (timeLeft < 0) {
clearInterval(countdownInterval);
document.getElementById('countdown').innerHTML = "كل عام وأنتم بخير! 🎉";
}
}, 1000);
</script>

</!doctype>

يمكن معاينتها على القالب الخاص بي وشكرا

وفي الختام !

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