كيف تُضيف زينة رمضان على موقعك الإلكتروني؟ فوانيس ونجوم وهلال عائم بالكود الجاهز
📁 أحدث الأخبار التقنية
0

كيف تُضيف زينة رمضان على موقعك الإلكتروني؟ فوانيس ونجوم وهلال عائم بالكود الجاهز

مصطفى أمان مصطفى أمان
أضف تأثير زينة شهر رمضان إلى موقعك مجانًا

أضف تأثير زينة شهر رمضان إلى موقعك مجانًا

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

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


🌙 ما هي زينة رمضان للمواقع الإلكترونية؟

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

  • فوانيس رمضان المتأرجحة: عناصر مرئية تحاكي شكل الفوانيس التقليدية وتتأرجح بحركة طبيعية.
  • النجوم والهلال: رموز رمضانية متساقطة أو عائمة على الشاشة.
  • سلاسل الأضواء الملوّنة: أضواء زينة متلألئة تُعلَّق في أعلى الصفحة.
  • بانر التهنئة: شريط علوي يحمل رسالة تهنئة بالشهر الكريم.
  • تأثيرات تفاعلية: مثل ظهور رسائل عند النقر على عناصر معيّنة.

تُبنى هذه التأثيرات باستخدام تقنيات الويب الأساسية الثلاث: HTML لبناء العناصر، وCSS لتنسيقها وتحريكها، وJavaScript لإضافة التفاعلية والديناميكية. والميزة الكبرى أنّها لا تتطلب أي مكتبات خارجية أو إضافات ثقيلة.

🎯 لماذا تُضيف زينة رمضان إلى موقعك؟

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

الفائدة التفصيل
تعزيز التفاعل التأثيرات البصرية تجذب انتباه الزائر وتُشجّعه على استكشاف الموقع لفترة أطول.
بناء الهوية مشاركة الأجواء الرمضانية تُظهر اهتمام صاحب الموقع بجمهوره وثقافتهم.
تقليل معدل الارتداد المفاجآت البصرية تدفع الزوار للبقاء والتفاعل بدلاً من المغادرة الفورية.
المشاركة الاجتماعية المواقع المزيّنة قد يُشاركها الزوّار مع أصدقائهم كنوع من المحتوى المميّز.
تطوير المهارات فرصة ممتازة لتعلّم وتطبيق مهارات CSS Animations وJavaScript DOM.

وقد اعتادت الشركات التقنية الكبرى مثل Google وMicrosoft على تغيير واجهاتها خلال المناسبات المختلفة، وهو ما يُعرف بـ Seasonal UI Design. فإذا كنت صاحب مدوّنة أو موقع إلكتروني عربي، فإنّ رمضان هو أنسب مناسبة للبدء بهذه الممارسة.

🏮 مكوّنات زينة رمضان التي سنبنيها

في هذا الدليل، سنبني معًا خمسة تأثيرات رمضانية متكاملة تعمل بانسجام تام فيما بينها. دعني أعرّفك على كل مكوّن وما يفعله قبل أن نبدأ بالكود:

  1. بانر التهنئة العلوي: شريط ثابت في أعلى الصفحة يعرض رسالة "رمضان كريم" مع إمكانية إغلاقه. يستخدم تدرّجًا لونيًا بنفسجيًا مع نص ذهبي.
  2. خمسة فوانيس متأرجحة: فوانيس بألوان مختلفة (أحمر، أخضر، بنفسجي، برتقالي، أزرق) معلّقة بحبال من أعلى الصفحة وتتأرجح بحركة واقعية.
  3. سلسلة أضواء زينة: سلك مموّج يتدلّى منه مصابيح صغيرة ملوّنة تتلألأ بتناوب جميل.
  4. نجوم متساقطة: نجوم ذهبية بأحجام مختلفة تتساقط برفق من أعلى الشاشة إلى أسفلها بشكل مستمر.
  5. هلال عائم تفاعلي: رمز هلال يطفو في زاوية الشاشة، وعند النقر عليه تظهر رسالة تهنئة عشوائية.
💡 ملاحظة: جميع هذه التأثيرات مبنية بـ CSS وJavaScript بدون أي مكتبات خارجية. هذا يعني أنّها خفيفة جدًا ولن تؤثر سلبًا على سرعة تحميل موقعك.

⚙️ المتطلبات الأساسية قبل البدء

قبل أن نبدأ بإضافة الكود، تأكّد من توفّر المتطلبات التالية لتضمن تجربة سلسة بدون مشاكل:

  • مدوّنة على بلوجر: أو أي منصة تتيح تعديل كود HTML للقالب مباشرة.
  • صلاحية تعديل القالب: يجب أن تكون مالك المدوّنة أو لديك صلاحية المشرف.
  • نسخة احتياطية: دائمًا خذ نسخة من القالب قبل أي تعديل، لتتمكّن من التراجع عند الحاجة.
  • معرفة أساسية بـ HTML: لست بحاجة لأن تكون محترفًا، لكن يجب أن تعرف كيفية الوصول لمحرّر القالب ولصق الكود.

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

⚠️ تحذير مهم: قبل تعديل قالب مدوّنتك، اذهب إلى المظهر ← النسخ الاحتياطي وحمّل نسخة من القالب الحالي. هذه الخطوة ضرورية لحماية موقعك من أي خطأ غير متوقّع.

📝 الدليل التطبيقي خطوة بخطوة

الآن، دعنا نبدأ بالجزء العملي. سأشرح كل جزء من الكود بالتفصيل حتى تفهم وظيفة كل سطر، ممّا يُمكّنك من تعديله وتخصيصه لاحقًا حسب ذوقك واحتياجاتك. ينقسم الكود إلى ثلاثة أجزاء رئيسية: CSS للتنسيقات، وHTML للعناصر المرئية، وJavaScript للتفاعلية.

الخطوة 1: كود CSS - التنسيقات والحركات

كود CSS هو المسؤول عن شكل الزينة وحركتها. يتضمّن تنسيقات البانر العلوي، وشكل الفوانيس، وتأثير التأرجح، وحركة النجوم المتساقطة، والهلال العائم. لنستعرض كل جزء:

أولاً: تنسيق بانر التهنئة

البانر يكون ثابتًا في أعلى الصفحة باستخدام position: fixed، مع تدرّج لوني بنفسجي غامق وحدود ذهبية سفلية:

/* ===== بانر رمضان العلوي ===== */
.ramadan-banner {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: linear-gradient(135deg, #1a0533, #2d0a4e, #0c1445);
  color: #fff;
  text-align: center;
  padding: 12px 20px;
  z-index: 99999;
  font-family: 'Tajawal', 'Cairo', sans-serif;
  box-shadow: 0 4px 15px rgba(0,0,0,0.3);
  direction: rtl;
  border-bottom: 2px solid #f4c542;
}

.ramadan-banner h3 {
  margin: 0;
  font-size: 20px;
  color: #f4c542;
  text-shadow: 0 0 10px rgba(244, 197, 66, 0.5);
}

.ramadan-banner p {
  margin: 4px 0 0;
  font-size: 13px;
  color: #e0d5f5;
}

.ramadan-banner .close-banner {
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: 1px solid #f4c542;
  color: #f4c542;
  border-radius: 50%;
  width: 28px;
  height: 28px;
  cursor: pointer;
  font-size: 16px;
  line-height: 26px;
  transition: all 0.3s;
}

.ramadan-banner .close-banner:hover {
  background: #f4c542;
  color: #1a0533;
}

لاحظ استخدام z-index: 99999 لضمان ظهور البانر فوق جميع عناصر الصفحة الأخرى، واستخدام text-shadow لإضفاء توهّج ذهبي على النص.

ثانيًا: تنسيق الفوانيس المعلّقة

الفوانيس تتكوّن من عدّة أجزاء: الحبل، والغطاء العلوي، وجسم الفانوس، والقاعدة السفلية، وتأثير التوهّج. تأثير التأرجح يتمّ عبر @keyframes مع transform-origin: top center ليكون محور الدوران من الأعلى كفانوس حقيقي:

/* ===== الفوانيس المعلقة ===== */
.lantern-container {
  position: fixed;
  top: -10px;
  z-index: 99998;
  pointer-events: none;
}

.lantern {
  animation: lanternSwing 3s ease-in-out infinite;
  transform-origin: top center;
}

.lantern-rope {
  width: 2px;
  background: #f4c542;
  margin: 0 auto;
}

.lantern-body {
  width: 40px;
  height: 55px;
  border-radius: 8px 8px 50% 50%;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
  box-shadow: 0 0 20px rgba(244, 197, 66, 0.4);
}

.lantern-body::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: repeating-linear-gradient(
    0deg, transparent, transparent 8px,
    rgba(0,0,0,0.15) 8px, rgba(0,0,0,0.15) 10px
  );
}

.lantern-cap {
  width: 30px;
  height: 8px;
  background: #f4c542;
  margin: 0 auto;
  border-radius: 3px 3px 0 0;
}

.lantern-bottom {
  width: 20px;
  height: 6px;
  background: #f4c542;
  margin: 0 auto;
  border-radius: 0 0 50% 50%;
}

.lantern-glow {
  position: absolute;
  bottom: -15px;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 30px;
  background: radial-gradient(ellipse,
    rgba(244, 197, 66, 0.3), transparent);
  pointer-events: none;
}

/* ألوان الفوانيس الخمسة */
.lantern-1 .lantern-body {
  background: linear-gradient(180deg, #e74c3c, #c0392b);
}
.lantern-2 .lantern-body {
  background: linear-gradient(180deg, #2ecc71, #27ae60);
}
.lantern-3 .lantern-body {
  background: linear-gradient(180deg, #9b59b6, #8e44ad);
}
.lantern-4 .lantern-body {
  background: linear-gradient(180deg, #e67e22, #d35400);
}
.lantern-5 .lantern-body {
  background: linear-gradient(180deg, #3498db, #2980b9);
}

/* حركة التأرجح */
@keyframes lanternSwing {
  0%, 100% { transform: rotate(-5deg); }
  50% { transform: rotate(5deg); }
}

الخاصية pointer-events: none مهمة جدًا لأنّها تمنع الفوانيس من اعتراض نقرات المستخدم على عناصر الصفحة الأصلية التي قد تكون خلفها.

ثالثًا: تنسيق النجوم والهلال وسلسلة الأضواء

/* ===== النجوم المتساقطة ===== */
.ramadan-star {
  position: fixed;
  color: #f4c542;
  pointer-events: none;
  z-index: 99997;
  animation: starFall linear forwards;
  text-shadow: 0 0 6px rgba(244, 197, 66, 0.8);
}

@keyframes starFall {
  0% {
    opacity: 1;
    transform: translateY(0) rotate(0deg);
  }
  100% {
    opacity: 0;
    transform: translateY(100vh) rotate(360deg);
  }
}

/* ===== الهلال العائم ===== */
.floating-crescent {
  position: fixed;
  bottom: 30px;
  left: 30px;
  font-size: 50px;
  z-index: 99998;
  animation: floatCrescent 4s ease-in-out infinite;
  cursor: pointer;
  text-shadow: 0 0 20px rgba(244, 197, 66, 0.6);
  transition: transform 0.3s;
  pointer-events: auto;
}

.floating-crescent:hover {
  transform: scale(1.2);
}

@keyframes floatCrescent {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-15px); }
}

/* ===== سلسلة الأضواء ===== */
.string-lights {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 40px;
  z-index: 99996;
  pointer-events: none;
  overflow: hidden;
}

.light-bulb {
  position: absolute;
  top: 0;
  width: 12px;
  height: 18px;
  border-radius: 50%;
  animation: glowPulse 2s ease-in-out infinite alternate;
  box-shadow: 0 0 8px currentColor;
}

.light-bulb::before {
  content: '';
  position: absolute;
  top: -4px;
  left: 50%;
  transform: translateX(-50%);
  width: 6px;
  height: 6px;
  background: #888;
  border-radius: 2px;
}

@keyframes glowPulse {
  0% { opacity: 0.5; }
  100% { opacity: 1; }
}

/* ===== المسافة العلوية والتجاوب ===== */
body.ramadan-active {
  padding-top: 70px !important;
}

@media (max-width: 768px) {
  .ramadan-banner h3 { font-size: 16px; }
  .ramadan-banner p { font-size: 11px; }
  .lantern-body { width: 28px; height: 40px; }
  .lantern-cap { width: 22px; }
  .floating-crescent {
    font-size: 35px;
    bottom: 20px;
    left: 20px;
  }
}

لاحظ الاهتمام بالتجاوب مع الشاشات الصغيرة عبر @media (max-width: 768px)، حيث تصغر أحجام الفوانيس والهلال لتتناسب مع شاشات الهواتف. هذا مهم جدًا لتجنّب مشاكل العرض على الأجهزة المحمولة، وهو مبدأ أساسي في التصميم المتجاوب (Responsive Design).

الخطوة 2: كود HTML - العناصر المرئية

بعد أن جهّزنا التنسيقات، نحتاج الآن لبناء العناصر الفعلية التي ستظهر على الصفحة. يتضمّن كود HTML البانر العلوي، والفوانيس الخمسة بمواقع مختلفة، وحاوية سلسلة الأضواء، والهلال العائم:

<!-- بانر رمضان -->
<div class="ramadan-banner" id="ramadanBanner">
  <button class="close-banner"
    onclick="closeBanner()">✕</button>
  <h3>🌙 رمضان كريم 🌙</h3>
  <p>كل عام وأنتم بخير • أعاده الله
    علينا وعليكم بالخير واليُمن والبركات</p>
</div>

<!-- الفانوس الأول - أحمر -->
<div class="lantern-container lantern-1"
  style="right: 5%;">
  <div class="lantern"
    style="animation-delay: 0s;">
    <div class="lantern-rope"
      style="height: 40px;"></div>
    <div class="lantern-cap"></div>
    <div class="lantern-body"></div>
    <div class="lantern-bottom"></div>
    <div class="lantern-glow"></div>
  </div>
</div>

<!-- الفانوس الثاني - أخضر -->
<div class="lantern-container lantern-2"
  style="right: 25%;">
  <div class="lantern"
    style="animation-delay: 0.5s;">
    <div class="lantern-rope"
      style="height: 55px;"></div>
    <div class="lantern-cap"></div>
    <div class="lantern-body"></div>
    <div class="lantern-bottom"></div>
    <div class="lantern-glow"></div>
  </div>
</div>

<!-- الفانوس الثالث - بنفسجي -->
<div class="lantern-container lantern-3"
  style="right: 50%;">
  <div class="lantern"
    style="animation-delay: 1s;">
    <div class="lantern-rope"
      style="height: 35px;"></div>
    <div class="lantern-cap"></div>
    <div class="lantern-body"></div>
    <div class="lantern-bottom"></div>
    <div class="lantern-glow"></div>
  </div>
</div>

<!-- الفانوس الرابع - برتقالي -->
<div class="lantern-container lantern-4"
  style="right: 75%;">
  <div class="lantern"
    style="animation-delay: 1.5s;">
    <div class="lantern-rope"
      style="height: 50px;"></div>
    <div class="lantern-cap"></div>
    <div class="lantern-body"></div>
    <div class="lantern-bottom"></div>
    <div class="lantern-glow"></div>
  </div>
</div>

<!-- الفانوس الخامس - أزرق -->
<div class="lantern-container lantern-5"
  style="right: 92%;">
  <div class="lantern"
    style="animation-delay: 2s;">
    <div class="lantern-rope"
      style="height: 45px;"></div>
    <div class="lantern-cap"></div>
    <div class="lantern-body"></div>
    <div class="lantern-bottom"></div>
    <div class="lantern-glow"></div>
  </div>
</div>

<!-- سلسلة الأضواء -->
<div class="string-lights" id="stringLights">
  <svg class="light-wire"
    viewBox="0 0 1000 20"
    preserveAspectRatio="none">
    <path d="M0,5 Q50,18 100,5 Q150,18 200,5
      Q250,18 300,5 Q350,18 400,5 Q450,18 500,5
      Q550,18 600,5 Q650,18 700,5 Q750,18 800,5
      Q850,18 900,5 Q950,18 1000,5"
      stroke="#555" stroke-width="1.5"
      fill="none"/>
  </svg>
</div>

<!-- الهلال العائم -->
<div class="floating-crescent"
  id="floatingCrescent"
  title="رمضان كريم 🌙">
  🌙
</div>

لاحظ كيف أنّ كل فانوس يتمّ التحكم في موقعه الأفقي عبر خاصية right بنسب مئوية مختلفة (5%، 25%، 50%، 75%، 92%)، وفي طول حبله عبر ارتفاع .lantern-rope، ممّا يُعطي مظهرًا طبيعيًا غير متماثل. كذلك، animation-delay يجعل كل فانوس يبدأ تأرجحه في وقت مختلف.

أمّا سلك الأضواء فيُرسم باستخدام SVG Path مع أوامر Q (Quadratic Bézier Curves) لإنتاج شكل مموّج واقعي يشبه سلك الزينة الحقيقي.

الخطوة 3: كود JavaScript - التفاعلية والحركة

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

<script>
//<![CDATA[
(function() {
  // تفعيل المسافة العلوية للمدونة
  document.body.classList.add('ramadan-active');

  // ===== وظيفة إغلاق البانر =====
  window.closeBanner = function() {
    var banner =
      document.getElementById('ramadanBanner');
    banner.style.transition = 'all 0.5s ease';
    banner.style.transform = 'translateY(-100%)';
    banner.style.opacity = '0';
    setTimeout(function() {
      banner.style.display = 'none';
      document.body.style.paddingTop = '0px';
    }, 500);
  };

  // ===== توليد سلسلة الأضواء =====
  var lightsContainer =
    document.getElementById('stringLights');
  var colors = [
    '#e74c3c', '#f4c542', '#2ecc71', '#3498db',
    '#e67e22', '#9b59b6', '#1abc9c', '#f39c12'
  ];
  var lightCount =
    Math.floor(window.innerWidth / 55);

  for (var i = 0; i < lightCount; i++) {
    var bulb = document.createElement('div');
    bulb.className = 'light-bulb';
    var color = colors[i % colors.length];
    bulb.style.backgroundColor = color;
    bulb.style.color = color;
    bulb.style.left =
      ((i + 0.5) / lightCount * 100) + '%';
    bulb.style.top =
      (Math.sin((i / lightCount) *
      Math.PI * (lightCount / 5))
      * 12 + 10) + 'px';
    bulb.style.animationDelay =
      (i * 0.15) + 's';
    lightsContainer.appendChild(bulb);
  }

  // ===== توليد النجوم المتساقطة =====
  var starSymbols =
    ['✦', '✧', '⭐', '★', '☆', '✨'];

  function createStar() {
    var star = document.createElement('div');
    star.className = 'ramadan-star';
    star.textContent = starSymbols[
      Math.floor(Math.random() *
      starSymbols.length)
    ];
    star.style.left =
      Math.random() * 100 + 'vw';
    star.style.top = '-20px';
    star.style.fontSize =
      (Math.random() * 16 + 10) + 'px';
    var duration = Math.random() * 5 + 5;
    star.style.animationDuration =
      duration + 's';
    document.body.appendChild(star);

    setTimeout(function() {
      if (star.parentNode)
        star.parentNode.removeChild(star);
    }, duration * 1000);
  }

  // إنشاء نجمة جديدة كل 800 مللي ثانية
  setInterval(createStar, 800);

  // ===== تفاعل الهلال العائم =====
  document.getElementById('floatingCrescent')
    .addEventListener('click', function() {
    var messages = [
      'رمضان كريم! 🌙',
      'كل عام وأنتم بخير ✨',
      'اللهم بلّغنا رمضان 🤲',
      'شهر الخير والبركة 🕌',
      'اللهم تقبل منا الصيام والقيام 🌟',
      'رمضان مبارك عليكم 🎉'
    ];
    var msg = messages[
      Math.floor(Math.random() *
      messages.length)
    ];

    var popup = document.createElement('div');
    popup.textContent = msg;
    popup.style.cssText =
      'position:fixed;bottom:90px;left:30px;' +
      'background:linear-gradient(135deg,' +
      '#1a0533,#2d0a4e);color:#f4c542;' +
      'padding:12px 20px;border-radius:12px;' +
      'font-family:Tajawal,Cairo,sans-serif;' +
      'font-size:16px;z-index:999999;' +
      'box-shadow:0 5px 20px rgba(0,0,0,0.3);' +
      'border:1px solid #f4c542;' +
      'animation:fadeInUp 0.5s ease;' +
      'direction:rtl;';

    var style = document.createElement('style');
    style.textContent =
      '@keyframes fadeInUp{' +
      'from{opacity:0;' +
      'transform:translateY(20px)}' +
      'to{opacity:1;' +
      'transform:translateY(0)}}';
    document.head.appendChild(style);

    document.body.appendChild(popup);
    setTimeout(function() {
      popup.style.transition = 'all 0.5s ease';
      popup.style.opacity = '0';
      popup.style.transform =
        'translateY(-20px)';
      setTimeout(function() {
        if (popup.parentNode)
          popup.parentNode.removeChild(popup);
      }, 500);
    }, 3000);
  });

})();
//]]>
</script>
💡 ملاحظة تقنية: لاحظ استخدام //<![CDATA[ و //]]> حول كود JavaScript. هذا ضروري في بلوجر لأنّ القالب يُعالَج كملف XML، وبدون CDATA ستُسبّب علامة < في حلقات for خطأ SAXParseException.

دعنا نُفصّل ما يفعله كل جزء من الكود:

  • إغلاق البانر: عند النقر على زر الإغلاق، يتحرّك البانر للأعلى ويختفي تدريجيًا، ثمّ تُزال المسافة العلوية الإضافية.
  • سلسلة الأضواء: يحسب عدد المصابيح بناءً على عرض الشاشة (مصباح كل 55 بكسل)، ويوزّعها بشكل مموّج باستخدام دالة Math.sin().
  • النجوم: تُنشأ نجمة جديدة كل 800 مللي ثانية بموقع وحجم عشوائيين، وتُحذف تلقائيًا بعد انتهاء حركتها لمنع تراكم العناصر في DOM.
  • الهلال: عند النقر يعرض رسالة عشوائية من مصفوفة الرسائل، تظهر بحركة انزلاقية وتختفي بعد 3 ثوانٍ.

الخطوة 4: إضافة الكود إلى بلوجر

الآن بعد أن فهمنا كل جزء من الكود، حان وقت إضافته إلى مدوّنتك على بلوجر. اتبع الخطوات التالية بدقة:

  1. سجّل الدخول إلى لوحة تحكم بلوجر (blogger.com).
  2. اختر مدوّنتك من القائمة.
  3. من القائمة الجانبية، انقر على "المظهر" (Theme).
  4. انقر على السهم بجانب زر "تخصيص" واختر "تعديل HTML".
  5. قبل أي تعديل، انقر على أيقونة التنزيل لأخذ نسخة احتياطية من القالب.
  6. استخدم اختصار Ctrl + F (أو Cmd + F في ماك) للبحث عن الوسم </body>.
  7. الصق الكود الكامل (CSS + HTML + JavaScript) مباشرة قبل وسم </body>.
  8. انقر على زر "حفظ" (أيقونة القرص المرن) في أعلى المحرّر.
  9. افتح مدوّنتك في نافذة جديدة وتحقّق من ظهور الزينة بشكل صحيح.
⚠️ تنبيه: إذا ظهرت رسالة خطأ عند الحفظ مثل SAXParseException، فتأكّد من وجود //<![CDATA[ بعد وسم <script> مباشرة، و //]]> قبل وسم </script>. هذا الغلاف ضروري لمنع محلّل XML في بلوجر من تفسير رموز JavaScript كوسوم HTML.

📋 الكود الكامل جاهز للنسخ

إذا كنت تُفضّل نسخ الكود كاملاً دفعة واحدة بدلاً من تجميعه من الأجزاء السابقة، فإليك الكود النهائي المتكامل. انسخه والصقه قبل وسم </body> في قالب بلوجر:

<!-- ===== زينة رمضان - الكود الكامل ===== -->
<style>
.ramadan-banner {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: linear-gradient(135deg,
    #1a0533, #2d0a4e, #0c1445);
  color: #fff;
  text-align: center;
  padding: 12px 20px;
  z-index: 99999;
  font-family: 'Tajawal', 'Cairo', sans-serif;
  box-shadow: 0 4px 15px rgba(0,0,0,0.3);
  direction: rtl;
  border-bottom: 2px solid #f4c542;
}
.ramadan-banner h3 {
  margin: 0;
  font-size: 20px;
  color: #f4c542;
  text-shadow: 0 0 10px
    rgba(244, 197, 66, 0.5);
}
.ramadan-banner p {
  margin: 4px 0 0;
  font-size: 13px;
  color: #e0d5f5;
}
.ramadan-banner .close-banner {
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: 1px solid #f4c542;
  color: #f4c542;
  border-radius: 50%;
  width: 28px;
  height: 28px;
  cursor: pointer;
  font-size: 16px;
  line-height: 26px;
  transition: all 0.3s;
}
.ramadan-banner .close-banner:hover {
  background: #f4c542;
  color: #1a0533;
}
.lantern-container {
  position: fixed;
  top: -10px;
  z-index: 99998;
  pointer-events: none;
}
.lantern {
  animation: lanternSwing 3s
    ease-in-out infinite;
  transform-origin: top center;
}
.lantern-rope {
  width: 2px;
  background: #f4c542;
  margin: 0 auto;
}
.lantern-body {
  width: 40px;
  height: 55px;
  border-radius: 8px 8px 50% 50%;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
  box-shadow: 0 0 20px
    rgba(244, 197, 66, 0.4);
}
.lantern-body::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: repeating-linear-gradient(
    0deg, transparent, transparent 8px,
    rgba(0,0,0,0.15) 8px,
    rgba(0,0,0,0.15) 10px);
}
.lantern-cap {
  width: 30px;
  height: 8px;
  background: #f4c542;
  margin: 0 auto;
  border-radius: 3px 3px 0 0;
}
.lantern-bottom {
  width: 20px;
  height: 6px;
  background: #f4c542;
  margin: 0 auto;
  border-radius: 0 0 50% 50%;
}
.lantern-glow {
  position: absolute;
  bottom: -15px;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 30px;
  background: radial-gradient(ellipse,
    rgba(244, 197, 66, 0.3), transparent);
  pointer-events: none;
}
.lantern-1 .lantern-body {
  background: linear-gradient(180deg,
    #e74c3c, #c0392b);
}
.lantern-2 .lantern-body {
  background: linear-gradient(180deg,
    #2ecc71, #27ae60);
}
.lantern-3 .lantern-body {
  background: linear-gradient(180deg,
    #9b59b6, #8e44ad);
}
.lantern-4 .lantern-body {
  background: linear-gradient(180deg,
    #e67e22, #d35400);
}
.lantern-5 .lantern-body {
  background: linear-gradient(180deg,
    #3498db, #2980b9);
}
@keyframes lanternSwing {
  0%, 100% { transform: rotate(-5deg); }
  50% { transform: rotate(5deg); }
}
.ramadan-star {
  position: fixed;
  color: #f4c542;
  pointer-events: none;
  z-index: 99997;
  animation: starFall linear forwards;
  text-shadow: 0 0 6px
    rgba(244, 197, 66, 0.8);
}
@keyframes starFall {
  0% {
    opacity: 1;
    transform: translateY(0) rotate(0deg);
  }
  100% {
    opacity: 0;
    transform: translateY(100vh)
      rotate(360deg);
  }
}
.floating-crescent {
  position: fixed;
  bottom: 30px;
  left: 30px;
  font-size: 50px;
  z-index: 99998;
  animation: floatCrescent 4s
    ease-in-out infinite;
  cursor: pointer;
  text-shadow: 0 0 20px
    rgba(244, 197, 66, 0.6);
  transition: transform 0.3s;
  pointer-events: auto;
}
.floating-crescent:hover {
  transform: scale(1.2);
}
@keyframes floatCrescent {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-15px); }
}
.string-lights {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 40px;
  z-index: 99996;
  pointer-events: none;
  overflow: hidden;
}
.light-bulb {
  position: absolute;
  top: 0;
  width: 12px;
  height: 18px;
  border-radius: 50%;
  animation: glowPulse 2s
    ease-in-out infinite alternate;
  box-shadow: 0 0 8px currentColor;
}
.light-bulb::before {
  content: '';
  position: absolute;
  top: -4px;
  left: 50%;
  transform: translateX(-50%);
  width: 6px;
  height: 6px;
  background: #888;
  border-radius: 2px;
}
.light-wire {
  position: absolute;
  top: 2px;
  left: 0;
  width: 100%;
  height: 20px;
  pointer-events: none;
}
@keyframes glowPulse {
  0% { opacity: 0.5; }
  100% { opacity: 1; }
}
body.ramadan-active {
  padding-top: 70px !important;
}
@media (max-width: 768px) {
  .ramadan-banner h3 { font-size: 16px; }
  .ramadan-banner p { font-size: 11px; }
  .lantern-body { width: 28px; height: 40px; }
  .lantern-cap { width: 22px; }
  .floating-crescent {
    font-size: 35px;
    bottom: 20px;
    left: 20px;
  }
}
</style>

<div class="ramadan-banner" id="ramadanBanner">
  <button class="close-banner"
    onclick="closeBanner()">✕</button>
  <h3>🌙 رمضان كريم 🌙</h3>
  <p>كل عام وأنتم بخير • أعاده الله
    علينا وعليكم بالخير واليُمن
    والبركات</p>
</div>

<div class="lantern-container lantern-1"
  style="right: 5%;">
  <div class="lantern"
    style="animation-delay: 0s;">
    <div class="lantern-rope"
      style="height: 40px;"></div>
    <div class="lantern-cap"></div>
    <div class="lantern-body"></div>
    <div class="lantern-bottom"></div>
    <div class="lantern-glow"></div>
  </div>
</div>

<div class="lantern-container lantern-2"
  style="right: 25%;">
  <div class="lantern"
    style="animation-delay: 0.5s;">
    <div class="lantern-rope"
      style="height: 55px;"></div>
    <div class="lantern-cap"></div>
    <div class="lantern-body"></div>
    <div class="lantern-bottom"></div>
    <div class="lantern-glow"></div>
  </div>
</div>

<div class="lantern-container lantern-3"
  style="right: 50%;">
  <div class="lantern"
    style="animation-delay: 1s;">
    <div class="lantern-rope"
      style="height: 35px;"></div>
    <div class="lantern-cap"></div>
    <div class="lantern-body"></div>
    <div class="lantern-bottom"></div>
    <div class="lantern-glow"></div>
  </div>
</div>

<div class="lantern-container lantern-4"
  style="right: 75%;">
  <div class="lantern"
    style="animation-delay: 1.5s;">
    <div class="lantern-rope"
      style="height: 50px;"></div>
    <div class="lantern-cap"></div>
    <div class="lantern-body"></div>
    <div class="lantern-bottom"></div>
    <div class="lantern-glow"></div>
  </div>
</div>

<div class="lantern-container lantern-5"
  style="right: 92%;">
  <div class="lantern"
    style="animation-delay: 2s;">
    <div class="lantern-rope"
      style="height: 45px;"></div>
    <div class="lantern-cap"></div>
    <div class="lantern-body"></div>
    <div class="lantern-bottom"></div>
    <div class="lantern-glow"></div>
  </div>
</div>

<div class="string-lights" id="stringLights">
  <svg class="light-wire"
    viewBox="0 0 1000 20"
    preserveAspectRatio="none">
    <path d="M0,5 Q50,18 100,5
      Q150,18 200,5 Q250,18 300,5
      Q350,18 400,5 Q450,18 500,5
      Q550,18 600,5 Q650,18 700,5
      Q750,18 800,5 Q850,18 900,5
      Q950,18 1000,5"
      stroke="#555" stroke-width="1.5"
      fill="none"/>
  </svg>
</div>

<div class="floating-crescent"
  id="floatingCrescent"
  title="رمضان كريم 🌙">
  🌙
</div>

<script>
//<![CDATA[
(function() {
  document.body.classList.add(
    'ramadan-active');

  window.closeBanner = function() {
    var banner =
      document.getElementById('ramadanBanner');
    banner.style.transition = 'all 0.5s ease';
    banner.style.transform =
      'translateY(-100%)';
    banner.style.opacity = '0';
    setTimeout(function() {
      banner.style.display = 'none';
      document.body.style.paddingTop = '0px';
    }, 500);
  };

  var lightsContainer =
    document.getElementById('stringLights');
  var colors = [
    '#e74c3c', '#f4c542', '#2ecc71',
    '#3498db', '#e67e22', '#9b59b6',
    '#1abc9c', '#f39c12'
  ];
  var lightCount =
    Math.floor(window.innerWidth / 55);

  for (var i = 0; i < lightCount; i++) {
    var bulb = document.createElement('div');
    bulb.className = 'light-bulb';
    var color = colors[i % colors.length];
    bulb.style.backgroundColor = color;
    bulb.style.color = color;
    bulb.style.left =
      ((i + 0.5) / lightCount * 100) + '%';
    bulb.style.top =
      (Math.sin((i / lightCount) *
      Math.PI * (lightCount / 5))
      * 12 + 10) + 'px';
    bulb.style.animationDelay =
      (i * 0.15) + 's';
    lightsContainer.appendChild(bulb);
  }

  var starSymbols =
    ['✦', '✧', '⭐', '★', '☆', '✨'];

  function createStar() {
    var star = document.createElement('div');
    star.className = 'ramadan-star';
    star.textContent = starSymbols[
      Math.floor(Math.random() *
      starSymbols.length)];
    star.style.left =
      Math.random() * 100 + 'vw';
    star.style.top = '-20px';
    star.style.fontSize =
      (Math.random() * 16 + 10) + 'px';
    var duration = Math.random() * 5 + 5;
    star.style.animationDuration =
      duration + 's';
    document.body.appendChild(star);
    setTimeout(function() {
      if (star.parentNode)
        star.parentNode.removeChild(star);
    }, duration * 1000);
  }

  setInterval(createStar, 800);

  document.getElementById('floatingCrescent')
    .addEventListener('click', function() {
    var messages = [
      'رمضان كريم! 🌙',
      'كل عام وأنتم بخير ✨',
      'اللهم بلّغنا رمضان 🤲',
      'شهر الخير والبركة 🕌',
      'اللهم تقبل منا الصيام والقيام 🌟',
      'رمضان مبارك عليكم 🎉'
    ];
    var msg = messages[
      Math.floor(Math.random() *
      messages.length)];

    var popup = document.createElement('div');
    popup.textContent = msg;
    popup.style.cssText =
      'position:fixed;bottom:90px;' +
      'left:30px;background:' +
      'linear-gradient(135deg,' +
      '#1a0533,#2d0a4e);color:#f4c542;' +
      'padding:12px 20px;' +
      'border-radius:12px;' +
      'font-family:Tajawal,Cairo,' +
      'sans-serif;font-size:16px;' +
      'z-index:999999;box-shadow:' +
      '0 5px 20px rgba(0,0,0,0.3);' +
      'border:1px solid #f4c542;' +
      'animation:fadeInUp 0.5s ease;' +
      'direction:rtl;';

    var style = document.createElement('style');
    style.textContent =
      '@keyframes fadeInUp{' +
      'from{opacity:0;' +
      'transform:translateY(20px)}' +
      'to{opacity:1;' +
      'transform:translateY(0)}}';
    document.head.appendChild(style);

    document.body.appendChild(popup);
    setTimeout(function() {
      popup.style.transition =
        'all 0.5s ease';
      popup.style.opacity = '0';
      popup.style.transform =
        'translateY(-20px)';
      setTimeout(function() {
        if (popup.parentNode)
          popup.parentNode.removeChild(popup);
      }, 500);
    }, 3000);
  });
})();
//]]>
</script>
<!-- ===== نهاية زينة رمضان ===== -->
💡 نصيحة: يمكنك تحديد الكود بالكامل من بدايته حتى التعليق الأخير "نهاية زينة رمضان"، ثمّ نسخه ولصقه دفعة واحدة في محرّر القالب. لا تنسَ الحفظ ومعاينة الموقع بعدها.

🎨 تخصيص الزينة حسب ذوقك

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

🎨 تغيير الألوان

لتغيير ألوان الفوانيس، ابحث عن الأصناف .lantern-1 إلى .lantern-5 في قسم CSS وعدّل قيم الألوان. إليك جدولاً بالألوان الحالية وبعض البدائل المقترحة:

الفانوس اللون الحالي بديل مقترح
الأول أحمر (#e74c3c) وردي (#e91e63)
الثاني أخضر (#2ecc71) أخضر زمرّدي (#00897b)
الثالث بنفسجي (#9b59b6) نيلي (#5c6bc0)
الرابع برتقالي (#e67e22) ذهبي (#ffc107)
الخامس أزرق (#3498db) سماوي (#00bcd4)

كذلك يمكنك تغيير لون خلفية البانر بتعديل قيم التدرّج اللوني في خاصية background: linear-gradient(...) الخاصة بـ .ramadan-banner. على سبيل المثال، لجعل البانر أخضر داكنًا بدلاً من البنفسجي:

/* بانر أخضر داكن */
background: linear-gradient(135deg,
  #0d3320, #145a3a, #0c2e1f);

✏️ تغيير النصوص والرسائل

لتعديل نص البانر العلوي، ابحث في قسم HTML عن العنصر <h3> و<p> داخل .ramadan-banner وعدّل المحتوى النصي. مثلاً:

<h3>🌙 أهلاً بشهر الخير 🌙</h3>
<p>نسأل الله أن يُبلّغنا وإيّاكم
  شهر رمضان المبارك</p>

أمّا لتعديل الرسائل التي تظهر عند النقر على الهلال، فابحث في قسم JavaScript عن مصفوفة messages وأضف أو عدّل أو احذف الرسائل حسب رغبتك. يمكنك أيضًا إضافة أدعية رمضانية مثل:

var messages = [
  'اللهم أهلّه علينا بالأمن والإيمان 🤲',
  'رمضان شهر القرآن 📖',
  'اللهم اجعلنا من عتقائك من النار 🕌',
  'يا باغي الخير أقبل ✨',
  'اللهم بلّغنا ليلة القدر 🌙'
];

📍 تغيير مواضع العناصر

مواقع العناصر قابلة للتعديل بسهولة. إليك أبرز التعديلات التي قد تحتاجها:

نقل الهلال العائم: يمكنك تحريك الهلال لأي زاوية من الشاشة بتعديل خاصيتي bottom وleft (أو right) في صنف .floating-crescent:

الموقع المطلوب خصائص CSS
أسفل يسار (شمال) bottom: 30px; left: 30px;
أسفل يمين (جنوب) bottom: 30px; right: 30px;
أعلى يسار top: 100px; left: 30px;
أعلى يمين top: 100px; right: 30px;

إعادة توزيع الفوانيس: لتغيير مواقع الفوانيس الأفقية، عدّل قيم right في كل .lantern-container. ولتغيير طول حبل كل فانوس، عدّل قيمة height في .lantern-rope.

💡 نصيحة: عند نقل الهلال لا تنسَ تحديث موقع الرسالة المنبثقة في كود JavaScript أيضًا. ابحث عن bottom:90px;left:30px; في popup.style.cssText وعدّلها لتتوافق مع الموقع الجديد للهلال.

⏱️ التحكم في سرعة التأثيرات

يمكنك ضبط سرعة كل تأثير حسب تفضيلك. إليك الخصائص المسؤولة عن السرعة وكيفية تعديلها:

التأثير الخاصية القيمة الحالية تعديل مقترح
تأرجح الفوانيس lanternSwing duration 3s أبطأ: 5s / أسرع: 2s
سقوط النجوم duration في JS 5-10s عشوائي أبطأ: 8-15s / أسرع: 3-6s
تكرار النجوم setInterval في JS 800ms أقل: 1500ms / أكثر: 400ms
طفو الهلال floatCrescent duration 4s أبطأ: 6s / أسرع: 2s
وميض الأضواء glowPulse duration 2s أبطأ: 3s / أسرع: 1s

على سبيل المثال، إذا أردت تقليل كثافة النجوم المتساقطة لتخفيف الحمل على الأجهزة الضعيفة، غيّر قيمة setInterval(createStar, 800) إلى setInterval(createStar, 2000) لإنشاء نجمة كل ثانيتين بدلاً من كل 0.8 ثانية.

🚀 نصائح لتحسين الأداء

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

  1. تنظيف عناصر DOM: لاحظ أنّ الكود يحذف كل نجمة تلقائيًا بعد انتهاء حركتها باستخدام removeChild. هذا يمنع تراكم العناصر في الذاكرة. تأكّد من عدم حذف هذا الجزء عند تعديل الكود.
  2. تقليل كثافة النجوم: إذا لاحظت بطئًا، قلّل معدل إنشاء النجوم بزيادة الفترة الزمنية في setInterval من 800 إلى 1500 أو 2000 مللي ثانية.
  3. استخدام transform بدلاً من top/left: الكود يستخدم transform: translateY للحركات، وهي خاصية مُسرَّعة بواسطة GPU ولا تُسبّب إعادة حساب تخطيط الصفحة (Layout Reflow).
  4. خاصية pointer-events: none: هذه الخاصية موجودة على العناصر الزخرفية لمنعها من اعتراض تفاعلات المستخدم، ممّا يُحسّن الاستجابة.
  5. اختبار على عدّة أجهزة: بعد الإضافة، اختبر موقعك على هاتفك الشخصي وعلى متصفحات مختلفة للتأكّد من سلاسة التأثيرات.

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

🐛 الأخطاء الشائعة وحلولها

عند إضافة كود الزينة إلى بلوجر، قد تواجه بعض المشاكل. إليك أكثر الأخطاء شيوعًا مع حلولها المُجرَّبة:

1. خطأ SAXParseException عند حفظ القالب

هذا أكثر خطأ شائع ويظهر برسالة مشابهة لـ:

org.xml.sax.SAXParseException;
The content of elements must consist of
well-formed character data or markup.

السبب: محلّل XML في بلوجر يُفسّر علامة < في كود JavaScript (مثلاً في حلقة for) كبداية وسم HTML.

الحل: تأكّد من تغليف كود JavaScript بعبارتي CDATA:

<script>
//<![CDATA[
  // كود JavaScript هنا
//]]>
</script>

2. الزينة تحجب محتوى الموقع

السبب: البانر العلوي يُغطّي الجزء العلوي من الصفحة.

الحل: تأكّد من وجود الصنف body.ramadan-active مع padding-top: 70px في CSS. وتأكّد من أنّ JavaScript يُضيف هذا الصنف عبر document.body.classList.add('ramadan-active').

3. الفوانيس لا تظهر على الهاتف

السبب: قد تكون الفوانيس خارج منطقة العرض على الشاشات الصغيرة.

الحل: عدّل قيم right للفوانيس أو قلّل عددها على الشاشات الصغيرة عبر إضافة display: none لبعضها داخل media query:

@media (max-width: 768px) {
  .lantern-4, .lantern-5 {
    display: none;
  }
}

4. النقر على عناصر الموقع لا يعمل

السبب: عنصر زخرفي يعترض النقرات.

الحل: تأكّد من أنّ جميع العناصر الزخرفية تحمل خاصية pointer-events: none، باستثناء الهلال العائم الذي يحتاج للتفاعل (pointer-events: auto).

5. البانر لا يختفي عند النقر على زر الإغلاق

السبب: وظيفة closeBanner غير مُعرَّفة عالميًا.

الحل: تأكّد من أنّ الوظيفة مُعرَّفة على كائن window وليس داخل نطاق محلي فقط:

// صحيح ✅
window.closeBanner = function() { ... };

// خطأ ❌
function closeBanner() { ... }
// داخل IIFE لن تكون متاحة عالمياً

🗑️ كيفية إزالة الزينة بعد رمضان

بعد انتهاء شهر رمضان المبارك، ستحتاج لإزالة الزينة من موقعك. العملية بسيطة وسريعة:

  1. اذهب إلى لوحة تحكم بلوجر ← المظهر ← تعديل HTML.
  2. استخدم Ctrl + F للبحث عن النص: زينة رمضان - الكود الكامل
  3. حدّد كل شيء بدءًا من التعليق <!-- ===== زينة رمضان - الكود الكامل ===== --> وحتى التعليق <!-- ===== نهاية زينة رمضان ===== -->
  4. احذف النص المُحدَّد بالكامل.
  5. انقر حفظ.
💡 نصيحة ذكية: بدلاً من حذف الكود نهائيًا، يمكنك الاحتفاظ بنسخة منه في ملف نصي على جهازك. بهذه الطريقة يمكنك إعادة إضافته بسهولة في رمضان القادم دون الحاجة لإعادة كتابته أو البحث عنه من جديد.

كما يُفضّل أن تختبر الموقع بعد الحذف للتأكّد من عدم وجود بقايا كود تُسبّب مشاكل. افحص الصفحة باستخدام أدوات المطوّر في المتصفّح (F12) وتأكّد من خلو وحدة التحكم (Console) من أخطاء JavaScript.

إذا كنت مهتمًا بتعلّم المزيد عن أدوات تطوير الويب المفيدة، أنصحك بزيارة مقالنا عن أهم الأدوات لمطوّري الواجهة الأمامية الذي يُغطّي أدوات مفيدة لكل مطوّر ويب.

❓ الأسئلة الشائعة (FAQ)

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

هل يؤثّر كود الزينة على سرعة تحميل الموقع؟

التأثير ضئيل جدًا لأنّ الكود لا يستخدم أي مكتبات خارجية أو صور ثقيلة. جميع العناصر مبنية بـ CSS وJavaScript الخام (Vanilla JS). ومع ذلك، إذا كان جمهورك يستخدم أجهزة ضعيفة بكثرة، يمكنك تقليل كثافة النجوم المتساقطة بزيادة الفترة الزمنية في setInterval.

هل يعمل الكود على جميع المتصفحات؟

نعم، الكود يستخدم خصائص CSS وJavaScript مدعومة في جميع المتصفحات الحديثة بما فيها Chrome وFirefox وSafari وEdge. خصائص مثل CSS Animations وtransform وlinear-gradient مدعومة بنسبة تفوق 97% من المتصفحات المُستخدمة عالميًا حسب إحصائيات Can I Use.

هل يمكنني استخدام هذا الكود على ووردبريس أو منصات أخرى؟

بالتأكيد! الكود مكتوب بتقنيات ويب قياسية (HTML + CSS + JavaScript) ويمكن استخدامه على أي منصة تتيح إضافة كود مخصّص. في ووردبريس، يمكنك إضافته عبر إضافة مثل "Insert Headers and Footers" أو من خلال ملف footer.php في القالب. الفرق الوحيد أنّك لن تحتاج لغلاف CDATA لأنّ ووردبريس لا يُعالج القالب كـ XML. أمّا على منصات مثل Shopify أو Wix، فابحث عن خيار "Custom Code" أو "Embed Code" في إعدادات المنصة.

هل يمكنني إضافة صوت عند النقر على الهلال؟

نعم، يمكنك إضافة مقطع صوتي قصير يُشغَّل عند النقر على الهلال. أضف السطر التالي داخل دالة الاستماع لحدث النقر على الهلال في كود JavaScript، وذلك قبل سطر إنشاء عنصر popup: 

// إضافة صوت عند النقر على الهلال
var sound = new Audio(
  'رابط-ملف-الصوت.mp3'
);
sound.volume = 0.3;
sound.play();

استبدل رابط-ملف-الصوت.mp3 برابط مباشر لملف صوتي قصير (يُفضَّل ألاّ يتجاوز حجمه 100 كيلوبايت). يمكنك رفع الملف على خدمة استضافة ملفات مجانية أو استخدام Google Drive مع تحويل الرابط إلى رابط مباشر.

⚠️ تنبيه: بعض المتصفحات تمنع التشغيل التلقائي للصوت دون تفاعل مسبق من المستخدم. لذلك تأكّد من أنّ الصوت يُشغَّل فقط عند نقر المستخدم (كما في المثال أعلاه) وليس تلقائيًا عند تحميل الصفحة.

هل يمكنني إظهار الزينة في شهر رمضان فقط تلقائيًا؟

نعم، يمكنك إضافة شرط زمني في بداية كود JavaScript يتحقّق من التاريخ الهجري الحالي، بحيث تظهر الزينة فقط خلال شهر رمضان وتختفي تلقائيًا بعده. الطريقة الأبسط هي تحديد نطاق تاريخ ميلادي يُقابل رمضان في السنة الحالية:

// إظهار الزينة في فترة رمضان فقط
// عدّل التواريخ حسب رمضان كل سنة
var today = new Date();
var ramadanStart = new Date('2026-02-17');
var ramadanEnd = new Date('2026-03-19');

if (today >= ramadanStart
    && today <= ramadanEnd) {
  // كود الزينة يعمل هنا
  initRamadanDecoration();
}

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

هل يتعارض كود الزينة مع إضافات بلوجر الأخرى؟

في الغالب لا يتعارض، لأنّ الكود يستخدم أسماء أصناف CSS فريدة تبدأ بكلمات مثل ramadan- وlantern- وfloating-، ممّا يقلّل احتمالية تضارب الأسماء. كما أنّ قيم z-index العالية (99996-99999) تضمن ظهور الزينة فوق العناصر الأخرى. لكن إذا كنت تستخدم إضافة تُظهر نافذة منبثقة (Popup) أو شريطًا علويًا آخر، فقد تحتاج لتعديل قيم z-index لتجنّب التداخل.

كيف أُضيف فوانيس أكثر أو أقل؟

لإضافة فانوس جديد، انسخ كتلة HTML لأي فانوس موجود وغيّر رقم الصنف (مثلاً lantern-6) وقيمة right وطول الحبل وanimation-delay. ثمّ أضف صنف CSS جديدًا لتحديد لونه:

/* فانوس سادس - لون تركوازي */
.lantern-6 .lantern-body {
  background: linear-gradient(180deg,
    #1abc9c, #16a085);
}

ولحذف فانوس، ببساطة احذف كتلة HTML الخاصة به وصنف CSS المرتبط. على سبيل المثال، إذا كنت تريد ثلاثة فوانيس فقط، احذف كتلتي lantern-4 وlantern-5 من HTML.

هل يؤثّر كود الزينة على ترتيب الموقع في محركات البحث (SEO)؟

لا يوجد تأثير سلبي مباشر على SEO، بشرط أن يكون الكود خفيفًا ولا يُبطئ تحميل الصفحة بشكل ملحوظ. محركات البحث مثل Google تهتم بتجربة المستخدم وسرعة الموقع. وبما أنّ الكود المُقدَّم هنا لا يتجاوز بضعة كيلوبايتات ولا يُحمّل موارد خارجية، فلن يؤثر على مقاييس Core Web Vitals الخاصة بموقعك. بل إنّ التأثيرات البصرية الجميلة قد تُحسّن من مقاييس تفاعل المستخدم مثل مدّة البقاء في الموقع ومعدل الارتداد، وهي إشارات إيجابية لمحركات البحث.

هل يمكنني استخدام صور فوانيس حقيقية بدلاً من الفوانيس المرسومة بـ CSS؟

بالتأكيد! يمكنك استبدال جسم الفانوس المبني بـ CSS بصورة PNG شفافة الخلفية. استبدل محتوى .lantern-body بعنصر صورة، لكن انتبه للنقاط التالية:

  • استخدم صورًا صغيرة الحجم (يُفضَّل أقل من 20 كيلوبايت لكل صورة).
  • استخدم صيغة WebP بدلاً من PNG لتقليل الحجم مع الحفاظ على الشفافية.
  • تأكّد من أنّ الصور ذات خلفية شفافة لتتناسب مع أي تصميم موقع.

هل يمكنني إضافة عدّاد تنازلي لبداية رمضان؟

نعم، يمكنك إضافة عدّاد تنازلي يعرض الأيام والساعات المتبقية على بداية شهر رمضان. إليك الفكرة الأساسية للكود:

// عدّاد تنازلي لرمضان
function updateCountdown() {
  var ramadan = new Date('2026-02-17T00:00:00');
  var now = new Date();
  var diff = ramadan - now;

  if (diff > 0) {
    var days = Math.floor(
      diff / (1000 * 60 * 60 * 24));
    var hours = Math.floor(
      (diff % (1000 * 60 * 60 * 24))
      / (1000 * 60 * 60));
    var minutes = Math.floor(
      (diff % (1000 * 60 * 60))
      / (1000 * 60));

    document.getElementById('countdown')
      .textContent =
      'باقي على رمضان: ' + days +
      ' يوم و ' + hours +
      ' ساعة و ' + minutes + ' دقيقة';
  } else {
    document.getElementById('countdown')
      .textContent = 'رمضان كريم! 🌙';
  }
}

setInterval(updateCountdown, 60000);
updateCountdown();

يمكنك دمج هذا العدّاد داخل البانر العلوي أو إضافته كعنصر مستقل. عدّل التاريخ 2026-02-17 ليتوافق مع أول يوم من رمضان في السنة المطلوبة.

🌟 الخلاصة

إضافة تأثير زينة شهر رمضان إلى موقعك الإلكتروني هي طريقة رائعة ومُبتكرة لإضفاء أجواء احتفالية تُسعد زوّارك وتُعزّز تفاعلهم مع محتواك. كما رأينا في هذا الدليل، فإنّ بناء هذه التأثيرات لا يتطلّب خبرة متقدّمة في البرمجة ولا مكتبات خارجية ثقيلة، بل يكفي فهم أساسيات HTML وCSS وJavaScript.

دعنا نُلخّص أهم ما تعلّمناه في هذا المقال:

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

هذا المشروع هو أيضًا فرصة ممتازة لتعزيز مهاراتك في تطوير الويب، خاصةً في مجال CSS Animations وJavaScript DOM Manipulation. إذا كنت ترغب في التعمّق أكثر في عالم تطوير الواجهات الأمامية، فأنصحك بالاطلاع على مقال الفرق بين تطوير الويب وتصميم الويب، وكذلك مقال تشغيل كود Python في HTML عبر المتصفّح لاستكشاف إمكانيات أخرى مثيرة.

📬

هل استفدت من هذا المقال؟

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

نعم، أريد الاشتراك! ✉️

🔒 خصوصيتك مهمة لنا. لن نرسل رسائل مزعجة أبداً.

أضف وادي التكنولوجيا كمصدر مفضّل على جوجل

اجعل مقالاتنا تظهر لك أولًا في نتائج البحث والأخبار

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

مقالات قد تهمك

تعليقات
إرسال تعليق

يسعدنا أن نسمع آراءكم! اتركوا تعليقاً أدناه وشاركوا تجاربكم أو أسئلتكم.




    /*إشعار رسالة الكوكيز*/