مدونة هلا تك

إضافة بطاقة رمضانية منبثقة لقوالب بلوجر مع عداد تنازلي وزينة رمضانية

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

مميزات البطاقة الرمضانية المنبثقة لبلوجر

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

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

ما فائدة إضافة بطاقة رمضان إلى مدونة بلوجر؟

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

هل تؤثر البطاقة الرمضانية على السيو؟

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

طريقة تركيب البطاقة الرمضانية في قالب بلوجر

يمكن تركيب الإضافة بسهولة من خلال نسخ الكود الخاص بالبطاقة، ثم إضافته إلى أداة ~~HTML/JavaScript~~ من قسم التخطيط في Blogger أو وضعه في الموضع المناسب داخل أكواد القالب فوق ~~</body>~~ بعد التأكد من توافق الكود مع ترميز بلوجر.
بعد التركيب، يمكنك تعديل مدة ظهور البطاقة، وتغيير موعد رمضان، وتخصيص ألوان التصميم، وتحريك الهلال والنجوم والفوانيس بما يتناسب مع شكل القالب.

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

<style>
#htRamadanPopup,#htRamadanPopup *{box-sizing:border-box}
#htRamadanPopup{position:fixed;inset:0;z-index:999999;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(5,12,25,.68);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);direction:rtl;opacity:0;visibility:hidden;transition:opacity .5s ease,visibility .5s ease}
#htRamadanPopup.ht-show{opacity:1;visibility:visible}
#htRamadanPopup .ht-card{position:relative;width:100%;max-width:500px;overflow:hidden;text-align:center;padding:30px 20px 30px;color:#fff5d5;border:1px solid #d9b568;border-radius:23px;background:radial-gradient(ellipse at 50% 0%,#345b67 0%,transparent 55%),linear-gradient(145deg,#102c39,#071521 75%);box-shadow:0 22px 70px rgba(0,0,0,.5),inset 0 0 30px rgba(226,184,99,.09);transform:translateY(25px) scale(.96);transition:transform .5s ease}
#htRamadanPopup.ht-show .ht-card{transform:translateY(0) scale(1)}
#htRamadanPopup .ht-close{position:absolute;z-index:5;top:10px;left:10px;width:34px;height:34px;border:1px solid rgba(255,255,255,.3);border-radius:50%;background:rgba(0,0,0,.22);color:#fff;font-size:24px;line-height:28px;cursor:pointer}
#htRamadanPopup .ht-close:hover{background:#b88b39}
#htRamadanPopup .ht-decor{position:absolute;top:-9px;left:0;right:0;height:105px;pointer-events:none}
#htRamadanPopup .ht-lantern{position:absolute;top:0;font-size:36px;transform-origin:top center;animation:htSwing 3s ease-in-out infinite alternate;filter:drop-shadow(0 0 9px rgba(255,195,82,.55))}
#htRamadanPopup .ht-lantern:first-child{right:25px;top:20px}
#htRamadanPopup .ht-lantern:nth-child(2){left:25px;animation-delay:-.8s;top:20px}
#htRamadanPopup .ht-lantern:nth-child(3){right:48%;font-size:23px;animation-delay:-1.4s}
#htRamadanPopup .ht-moon{margin:27px auto 5px;font-size:58px;line-height:1.2;color:#f9d782;text-shadow:0 0 22px rgba(255,210,112,.45);animation:htGlow 2.5s ease-in-out infinite alternate}
#htRamadanPopup .ht-title{margin:8px 0 10px;color:#f9d782;font-size:27px;font-weight:800;line-height:1.6}
#htRamadanPopup .ht-message{margin:0 0 20px;color:#e4eaf0;font-size:14px;line-height:1.9}
#htRamadanPopup .ht-countdown{display:grid;direction:ltr;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px;margin:0 0 18px}
#htRamadanPopup .ht-unit{min-width:0;padding:12px 3px 10px;border:1px solid rgba(230,194,120,.45);border-radius:12px;background:rgba(255,255,255,.055)}
#htRamadanPopup .ht-number{display:block;color:#ffdc8b;font-size:27px;font-weight:bold;font-variant-numeric:tabular-nums;line-height:1.35}
#htRamadanPopup .ht-label{display:block;margin-top:5px;color:#d8e0e7;font-size:11px}
#htRamadanPopup .ht-date{margin:12px 0;color:#e5c77f;font-size:12px}
#htRamadanPopup .ht-enter{display:inline-block;min-width:155px;padding:12px 25px;border:1px solid #ffe2a1;border-radius:30px;background:linear-gradient(135deg,#f5d48a,#c49a4c);color:#152431;font-size:14px;font-weight:bold;text-decoration:none;cursor:pointer;box-shadow:0 5px 18px rgba(213,169,80,.2);transition:transform .2s ease}
#htRamadanPopup .ht-enter:hover{transform:translateY(-2px)}
#htRamadanPopup .ht-stars{position:absolute;inset:0;pointer-events:none;overflow:hidden}
#htRamadanPopup .ht-star{position:absolute;color:#ffe4a1;animation:htTwinkle 2s ease-in-out infinite alternate}
#htRamadanPopup .ht-star:nth-child(1){top:28%;right:8%;font-size:16px}
#htRamadanPopup .ht-star:nth-child(2){top:39%;left:8%;font-size:12px;animation-delay:-.7s}
#htRamadanPopup .ht-star:nth-child(3){top:62%;right:5%;font-size:12px;animation-delay:-1.2s}
#htRamadanPopup .ht-star:nth-child(4){top:67%;left:6%;font-size:17px;animation-delay:-.4s}
#htRamadanPopup .ht-footer{margin-top:20px;color:#a9bbc6;font-size:10px}
@keyframes htSwing{from{transform:rotate(-9deg)}to{transform:rotate(9deg)}}
@keyframes htGlow{from{text-shadow:0 0 8px rgba(255,210,112,.25)}to{text-shadow:0 0 26px rgba(255,210,112,.8)}}
@keyframes htTwinkle{from{opacity:.25;transform:scale(.8)}to{opacity:1;transform:scale(1.2)}}
@media(max-width:380px){#htRamadanPopup .ht-card{padding:27px 12px 20px}#htRamadanPopup .ht-title{font-size:23px}#htRamadanPopup .ht-number{font-size:23px}#htRamadanPopup .ht-unit{padding:10px 2px}}
@media(prefers-reduced-motion:reduce){#htRamadanPopup *,#htRamadanPopup *::before,#htRamadanPopup *::after{animation:none!important;transition:none!important}}
</style>

<div aria-hidden='true' id='htRamadanPopup'>
  <div aria-labelledby='htRamadanTitle' aria-modal='true' class='ht-card' role='dialog'>
    <button aria-label='إغلاق' class='ht-close' title='إغلاق' type='button'>&#215;</button>
    <div aria-hidden='true' class='ht-decor'>
      <span class='ht-lantern'>🌙</span>
      <span class='ht-lantern'>🏮</span>
      <span class='ht-lantern'>&#10022;</span>
    </div>
    <div aria-hidden='true' class='ht-stars'>
      <span class='ht-star'>&#10022;</span>
      <span class='ht-star'>&#10023;</span>
      <span class='ht-star'>&#10022;</span>
      <span class='ht-star'>&#10023;</span>
    </div>

    <div aria-hidden='true' class='ht-moon'>🌙</div>
    <h2 class='ht-title' id='htRamadanTitle'>
      اقترب شهر الخير
    </h2>
    <p class='ht-message'>
      أيام قليلة تفصلنا عن شهر رمضان المبارك<br/>
      اللهم بلغنا رمضان ونحن في أحسن حال
    </p>

    <div aria-label='الوقت المتبقي لرمضان' class='ht-countdown'>
      <div class='ht-unit'>
        <span class='ht-number' id='htDays'>--</span>
        <span class='ht-label'>الأيام</span>
      </div>
      <div class='ht-unit'>
        <span class='ht-number' id='htHours'>--</span>
        <span class='ht-label'>الساعات</span>
      </div>
      <div class='ht-unit'>
        <span class='ht-number' id='htMinutes'>--</span>
        <span class='ht-label'>الدقائق</span>
      </div>
      <div class='ht-unit'>
        <span class='ht-number' id='htSeconds'>--</span>
        <span class='ht-label'>الثواني</span>
      </div>
    </div>

    <div class='ht-date' id='htRamadanDate'>
      موعد رمضان المتوقع: 8 فبراير 2027
    </div>

    <button class='ht-enter' type='button'>
      دخول المدونة &#8592;
    </button>

    <div class='ht-footer'>رمضان كريم &#10022; تقبل الله طاعاتكم</div>
  </div>
</div>

<script>
//<![CDATA[
(function () {
  var popup = document.getElementById('htRamadanPopup');
  if (!popup || popup.getAttribute('data-ready') === '1') return;
  popup.setAttribute('data-ready', '1');

  // عدّل التاريخ هنا إذا تغير موعد بداية رمضان
  var ramadanDate = new Date(2027, 1, 8, 0, 0, 0).getTime();

  // مدة ظهور البطاقة بالمللي ثانية: 15000 = 15 ثانية
  var displayDuration = 15000;
  var timer = null;
  var hideTimer = null;
  var closed = false;

  var daysEl = document.getElementById('htDays');
  var hoursEl = document.getElementById('htHours');
  var minutesEl = document.getElementById('htMinutes');
  var secondsEl = document.getElementById('htSeconds');
  var titleEl = document.getElementById('htRamadanTitle');
  var messageEl = popup.querySelector('.ht-message');
  var dateEl = document.getElementById('htRamadanDate');

function pad(n) {
  return String(n).padStart(2, '0');
}

  function updateCountdown() {
    var remaining = ramadanDate - Date.now();

    if (remaining <= 0) {
      daysEl.textContent = '٠';
      hoursEl.textContent = '٠٠';
      minutesEl.textContent = '٠٠';
      secondsEl.textContent = '٠٠';
      titleEl.textContent = 'رمضان كريم';
      messageEl.textContent =
        'نسأل الله أن يجعله شهر خير وبركة عليكم';
      dateEl.textContent = 'كل عام وأنتم بخير';
      if (timer) {
        clearInterval(timer);
        timer = null;
      }
      return;
    }

    var days = Math.floor(remaining / 86400000);
    var hours = Math.floor((remaining % 86400000) / 3600000);
    var minutes = Math.floor((remaining % 3600000) / 60000);
    var seconds = Math.floor((remaining % 60000) / 1000);

    daysEl.textContent = pad(days);
    hoursEl.textContent = pad(hours);
    minutesEl.textContent = pad(minutes);
    secondsEl.textContent = pad(seconds);
  }

  function closePopup() {
    if (closed) return;
    closed = true;
    popup.classList.remove('ht-show');
    popup.setAttribute('aria-hidden', 'true');
    if (timer) clearInterval(timer);
    if (hideTimer) clearTimeout(hideTimer);
  }

  popup.querySelector('.ht-close').addEventListener('click', closePopup);
  popup.querySelector('.ht-enter').addEventListener('click', closePopup);

  // الظهور مرة واحدة في كل جلسة تصفح
  try {
    if (sessionStorage.getItem('htRamadanSeen') === '1') return;
    sessionStorage.setItem('htRamadanSeen', '1');
  } catch (e) {}

  updateCountdown();
  timer = setInterval(updateCountdown, 1000);

  window.setTimeout(function () {
    if (closed) return;
    popup.classList.add('ht-show');
    popup.setAttribute('aria-hidden', 'false');
    hideTimer = setTimeout(closePopup, displayDuration);
  }, 1200);
})();
//]]>
</script>

ملاحظة

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

الخلاصة

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

وفي الختام !

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