هلا تك

تركيب بطاقة منبثقة على قالب بلوجر الباقي على رمضان مع عداد تنازلي متحرك

2026-10-18T11:43:12.243+02:00

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

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

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

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

عداد تنازلي لرمضان يعرض الأيام والساعات والدقائق والثواني المتبقية حتى موعد رمضان المحدد، مع تحديث الأرقام تلقائيًا كل ثانية.
تصميم رمضاني جذاب تتضمن البطاقة زينة مستوحاة من أجواء الشهر الكريم، مثل الهلال والنجوم والفوانيس
ظهور منبثق أنيق تظهر البطاقة في منتصف الشاشة فوق محتوى المدونة، مع خلفية شفافة وتأثير ضبابي يساعد على إبراز التصميم.
اختفاء تلقائي تختفي البطاقة بعد مدة قصيرة، مما يقلل من إزعاج الزوار ويسمح لهم بمتابعة تصفح الموقع بسهولة.
زر إغلاق مباشر يستطيع الزائر إغلاق البطاقة يدويًا أو الضغط على زر دخول المدونة لمتابعة التصفح.
متوافقة مع الهواتف والكمبيوتر لتظهر البطاقة بصورة مناسبة على الأجهزة المحمولة وأجهزة الكمبيوتر.
تعتمد على 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>

ملاحظة

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

الخلاصة

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

Atlas أفضل قالب بلوجر للمواقع التقنية والأخبارية

2026-09-28T10:41:06.287+02:00

القالب من تعديل مدونة هلا تك
فحص القالب بعد التعديل

Atlas قالب بلوجر بدون حقوق للمواقع التقنية والاخبارية

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

معاينة قالب Atlas

معاينة القالب

مميزات قالب Atlas

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

تحميل القالب

ملاحظة و نصيحة

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

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

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

قالب احترافي، سريع، متجاوب، غني بالمزايا، ومتاح مجانًا بالكامل — كل ما تحتاج إليه لتبدأ في بناء مدونتك بأسلوب أكثر احترافية.

أداة تحويل روابط مع خيار التحقق Recaptcha في بلوجر

2026-09-13T12:13:48.027+02:00

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

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

شرح التركيب بالفيديو

ما هي هذه الأداة؟

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

لماذا تحتاج هذه الأداة في مدونتك؟

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

طريقة تركيب الأداة على قالب بلوجر

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

<style>
:root{--captcha-primary:#6366f1;--captcha-primary-dark:#4f46e5;--captcha-primary-light:#818cf8;--captcha-success:#22c55e;--captcha-success-dark:#16a34a;--captcha-danger:#ef4444;--captcha-bg:#ffffff;--captcha-text:#0f172a;--captcha-text-secondary:#64748b;--captcha-border:#e2e8f0;--captcha-shadow:0 20px 60px rgba(0,0,0,0.15),0 10px 30px rgba(0,0,0,0.05);--captcha-radius:20px;--captcha-transition:all 0.3s cubic-bezier(0.4,0,0.2,1)}
.captcha-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgb(0 0 0 / 60%);display:none;justify-content:center;align-items:center;z-index:999999;direction:rtl;padding:20px;box-sizing:border-box;animation:overlayFadeIn 0.4s ease}
.captcha-overlay.active{display:flex}
@keyframes overlayFadeIn{from{opacity:0;backdrop-filter:blur(0px)}to{opacity:1;backdrop-filter:blur(12px)}}
.captcha-box{background:var(--captcha-bg);border-radius:var(--captcha-radius);box-shadow:var(--captcha-shadow);padding:clamp(24px,4vw,28px);width:100%;max-width:480px;position:relative;animation:boxSlideUp 0.5s cubic-bezier(0.34,1.56,0.64,1);box-sizing:border-box;border:1px solid rgba(255,255,255,0.1)}
@keyframes boxSlideUp{from{opacity:0;transform:translateY(40px) scale(0.95)}to{opacity:1;transform:translateY(0) scale(1)}}
.captcha-close-btn{position:absolute;top:8px;left:8px;background:#f1f5f9;border:none;width:28px;height:28px;border-radius:50%;font-size:18px;cursor:pointer;color:#94a3b8;transition:var(--captcha-transition);display:flex;align-items:center;justify-content:center;line-height:1}
.captcha-close-btn:hover{background:#fee2e2;color:var(--captcha-danger);transform:rotate(90deg)}
.captcha-main{display:flex;align-items:center;gap:clamp(12px,3vw,20px);width:100%;margin-bottom:10px;margin-top:10px}
.captcha-checkbox{width:clamp(44px,8vw,44px);height:clamp(44px,8vw,44px);min-width:44px;min-height:44px;background:#f8fafc;border:3px solid #e2e8f0;border-radius:14px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:var(--captcha-transition);flex-shrink:0;position:relative;outline:none;box-shadow:0 2px 8px rgba(0,0,0,0.04)}
.captcha-checkbox:hover:not(.checked):not(.loading){border-color:var(--captcha-primary);background:#eef2ff;transform:scale(1.05);box-shadow:0 4px 16px rgba(99,102,241,0.15)}
.captcha-checkbox:active:not(.checked):not(.loading){transform:scale(0.95)}
.captcha-checkbox.checked{background:var(--captcha-success);border-color:var(--captcha-success);cursor:default;box-shadow:0 4px 20px rgba(34,197,94,0.3)}
.captcha-checkbox.loading{border-color:var(--captcha-primary);background:#f8fafc;pointer-events:none;box-shadow:0 0 0 4px rgba(99,102,241,0.1)}
.captcha-spinner{width:28px;height:28px;border:3.5px solid #e2e8f0;border-top-color:var(--captcha-primary);border-radius:50%;animation:spin 0.8s linear infinite;display:none}
@keyframes spin{100%{transform:rotate(360deg)}}
.captcha-checkmark{display:none;width:24px;height:24px;color:#ffffff;animation:popIn 0.4s cubic-bezier(0.34,1.56,0.64,1)}
@keyframes popIn{0%{transform:scale(0) rotate(-45deg)}100%{transform:scale(1) rotate(0deg)}}
.captcha-checkbox.checked .captcha-checkmark{display:block}
.captcha-text-group{display:flex;flex-direction:column;justify-content:center;flex:1;min-width:0;gap:4px}
.captcha-label{font-size:clamp(0.95rem,3.5vw,1.1rem);font-weight:700;color:var(--captcha-text);transition:var(--captcha-transition);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:-0.01em}
.captcha-label.verified{color:var(--captcha-success)}
.captcha-progress-area{margin-top:6px;display:none;width:100%}
.captcha-timer{font-size:clamp(0.75rem,2.8vw,0.875rem);color:var(--captcha-text-secondary);display:flex;align-items:center;gap:6px;margin-bottom:10px;font-weight:500}
.captcha-timer b{color:var(--captcha-primary);font-size:clamp(1rem,3vw,1.2rem);font-weight:700;min-width:24px;display:inline-block;text-align:center}
.captcha-progress-bg{width:100%;height:6px;background:#f1f5f9;border-radius:20px;overflow:hidden;box-shadow:inset 0 1px 3px rgba(0,0,0,0.05)}
.captcha-progress-fill{height:100%;background:linear-gradient(90deg,var(--captcha-primary),var(--captcha-primary-light));width:0%;border-radius:20px;transition:width 0.1s linear;position:relative}
.captcha-progress-fill::after{content:&#39;&#39;;position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.3),transparent);animation:shimmer 1.5s infinite}
@keyframes shimmer{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}
.captcha-brand{display:flex;align-items:center;justify-content:center;padding-right:clamp(12px,2.5vw,2px);border-right:2px solid #f1f5f9;flex-shrink:0}
.captcha-robot{width:clamp(36px,7vw,84px);height:clamp(36px,7vw,56px);fill:#94a3b8;transition:var(--captcha-transition)}
.captcha-box:hover .captcha-robot{fill:var(--captcha-primary);transform:scale(1.08) rotate(-5deg)}
.captcha-destination{background:#f8fafc;border:2px solid #e2e8f0;padding:clamp(16px,3vw,24px);text-align:center;border-radius:16px;margin-top:16px;display:none;opacity:0;transform:translateY(10px) scale(0.98);transition:all 0.5s cubic-bezier(0.34,1.56,0.64,1);width:100%;box-sizing:border-box}
.captcha-destination.visible{display:block!important;opacity:1;transform:translateY(0) scale(1);border-color:var(--captcha-success);background:#f0fdf4;box-shadow:0 0 0 4px rgba(34,197,94,0.1)}
.captcha-dest-title{margin-bottom:12px;color:var(--captcha-text);font-size:clamp(0.9rem,3.2vw,1rem);font-weight:700}
.captcha-dest-title .emoji{display:inline-block;animation:bounce 1s infinite}
@keyframes bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
.captcha-go-btn{background:linear-gradient(135deg,var(--captcha-primary),var(--captcha-primary-dark));color:#ffffff!important;padding:14px 28px;border-radius:14px;text-decoration:none;font-weight:600;font-size:clamp(0.875rem,3vw,1rem);display:inline-flex;align-items:center;justify-content:center;gap:10px;width:100%;max-width:220px;transition:var(--captcha-transition);box-shadow:0 4px 16px rgba(99,102,241,0.3);border:none;cursor:pointer;position:relative;overflow:hidden}
.captcha-go-btn::before{content:&#39;&#39;;position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.2),transparent);transition:left 0.6s}
.captcha-go-btn:hover::before{left:100%}
.captcha-go-btn:hover{transform:translateY(-2px) scale(1.02);box-shadow:0 8px 30px rgba(99,102,241,0.4)}
.captcha-go-btn:active{transform:translateY(0) scale(0.98)}
.captcha-btn-icon{width:20px;height:20px;fill:currentColor;transition:var(--captcha-transition)}
.captcha-go-btn:hover .captcha-btn-icon{transform:translateX(-4px)}
@media (max-width:640px){.captcha-box{padding:20px;max-width:100%;margin:0 10px}.captcha-main{gap:12px}.captcha-brand{padding-right:10px}.captcha-go-btn{max-width:100%}}
@media (max-width:420px){.captcha-box{padding:16px;border-radius:16px}.captcha-main{flex-wrap:nowrap;gap:10px}.captcha-checkbox{width:40px;height:40px;min-width:40px;min-height:40px;border-radius:12px}.captcha-checkmark{width:20px;height:20px}.captcha-spinner{width:22px;height:22px}.captcha-label{font-size:0.85rem}.captcha-timer{font-size:0.7rem}.captcha-timer b{font-size:0.9rem}.captcha-robot{width:30px;height:30px}.captcha-brand{padding-right:8px}.captcha-go-btn{padding:12px 20px;font-size:0.8rem;border-radius:12px}.captcha-btn-icon{width:16px;height:16px}.captcha-close-btn{width:24px;height:24px;font-size:16px;top:8px;left:8px}}
@media (max-height:600px) and (orientation:landscape){.captcha-box{padding:16px 24px;max-height:90vh;overflow-y:auto}.captcha-main{margin-bottom:12px;margin-top:12px}.captcha-destination{margin-top:10px;padding:12px 16px}.captcha-go-btn{padding:10px 20px}}
</style>

<template id='captcha-overlay-template'>
  <div class='captcha-overlay' id='captcha-overlay'>
    <div class='captcha-box'>
      <button aria-label='إغلاق' class='captcha-close-btn' id='captcha-close-btn'>&#10005;</button>     
      <div class='captcha-main'>
        <div aria-label='تحقق من أمان الرابط' class='captcha-checkbox' id='captcha-trigger' role='button' tabindex='0'>
          <div class='captcha-spinner'/>
          <div class='captcha-checkmark'>
            <svg fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' viewBox='0 0 24 24'>
              <path d='M5 13l4 4L19 7'/>
            </svg>
          </div>
        </div>
        <div class='captcha-text-group'>
          <div class='captcha-label' id='status-text'> أنا لست برنامج روبوت</div>
          <div class='captcha-progress-area' id='progress-area'>
            <div class='captcha-timer'>
              &#9201;&#65039; يرجى الانتظار <b id='timer-seconds'>20</b> ثانية
            </div>
            <div class='captcha-progress-bg'>
              <div class='captcha-progress-fill' id='progress-fill'/>
            </div>
          </div>
        </div>        
       <div class='captcha-brand'>
<svg class='captcha-robot' viewBox='0 0 122.88 116.79' xmlns='http://www.w3.org/2000/svg'>
  <g>
    <path d='M101.42,40.78c0-0.59-0.02-1.17-0.04-1.75V5.88l-9.16,9.17C84.72,5.86,73.31,0,60.53,0 c-13.3,0-25.12,6.35-32.59,16.18l15.02,15.18c1.47-2.72,3.56-5.06,6.08-6.83c2.62-2.05,6.34-3.72,11.48-3.72 c0.62,0,1.1,0.07,1.45,0.21c6.37,0.5,11.89,4.02,15.14,9.12L66.48,40.77C79.95,40.72,95.17,40.69,101.42,40.78L101.42,40.78 L101.42,40.78z M101.42,40.78L101.42,40.78L101.42,40.78L101.42,40.78z' fill='#1C3AA9'/>
    <path d='M60.29,0c-0.59,0-1.17,0.02-1.75,0.04H25.38l9.17,9.16C25.37,16.71,19.5,28.12,19.5,40.9 c0,13.3,6.35,25.12,16.18,32.59l15.18-15.02c-2.72-1.47-5.06-3.56-6.83-6.08c-2.05-2.62-3.72-6.34-3.72-11.48 c0-0.62,0.07-1.1,0.21-1.45c0.5-6.37,4.02-11.89,9.12-15.14l10.63,10.63C60.23,21.47,60.19,6.26,60.29,0L60.29,0L60.29,0z M60.29,0 L60.29,0L60.29,0L60.29,0z' fill='#4285F4'/>
    <path d='M19.51,40.9c0,0.59,0.02,1.17,0.04,1.75V75.8l9.16-9.16c7.5,9.18,18.91,15.04,31.69,15.04 c13.3,0,25.12-6.35,32.59-16.18L77.97,50.32c-1.47,2.72-3.56,5.06-6.08,6.83c-2.62,2.05-6.34,3.72-11.48,3.72 c-0.62,0-1.1-0.07-1.45-0.21c-6.37-0.5-11.89-4.02-15.14-9.12l10.63-10.63C40.98,40.96,25.76,40.99,19.51,40.9L19.51,40.9 L19.51,40.9z M19.51,40.9L19.51,40.9L19.51,40.9L19.51,40.9z' fill='#ABABAB'/>
    <path d='M26.41,97.52c-1,0-1.89,0.19-2.68,0.57c-0.79,0.37-1.46,0.9-2.01,1.58c-0.54,0.69-0.96,1.52-1.25,2.5 c-0.28,0.97-0.42,2.06-0.42,3.26v3.46c0,1.21,0.14,2.3,0.42,3.27c0.29,0.97,0.7,1.8,1.24,2.49c0.53,0.69,1.18,1.21,1.93,1.58 c0.76,0.37,1.61,0.55,2.55,0.55c0.97,0,1.82-0.14,2.55-0.42c0.74-0.28,1.36-0.69,1.85-1.22c0.5-0.54,0.88-1.19,1.15-1.96 c0.27-0.76,0.44-1.63,0.49-2.6l-2.38,0c-0.06,0.75-0.16,1.39-0.31,1.92c-0.15,0.52-0.36,0.96-0.64,1.3 c-0.27,0.34-0.64,0.58-1.08,0.75c-0.44,0.15-0.98,0.23-1.62,0.23c-0.69,0-1.27-0.15-1.75-0.45c-0.48-0.31-0.87-0.73-1.17-1.26 c-0.29-0.53-0.51-1.16-0.64-1.87c-0.13-0.71-0.19-1.48-0.19-2.31v-3.49c0-0.88,0.08-1.69,0.23-2.41c0.16-0.72,0.41-1.33,0.73-1.84 c0.33-0.51,0.74-0.9,1.24-1.17c0.5-0.28,1.09-0.42,1.78-0.42c0.58,0,1.07,0.09,1.48,0.26c0.41,0.16,0.76,0.42,1.03,0.77 c0.27,0.34,0.48,0.78,0.63,1.31c0.15,0.53,0.24,1.17,0.3,1.91h2.38c-0.04-1.01-0.2-1.91-0.48-2.69c-0.27-0.78-0.66-1.44-1.15-1.97 c-0.49-0.53-1.09-0.94-1.79-1.21C28.12,97.66,27.32,97.52,26.41,97.52L26.41,97.52L26.41,97.52z M84.58,97.52 c-1,0-1.89,0.19-2.68,0.57c-0.79,0.37-1.46,0.9-2.01,1.58c-0.54,0.69-0.96,1.52-1.25,2.5c-0.28,0.97-0.42,2.06-0.42,3.26v3.46 c0,1.21,0.14,2.3,0.42,3.27c0.29,0.97,0.71,1.8,1.24,2.49c0.53,0.69,1.18,1.21,1.93,1.58c0.76,0.37,1.61,0.55,2.55,0.55 c0.97,0,1.82-0.14,2.55-0.42c0.74-0.28,1.36-0.69,1.86-1.22c0.5-0.54,0.88-1.19,1.15-1.96c0.27-0.76,0.44-1.63,0.49-2.6l-2.38,0 c-0.06,0.75-0.16,1.39-0.31,1.92c-0.15,0.52-0.36,0.96-0.64,1.3c-0.28,0.34-0.63,0.58-1.08,0.75c-0.44,0.15-0.98,0.23-1.62,0.23 c-0.69,0-1.27-0.15-1.75-0.45c-0.48-0.31-0.87-0.73-1.17-1.26c-0.29-0.53-0.51-1.16-0.64-1.87c-0.13-0.71-0.19-1.48-0.19-2.31 v-3.49c0-0.88,0.08-1.69,0.23-2.41c0.16-0.72,0.41-1.33,0.73-1.84s0.74-0.9,1.24-1.17c0.5-0.28,1.09-0.42,1.78-0.42 c0.58,0,1.07,0.09,1.48,0.26c0.41,0.16,0.76,0.42,1.03,0.77c0.28,0.34,0.49,0.78,0.63,1.31c0.14,0.53,0.24,1.17,0.29,1.91h2.38 c-0.04-1.01-0.2-1.91-0.48-2.69c-0.28-0.78-0.66-1.44-1.15-1.97c-0.49-0.53-1.09-0.94-1.79-1.21 C86.29,97.66,85.49,97.52,84.58,97.52L84.58,97.52L84.58,97.52z M39.98,97.78l-6.04,18.76h2.42l1.46-4.89h6.34l1.48,4.89h2.42 l-6.05-18.76H39.98L39.98,97.78z M50.61,97.78v18.76h2.36v-7.34h3.62c0.9,0,1.7-0.13,2.4-0.37c0.7-0.26,1.28-0.63,1.75-1.11 c0.48-0.48,0.84-1.07,1.08-1.78c0.25-0.71,0.37-1.52,0.37-2.42c0-0.83-0.13-1.6-0.37-2.29c-0.24-0.7-0.6-1.31-1.07-1.82 c-0.47-0.51-1.06-0.91-1.77-1.2c-0.7-0.28-1.49-0.43-2.4-0.43L50.61,97.78L50.61,97.78z M64,97.78v2.04h4.92v16.72h2.36V99.81h4.93 v-2.04H64L64,97.78z M93.59,97.78v18.76h2.36v-8.67h7.55v8.67h2.37V97.78h-2.37v8.06h-7.55v-8.06H93.59L93.59,97.78z M114.8,97.78 l-6.04,18.76h2.42l1.46-4.89h6.34l1.48,4.89h2.42l-6.05-18.76H114.8L114.8,97.78z M52.97,99.81h3.62c0.58,0,1.06,0.1,1.47,0.31 c0.41,0.21,0.75,0.48,1,0.82c0.27,0.34,0.46,0.74,0.58,1.2c0.13,0.45,0.19,0.91,0.19,1.39c0,0.53-0.06,1.02-0.19,1.47 c-0.12,0.44-0.31,0.82-0.58,1.15c-0.26,0.32-0.59,0.57-1,0.75c-0.4,0.18-0.89,0.27-1.47,0.27h-3.62V99.81L52.97,99.81z M40.99,101.08l2.56,8.53h-5.11L40.99,101.08L40.99,101.08z M115.81,101.08l2.56,8.53h-5.12L115.81,101.08L115.81,101.08z M4.84,102.34c-0.59,0-1.1,0.15-1.53,0.45c-0.42,0.3-0.77,0.71-1.06,1.22l-0.04-1.42H0v13.94h2.28v-9.97 c0.21-0.59,0.52-1.06,0.91-1.4c0.4-0.34,0.91-0.52,1.53-0.52c0.2,0,0.37,0.01,0.53,0.03c0.15,0.01,0.32,0.03,0.5,0.06l-0.01-2.22 c-0.03-0.02-0.09-0.03-0.17-0.05c-0.07-0.03-0.15-0.05-0.23-0.06s-0.18-0.03-0.27-0.04C4.99,102.35,4.91,102.34,4.84,102.34 L4.84,102.34L4.84,102.34z M12.51,102.34c-0.66,0-1.3,0.12-1.92,0.35c-0.62,0.23-1.17,0.61-1.65,1.15 c-0.47,0.52-0.85,1.21-1.15,2.06c-0.29,0.84-0.44,1.88-0.44,3.1v1.57c0,1.06,0.12,1.99,0.37,2.77c0.25,0.78,0.61,1.43,1.07,1.95 c0.47,0.51,1.04,0.88,1.71,1.13c0.67,0.25,1.42,0.37,2.25,0.37c0.6,0,1.14-0.06,1.61-0.18c0.48-0.12,0.91-0.28,1.28-0.46 c0.37-0.2,0.69-0.42,0.95-0.67c0.27-0.25,0.49-0.51,0.68-0.77l-1.19-1.44c-0.19,0.23-0.39,0.45-0.61,0.64 c-0.21,0.19-0.45,0.36-0.71,0.5c-0.26,0.14-0.54,0.25-0.85,0.32c-0.31,0.08-0.66,0.12-1.04,0.12c-1.06,0-1.87-0.34-2.43-1.02 c-0.56-0.68-0.84-1.76-0.84-3.26v-0.32l7.78,0v-1.33c0-1.06-0.09-2-0.27-2.82c-0.18-0.82-0.47-1.5-0.86-2.06 c-0.4-0.56-0.9-0.98-1.52-1.26C14.13,102.48,13.38,102.34,12.51,102.34L12.51,102.34z M12.51,104.3c0.5,0,0.91,0.09,1.24,0.27 s0.58,0.43,0.77,0.76c0.2,0.33,0.34,0.72,0.42,1.17c0.09,0.45,0.15,0.94,0.18,1.48v0.31H9.64c0.03-0.78,0.13-1.43,0.28-1.95 c0.15-0.51,0.36-0.92,0.61-1.22c0.26-0.31,0.55-0.52,0.89-0.64C11.75,104.36,12.11,104.3,12.51,104.3L12.51,104.3L12.51,104.3z' fill='#A6A6A6'/>
  </g>
</svg>
      </div>
      </div>
      <div class='captcha-destination' id='destination-area'>
        <div class='captcha-dest-title'>
          <span class='emoji'>👇</span> الرابط جاهز الآن
        </div>
        <a class='captcha-go-btn' href='#' id='go-link' rel='noopener noreferrer' target='_blank'>
          <svg class='captcha-btn-icon' viewBox='0 0 24 24'>
            <path d='M14,3V5H17.59L7.76,14.83L9.17,16.24L19,6.41V10H21V3M19,19H5V5H12V3H5C3.89,3 3,3.9 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V12H19V19Z'/>
          </svg>
          انقر هنا للمتابعة
        </a>
      </div>
    </div>
  </div>
</template>

<script>
//<![CDATA[
(function() {
  'use strict';

  var CONFIG = {
    timer: 20,
    paramName: 'captcha_go',
    displayMode: 'popup' // 'popup' أو 'inline'
  };

  var utils = {
    encrypt: function(str) {
      return btoa(encodeURIComponent(str));
    },
    decrypt: function(str) {
      try {
        return decodeURIComponent(atob(str));
      } catch(e) {
        return null;
      }
    }
  };

  var captchaElements = null;
  var pendingUrl = null;
  var isVerifying = false;
  var isClosed = false;
  var activeLink = null;

  function createCaptchaElements() {
    var tpl = document.getElementById('captcha-overlay-template');
    if (!tpl) return null;
    var clone = tpl.content.cloneNode(true);
    document.body.appendChild(clone);
    return {
      overlay: document.getElementById('captcha-overlay'),
      checkbox: document.getElementById('captcha-trigger'),
      spinner: document.querySelector('#captcha-trigger .captcha-spinner'),
      statusText: document.getElementById('status-text'),
      progressArea: document.getElementById('progress-area'),
      fill: document.getElementById('progress-fill'),
      seconds: document.getElementById('timer-seconds'),
      destArea: document.getElementById('destination-area'),
      goBtn: document.getElementById('go-link'),
      closeBtn: document.getElementById('captcha-close-btn'),
      box: document.querySelector('.captcha-box')
    };
  }

  function createInlineCaptcha(targetUrl, linkElement) {
    var oldInline = document.getElementById('inline-captcha-container');
    if (oldInline) {
      var oldWrapper = oldInline.parentNode;
      if (oldWrapper) oldWrapper.remove();
    }

    var container = document.createElement('div');
    container.id = 'inline-captcha-container';
    container.style.cssText = `
      margin: 20px auto;
      padding: 24px;
      background: #f8fafc;
      border-radius: 20px;
      border: 2px solid #e2e8f0;
      position: relative;
      max-width: 480px;
      width: 100%;
      box-sizing: border-box;
      animation: boxSlideUp 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
      box-shadow: 0 4px 16px rgba(0,0,0,0.06);
    `;

    var tpl = document.getElementById('captcha-overlay-template');
    var clone = tpl.content.cloneNode(true);
    var box = clone.querySelector('.captcha-box');
    
    box.style.boxShadow = 'none';
    box.style.border = 'none';
    box.style.padding = '0';
    box.style.animation = 'none';
    box.style.background = 'transparent';
    box.style.position = 'relative';
    box.style.direction = 'rtl';
    box.style.textAlign = 'right';
    box.style.width = '100%';
    
    var oldCloseBtn = box.querySelector('.captcha-close-btn');
    if (oldCloseBtn) oldCloseBtn.remove();
    
    var closeBtn = document.createElement('button');
    closeBtn.className = 'captcha-close-btn';
    closeBtn.setAttribute('aria-label', 'إلغاء التحقق');
    closeBtn.innerHTML = '&#10005;';
    closeBtn.style.cssText = `
      position: absolute;
      top: -32px;
      right: -22px;
      background: #ffffff;
      border: 2px solid #e2e8f0;
      width: 32px;
      height: 32px;
      border-radius: 50%;
      font-size: 18px;
      cursor: pointer;
      color: #94a3b8;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      display: flex;
      align-items: center;
      justify-content: center;
      line-height: 1;
      box-shadow: 0 4px 12px rgba(0,0,0,0.1);
      z-index: 10;
      font-weight: 700;
    `;
    
  closeBtn.addEventListener('mouseenter', function() {
      this.style.background = '#fee2e2';
      this.style.borderColor = '#CCCCCC';
      this.style.color = '#ef4444';
      this.style.transform = 'rotate(90deg) scale(1.1)';
    });
    closeBtn.addEventListener('mouseleave', function() {
      this.style.background = '#ffffff';
      this.style.borderColor = '#e2e8f0';
      this.style.color = '#94a3b8';
      this.style.transform = 'rotate(0deg) scale(1)';
      
    });
    
    closeBtn.addEventListener('click', function(e) {
      e.stopPropagation();
      removeInlineCaptcha();
    });
    
    box.appendChild(closeBtn);
    container.appendChild(box);

    if (linkElement && linkElement.parentNode) {
      var wrapper = document.createElement('div');
      wrapper.style.cssText = `
        display: flex;
        justify-content: center;
        width: 100%;
        clear: both;
      `;
      wrapper.appendChild(container);
      linkElement.parentNode.insertBefore(wrapper, linkElement.nextSibling);
    } else {
      document.body.appendChild(container);
    }

    var el = {
      checkbox: container.querySelector('#captcha-trigger'),
      spinner: container.querySelector('#captcha-trigger .captcha-spinner'),
      statusText: container.querySelector('#status-text'),
      progressArea: container.querySelector('#progress-area'),
      fill: container.querySelector('#progress-fill'),
      seconds: container.querySelector('#timer-seconds'),
      destArea: container.querySelector('#destination-area'),
      goBtn: container.querySelector('#go-link'),
      overlay: null,
      closeBtn: closeBtn,
      container: container
    };

    el.goBtn.href = targetUrl;
    el.statusText.textContent = ' أنا لست برنامج روبوت';
    el.statusText.classList.remove('verified');
    el.destArea.classList.remove('visible');
    el.destArea.style.display = 'none';
    el.progressArea.style.display = 'none';
    el.fill.style.width = '0%';
    el.seconds.textContent = CONFIG.timer;
    
    el.checkbox.addEventListener('click', function() {
      if (this.classList.contains('checked') || this.classList.contains('loading') || isVerifying) return;
      startInlineVerification(el);
    });

    window._inlineCaptcha = el;
    return el;
  }

  function startInlineVerification(el) {
    if (isVerifying) return;
    isVerifying = true;
    
    el.checkbox.classList.add('loading');
    el.checkbox.querySelector('.captcha-spinner').style.display = 'block';
    el.progressArea.style.display = 'block';
    
    var timeLeft = CONFIG.timer;
    var startTime = performance.now();
    var duration = CONFIG.timer * 1000;
    
    el.seconds.textContent = timeLeft;
    el.fill.style.width = '0%';
    
    function updateProgress() {
      var elapsed = performance.now() - startTime;
      var progress = Math.min(elapsed / duration, 1);
      
      el.fill.style.width = (progress * 100) + '%';
      
      var remaining = Math.ceil((1 - progress) * CONFIG.timer);
      if (remaining >= 0 && el.seconds.textContent !== remaining.toString()) {
        el.seconds.textContent = remaining;
      }
      
      if (progress < 1) {
        requestAnimationFrame(updateProgress);
      } else {
        el.fill.style.width = '100%';
        el.seconds.textContent = '0';
        el.spinner.style.display = 'none';
        completeInlineVerification(el);
      }
    }
    
    requestAnimationFrame(updateProgress);
  }

  function completeInlineVerification(el) {
    el.checkbox.classList.remove('loading');
    el.checkbox.classList.add('checked');
    el.progressArea.style.display = 'none';
    el.statusText.textContent = ' تم التحقق بنجاح';
    el.statusText.classList.add('verified');
    isVerifying = false;
    
    el.destArea.style.display = 'block';
    setTimeout(function() {
      el.destArea.classList.add('visible');
    }, 50);
  }

  function removeInlineCaptcha() {
    var container = document.getElementById('inline-captcha-container');
    if (container) {
      var wrapper = container.parentNode;
      if (wrapper && wrapper.style.display === 'flex') {
        wrapper.remove();
      } else {
        container.remove();
      }
    }
    isVerifying = false;
    isClosed = true;
    if (activeLink) {
      activeLink.style.display = 'inline';
      activeLink = null;
    }
  }

  document.addEventListener('click', function(e) {
    var link = e.target.closest('a');
    if (!link) return;
    if (link.classList.contains('captcha-go-btn') || link.closest('.captcha-box')) return;
    
    var isExternal = link.hostname && link.hostname !== window.location.hostname;
    var isValidProtocol = link.href && (link.href.indexOf('http://') === 0 || link.href.indexOf('https://') === 0);
    var isNotMailto = link.href && link.href.indexOf('mailto:') === -1;
    var isNotTel = link.href && link.href.indexOf('tel:') === -1;
    
    if (isExternal && isValidProtocol && isNotMailto && isNotTel) {
      e.preventDefault();
      pendingUrl = link.href;
      isClosed = false;

      if (CONFIG.displayMode === 'inline') {
        activeLink = link;
        link.style.display = 'none';
        createInlineCaptcha(pendingUrl, link);
      } else {
        showCaptcha(pendingUrl);
      }
    }
  });

  function showCaptcha(targetUrl) {
    if (!captchaElements) {
      captchaElements = createCaptchaElements();
      if (!captchaElements) return;
    }
    
    var el = captchaElements;
    el.checkbox.classList.remove('checked', 'loading');
    el.spinner.style.display = 'none';
    el.progressArea.style.display = 'none';
    el.destArea.classList.remove('visible');
    el.destArea.style.display = 'none';
    el.statusText.textContent = ' أنا لست برنامج روبوت';
    el.statusText.classList.remove('verified');
    el.fill.style.width = '0%';
    el.seconds.textContent = CONFIG.timer;
    isVerifying = false;
    
    el.goBtn.href = targetUrl;
    el.overlay.classList.add('active');
    document.body.style.overflow = 'hidden';
    
    var newCheckbox = el.checkbox.cloneNode(true);
    el.checkbox.parentNode.replaceChild(newCheckbox, el.checkbox);
    captchaElements.checkbox = newCheckbox;
    captchaElements.spinner = newCheckbox.querySelector('.captcha-spinner');
    
    newCheckbox.addEventListener('click', function() {
      if (this.classList.contains('checked') || this.classList.contains('loading') || isVerifying || isClosed) return;
      startVerification(this);
    });
    
    if (el.closeBtn) {
      var newCloseBtn = el.closeBtn.cloneNode(true);
      el.closeBtn.parentNode.replaceChild(newCloseBtn, el.closeBtn);
      captchaElements.closeBtn = newCloseBtn;
      newCloseBtn.addEventListener('click', function() {
        closeCaptcha();
      });
    }
    
    document.addEventListener('keydown', function escHandler(e) {
      if (e.key === 'Escape') {
        closeCaptcha();
        document.removeEventListener('keydown', escHandler);
      }
    });
  }

  function startVerification(checkbox) {
    if (isVerifying || isClosed) return;
    isVerifying = true;
    
    checkbox.classList.add('loading');
    checkbox.querySelector('.captcha-spinner').style.display = 'block';
    captchaElements.progressArea.style.display = 'block';
    
    var timeLeft = CONFIG.timer;
    var startTime = performance.now();
    var duration = CONFIG.timer * 1000;
    
    captchaElements.seconds.textContent = timeLeft;
    captchaElements.fill.style.width = '0%';
    
    function updateProgress() {
      if (isClosed) return;
      var elapsed = performance.now() - startTime;
      var progress = Math.min(elapsed / duration, 1);
      captchaElements.fill.style.width = (progress * 100) + '%';
      var remaining = Math.ceil((1 - progress) * CONFIG.timer);
      if (remaining >= 0 && captchaElements.seconds.textContent !== remaining.toString()) {
        captchaElements.seconds.textContent = remaining;
      }
      if (progress < 1) {
        requestAnimationFrame(updateProgress);
      } else {
        captchaElements.fill.style.width = '100%';
        captchaElements.seconds.textContent = '0';
        captchaElements.spinner.style.display = 'none';
        completeVerification();
      }
    }
    requestAnimationFrame(updateProgress);
  }

  function completeVerification() {
    if (isClosed) return;
    captchaElements.checkbox.classList.remove('loading');
    captchaElements.checkbox.classList.add('checked');
    captchaElements.progressArea.style.display = 'none';
    captchaElements.statusText.textContent = ' تم التحقق بنجاح';
    captchaElements.statusText.classList.add('verified');
    isVerifying = false;
    captchaElements.destArea.style.display = 'block';
    setTimeout(function() {
      if (!isClosed) {
        captchaElements.destArea.classList.add('visible');
      }
    }, 50);
  }

  function closeCaptcha() {
    isClosed = true;
    isVerifying = false;
    if (captchaElements && captchaElements.overlay) {
      captchaElements.overlay.classList.remove('active');
      document.body.style.overflow = '';
    }
    pendingUrl = null;
  }

  function checkForRedirect() {
    var params = new URLSearchParams(window.location.search);
    if (params.has(CONFIG.paramName)) {
      var target = utils.decrypt(params.get(CONFIG.paramName));
      if (target) {
        var url = new URL(window.location.href);
        url.searchParams.delete(CONFIG.paramName);
        window.history.replaceState({}, '', url.toString());
        setTimeout(function() {
          window.location.href = target;
        }, 500);
      }
    }
  }

  document.addEventListener('DOMContentLoaded', function() {
    checkForRedirect();
    if (!captchaElements && CONFIG.displayMode === 'popup') {
      captchaElements = createCaptchaElements();
      if (captchaElements) {
        captchaElements.overlay.classList.remove('active');
        document.body.style.overflow = '';
      }
    }
  });

})();
//]]>

</script>

اضغط على حفظ ~~(Save)~~ واختبر الأداة بالنقر على رابط خارجي في مدونتك.

تغيير شكل الأيقونة

يمكنك استبدال أيقونة الروبوت الافتراضية بأيقونة أخرى من اختيارك، فقط استبدل كود SVG داخل عنصر .captcha-robot.

ملاحظة مهمة

يمكنك أختيار بين شكلين لعرض أداة التحقق و تحويل الرابط إما منبثق أو ثابت

ستجد بداخل الأكواد

var CONFIG = {
timer: 20,
paramName: 'captcha_go',
displayMode: 'popup' // 'popup' أو 'inline'
};

موجودة تلقائيا على خيار الأضافة منبثقة ~~popup~~ أذا غيرتها الى ~~inline~~ ستظهر ثابتة

و ستجد ~~عدد الثواني~~ الخاصة بعداد التحويل هي 20 ثانية و هي موجودة في ~~مكانين~~ بداخل الأكواد غير الرقم للذي تريده ~~في المكانين~~ شاهد الفيديو

مميزات إضافية

متجاوب مع جميع الأجهزة: يعمل بشكل مثالي على الهواتف والأجهزة اللوحية والحواسيب
خفة الوزن: لا يؤثر على سرعة تحميل المدونة
سهولة التركيب: لا يحتاج إلى خبرة برمجية
توافق مع جميع المتصفحات: يدعم Chrome و Firefox و Safari و Edge

ملاحظات هامة

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

الخاتمة

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

أضافة بطاقات المؤلفين الى قوالب بلوجر بشكل سلايدر

2026-08-31T10:10:17.117+02:00

أهمية إضافة بطاقة تعريف المؤلف في قوالب بلوجر

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

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

ما هي بطاقة تعريف المؤلف في بلوجر؟

بطاقة تعريف المؤلف، والتي تُعرف أيضًا باسم Author Box أو Blogger Author Box، هي عنصر يتم إضافته إلى صفحات المقالات لعرض بيانات الكاتب بطريقة منظمة.

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

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

لماذا تحتاج مدونة بلوجر إلى بطاقة مؤلف؟

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

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

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

تحسين ثقة الزائر بالمحتوى

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

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

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

علاقة بطاقة المؤلف بتحسين SEO

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

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

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

تحسين تجربة المستخدم

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

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

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

إضافة روابط التواصل الاجتماعي

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

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

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

أين يفضل وضع بطاقة المؤلف؟

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

ويمكن أيضًا وضعها قبل المقال في بعض أنواع المدونات، خصوصًا المواقع التي يكون فيها اسم الكاتب وخبرته عنصرًا مهمًا بالنسبة للقارئ.

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

تصميم بطاقة مؤلف احترافية لقوالب بلوجر

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

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

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

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

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

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

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

أهم النصائح عند إضافة صندوق المؤلف

للحصول على أفضل نتيجة عند إضافة بطاقة المؤلف لبلوجر، يفضل اتباع بعض النصائح المهمة:

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

الخلاصة

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

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

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

معاينة البطاقات

طريقة تركيب البطاقات

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

و لا تنسى وضع عنوان للصفحة و الغاء التعليقات

<div class="team-slider">
  <button id="left" class="team-arrow" aria-label="Previous">
    <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
      <polyline points="15 6 9 12 15 18" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
    </svg>
  </button>

  <ul class="team-carousel">
    <li class="team-card">
      <div class="team-img">
        <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQjkSVCBI69NxYIT6CUQ1wFiUOIJv-JZ9Uai1lUX9_S-g&s" alt="Atharv" draggable="false">
      </div>
      <h2>Atharv</h2>
      <span>Founder</span>
      <p class="team-desc">Passionate entrepreneur leading the vision and strategy of the company.</p>
      <a target="_blank" rel="noopener noreferrer" href="https://example.com/atharv" class="team-btn">View Profile</a>
    </li>
    <li class="team-card">
      <div class="team-img">
        <img src="https://images.unsplash.com/photo-1539571696357-5a69c17a67c6?w=600&auto=format&fit=crop&q=60" alt="Arjun" draggable="false">
      </div>
      <h2>Arjun</h2>
      <span>Web Developer</span>
      <p class="team-desc">Full-stack web developer creating modern and scalable solutions.</p>
      <a target="_blank" rel="noopener noreferrer" href="#" class="team-btn">View Profile</a>
    </li>
    <li class="team-card">
      <div class="team-img">
        <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ9SxmItTvkyQk0JORqWUL5Ga3eSoxie7tmJELiNRJ9dQ&s" alt="Riya" draggable="false">
      </div>
      <h2>Riya</h2>
      <span>Graphics Designer</span>
      <p class="team-desc">Creative designer turning ideas into stunning visuals.</p>
      <a target="_blank" rel="noopener noreferrer" href="https://example.com/Riya" class="team-btn">View Profile</a>
    </li>
    <li class="team-card">
      <div class="team-img">
        <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=600&auto=format&fit=crop&q=60" alt="Rahul" draggable="false">
      </div>
      <h2>Rahul</h2>
      <span>Freelancer</span>
      <p class="team-desc">Freelancer with expertise in digital marketing and content creation.</p>
      <a target="_blank" rel="noopener noreferrer" href="https://example.com/Rahul" class="team-btn">View Profile</a>
    </li>
    <li class="team-card">
      <div class="team-img">
        <img src="https://plus.unsplash.com/premium_photo-1688350808212-4e6908a03925?w=600&auto=format&fit=crop&q=60" alt="Monika" draggable="false">
      </div>
      <h2>Monika</h2>
      <span>Freelancer</span>
      <p class="team-desc">Freelancer specializing in UI/UX and responsive designs.</p>
      <a target="_blank" rel="noopener noreferrer" href="https://example.com/Monika" class="team-btn">View Profile</a>
    </li>
    <li class="team-card">
      <div class="team-img">
        <img src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=600&auto=format&fit=crop&q=60" alt="Ziya" draggable="false">
      </div>
      <h2>Ziya</h2>
      <span>App Designer</span>
      <p class="team-desc">App designer crafting intuitive and user-friendly mobile experiences.</p>
      <a target="_blank" rel="noopener noreferrer" href="https://example.com/Ziya" class="team-btn">View Profile</a>
    </li>
  </ul>

  <button id="right" class="team-arrow" aria-label="Next">
    <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
      <polyline points="9 6 15 12 9 18" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
    </svg>
  </button>
  <div class="team-dots"></div>
</div>

<style>

.team-slider *,.team-slider *::before,.team-slider *::after{box-sizing:border-box}
.team-slider{max-width:1140px;width:100%;position:relative;margin:0 auto;padding:0 20px}
.team-arrow{position:absolute;top:50%;transform:translateY(-50%);display:flex;align-items:center;justify-content:center;width:46px;height:46px;padding:0;border-radius:50%;border:none;background:#fff;box-shadow:0 4px 12px rgba(0,0,0,0.15);cursor:pointer;z-index:10;transition:all 0.3s ease}
.team-arrow:hover{background:#8b53ff;color:#fff}
.team-arrow svg{display:block;width:18px;height:18px}
.team-arrow{color:#222}
.team-arrow#left{left:-5px}
.team-arrow#right{right:-5px}
.team-slider .team-carousel{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% / 3) - 12px);overflow-x:auto;scroll-snap-type:x mandatory;gap:18px;scroll-behavior:smooth;scrollbar-width:none;padding:15px 5px;margin:0;list-style:none}
.team-carousel::-webkit-scrollbar{display:none}
.team-carousel.no-transition{scroll-behavior:auto}
.team-carousel.dragging{scroll-snap-type:none;scroll-behavior:auto}
.team-carousel.dragging .team-card{cursor:grab;user-select:none}
.team-carousel .team-card{scroll-snap-align:start;min-height:420px;background:#fff;border-radius:12px;padding:25px 20px;display:flex;flex-direction:column;align-items:center;text-align:center;box-shadow:0 10px 20px rgba(0,0,0,0.05),0 2px 6px rgba(0,0,0,0.05);transition:transform 0.3s ease,box-shadow 0.3s ease}
.team-carousel .team-card:hover{transform:translateY(-5px);box-shadow:0 15px 30px rgba(139,83,255,0.15)}
.team-carousel .team-card .team-img{background:#8b53ff;height:140px;width:140px;border-radius:50%;overflow:hidden;display:flex;justify-content:center;align-items:center;margin-bottom:15px;flex-shrink:0}
.team-card .team-img img{width:132px;height:132px;border-radius:50%;object-fit:cover;border:4px solid #fff}
.team-carousel .team-card h2{font-weight:600;font-size:1.4rem;margin:5px 0 2px;color:#222}
.team-carousel .team-card span{color:#8b53ff;font-size:1rem;font-weight:500;margin-bottom:12px}
.team-card .team-desc{font-size:0.9rem;color:#6a6d78;margin:0 0 20px 0;line-height:1.5;flex-grow:1}
.team-btn{display:inline-block;width:100%;max-width:160px;padding:10px 0;background:#8b53ff;color:#fff;text-decoration:none;border-radius:30px;font-size:0.95rem;font-weight:500;transition:background 0.3s,transform 0.2s;margin-top:auto}
.team-btn:hover{background:#6a36d6}
@media screen and (max-width:900px){.team-slider .team-carousel{grid-auto-columns:calc((100% / 2) - 9px)}.team-arrow#left{left:-15px}.team-arrow#right{right:-15px}}
@media screen and (max-width:600px){.team-slider .team-carousel{grid-auto-columns:100%}.team-arrow#left{left:-10px}.team-arrow#right{right:-10px}}
.team-dots{display:flex;justify-content:center;gap:8px;margin-top:20px}
.team-dots .dot{width:10px;height:10px;background:#d1d1d1;border-radius:50%;cursor:pointer;transition:all 0.3s ease}
.team-dots .dot.active{background:#8b53ff;width:24px;border-radius:5px}
</style>

<script>
const wrapper = document.querySelector(".team-slider");
const carousel = document.querySelector(".team-carousel");
const firstCard = carousel.querySelector(".team-card");
const arrowBtns = document.querySelectorAll(".team-arrow");
const dotsContainer = document.querySelector(".team-dots");
const carouselChildrens = [...carousel.children];

let isDragging = false, isAutoPlay = true, startX, startScrollLeft, timeoutId;

const getCardWidth = () => firstCard.offsetWidth + parseFloat(window.getComputedStyle(carousel).gap);
let firstCardWidth = getCardWidth();

let cardPerView = Math.round(carousel.offsetWidth / firstCard.offsetWidth);

carouselChildrens.slice(-cardPerView).reverse().forEach(card => {
  carousel.insertAdjacentHTML("afterbegin", card.outerHTML);
});
carouselChildrens.slice(0, cardPerView).forEach(card => {
  carousel.insertAdjacentHTML("beforeend", card.outerHTML);
});

carousel.classList.add("no-transition");
carousel.scrollLeft = carousel.offsetWidth;
carousel.classList.remove("no-transition");

window.addEventListener('resize', () => {
  firstCardWidth = getCardWidth();
});

arrowBtns.forEach(btn => {
  btn.addEventListener("click", () => {
    carousel.scrollLeft += btn.id === "left" ? -firstCardWidth : firstCardWidth;
    setTimeout(updateDots, 50);
  });
});

const dragStart = (e) => {
  isDragging = true;
  carousel.classList.add("dragging");
  startX = e.pageX || e.touches[0].pageX;
  startScrollLeft = carousel.scrollLeft;
}

const dragging = (e) => {
  if(!isDragging) return;
  const pageX = e.pageX || e.touches[0].pageX;
  carousel.scrollLeft = startScrollLeft - (pageX - startX);
}

const dragStop = () => {
  isDragging = false;
  carousel.classList.remove("dragging");
}

const infiniteScroll = () => {
  if(carousel.scrollLeft === 0) {
    carousel.classList.add("no-transition");
    carousel.scrollLeft = carousel.scrollWidth - (2 * carousel.offsetWidth);
    carousel.classList.remove("no-transition");
  }
  else if(Math.ceil(carousel.scrollLeft) >= carousel.scrollWidth - carousel.offsetWidth) {
    carousel.classList.add("no-transition");
    carousel.scrollLeft = carousel.offsetWidth;
    carousel.classList.remove("no-transition");
  }
  clearTimeout(timeoutId);
  if(!wrapper.matches(":hover")) autoPlay();
  updateDots();
}

const autoPlay = () => {
  if(window.innerWidth < 800 || !isAutoPlay) return;
  timeoutId = setTimeout(() => {
    carousel.scrollLeft += firstCardWidth;
    updateDots();
  }, 3000);
}

let totalCards = carouselChildrens.length;
for(let i=0; i<totalCards; i++) {
  const dot = document.createElement("div");
  dot.classList.add("dot");
  if(i === 0) dot.classList.add("active");
  dot.addEventListener("click", () => {
    carousel.scrollLeft = (i + cardPerView) * firstCardWidth;
    updateDots();
  });
  dotsContainer.appendChild(dot);
}

const updateDots = () => {
  let currentIndex = Math.round((carousel.scrollLeft - carousel.offsetWidth) / firstCardWidth);
  if(currentIndex >= totalCards) currentIndex = 0;
  if(currentIndex < 0) currentIndex = totalCards - 1;

  document.querySelectorAll(".team-dots .dot").forEach((dot, idx) => {
    dot.classList.toggle("active", idx === currentIndex);
  });
}

autoPlay();
carousel.addEventListener("mousedown", dragStart);
carousel.addEventListener("mousemove", dragging);
document.addEventListener("mouseup", dragStop);
carousel.addEventListener("scroll", infiniteScroll);

carousel.addEventListener("touchstart", dragStart);
carousel.addEventListener("touchmove", dragging);
carousel.addEventListener("touchend", dragStop);

wrapper.addEventListener("mouseenter", () => clearTimeout(timeoutId));
wrapper.addEventListener("mouseleave", autoPlay);
</script>

و ثم قم بالحفظ و شاهد النتيجة

أضافة بطاقة عرض معلومات تطبيقات الموبايل بشكل أحترفي

2026-08-18T12:25:31.098+02:00

تركيب بطاقة عرض معلومات تطبيقات الموبايل بداخل المواضيع

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

فوائد تركيب بطاقة معلومات تطبيقات الموبايل داخل المواضيع

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

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

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

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

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

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

ومن المميزات المهمة

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

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

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

معاينة البطاقة

شرح تركيب بطاقة معلومات تطبيقات الموبايل

نذهب الى المظهر
نختارتعديل ~~HTML~~
نبحث بداخل اكواد القالب عن ~~</head>~~ و نضيف الكود التالي اعلاه

<style>
:root{--primary-color:#0066cc;--primary-hover:#0052a3;--bg-card:#ffffff;--text-main:#1d1d1f;--text-muted:#6e6e73;--border-color:#e5e5ea}
.mobile-app-card{direction:rtl;max-width:750px;margin:25px auto;background:var(--bg-card);border-radius:20px;border:1px solid var(--border-color);box-shadow:0 12px 32px rgba(0,0,0,0.05);padding:24px;box-sizing:border-box}
.mobile-card-header{display:flex;align-items:center;gap:16px;margin-bottom:16px}
img.mobile-app-icon{width:80px!important;height:auto;border-radius:18px;object-fit:cover;box-shadow:0 6px 16px rgba(0,0,0,0.08);flex-shrink:0}
.mobile-header-info{display:flex;flex-direction:column;gap:6px}
.mobile-app-title{font-size:1.25rem;font-weight:700;color:var(--text-main);margin:0;line-height:1.4}
.mobile-badges-group{display:flex;gap:8px;flex-wrap:wrap}
.mobile-badge{display:inline-flex;align-items:center;gap:4px;background-color:#e8f2ff;color:var(--primary-color);font-size:0.75rem;font-weight:600;padding:4px 10px;border-radius:20px}
.mobile-badge-success{background-color:#e6f4ea;color:#137333}
.mobile-app-desc{color:var(--text-muted);font-size:0.92rem;line-height:1.6;margin:0 0 16px 0}
.mobile-features-list{list-style:none;padding:0;margin:0 0 20px 0;display:grid;grid-template-columns:repeat(2,1fr);gap:8px;font-size:0.85rem;color:var(--text-main)}
.mobile-features-list li::before{content:"✓";color:var(--primary-color);font-weight:bold;margin-left:6px}
.mobile-screenshots-container{margin-bottom:20px}
.mobile-screenshots-title{font-size:18px;font-weight:700;color:var(--text-main);margin-bottom:10px}
.mobile-screenshots-scroll{display:flex;gap:12px;overflow-x:auto;padding-bottom:8px;scroll-behavior:smooth;-webkit-overflow-scrolling:touch}
.mobile-screenshots-scroll::-webkit-scrollbar{height:6px}
.mobile-screenshots-scroll::-webkit-scrollbar-thumb{background:#d1d1d6;border-radius:10px}
.mobile-app-shot{width:110px!important;height:auto;border-radius:12px;object-fit:cover;border:1px solid var(--border-color);flex-shrink:0;box-shadow:0 4px 12px rgba(0,0,0,0.04)}
.mobile-grid-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;background:#fbfbfd;padding:16px;border-radius:14px;border:1px solid #f0f0f5;margin-bottom:20px}
.mobile-stat-item{display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px}
.mobile-stat-label{font-size:0.75rem;color:var(--text-muted)}
.mobile-stat-value{font-size:0.88rem;font-weight:700;color:var(--text-main)}
.mobile-card-actions{display:flex;gap:12px}
.mobile-btn{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 20px;border-radius:12px;font-weight:600;font-size:0.95rem;text-decoration:none;transition:all 0.2s ease;cursor:pointer}
.mobile-btn-primary{background:var(--primary-color);color:#ffffff!important;border:none}
.mobile-btn-primary:hover{background:var(--primary-hover);transform:translateY(-1px)}
.mobile-btn-secondary{background:#f2f2f7;color:var(--text-main)!important;border:1px solid var(--border-color)}
.mobile-btn-secondary:hover{background:#e5e5ea}
@media (max-width:576px){
.mobile-grid-stats{grid-template-columns:repeat(2,1fr);gap:12px}
.mobile-features-list{grid-template-columns:1fr}
.mobile-card-actions{flex-direction:column}
.mobile-app-icon{width:65px!important;height:65px!important}
.mobile-app-shot{width:110px;height:190px} 
}
</style>

و الان عند كتابة اي موضوع انتقل الى عرض ~~HTML~~ و الصق الكود التالي بداخله في المكان المناسب

<div class="mobile-app-card">
  <div class="mobile-card-header">
    <img class="mobile-app-icon" src="https://help.apple.com/assets/69F8EBBDF3B89A4F6E0C704C/69F8EBC43862495245036393/ar_EG/0db59df6e2dbd46a2ca6f529a9c52606.png" alt="آيقونة التطبيق">
    <div class="mobile-header-info">
      <h2 class="mobile-app-title">تطبيق أحترافي لتسجيل المكالمات تلقائياً</h2>
      <div class="mobile-badges-group">
        <span class="mobile-badge">نسخة كاملة أوفلاين</span>
        <span class="mobile-badge mobile-badge-success">🛡️ آمن ومفحوص</span>
      </div>
    </div>
  </div>

  <p class="mobile-app-desc">
    برنامج تسجيل المكالمات الاحترافي يتيح لك تسجيل جميع المكالمات الصادرة والواردة بجودة عالية وبشكل تلقائي بدون الحاجة للاتصال بالإنترنت.
  </p>

  <ul class="mobile-features-list">
   <li>تسجيل تلقائي بجودة MP3 عالية</li>
    <li>حماية التسجيلات برقم سري أو بصمة</li>
    <li>دعم الميكروفون والسماعة الخارجية</li>
    <li>نسخ احتياطي سحابي اختياري</li>
  </ul>

  <div class="mobile-screenshots-container">
    <div class="mobile-screenshots-title">لقطات من داخل التطبيق:</div>
    <div class="mobile-screenshots-scroll">
      <img class="mobile-app-shot" src="https://upload.wikimedia.org/wikipedia/ar/7/79/IOS_17_Homescreen.png" alt="الشاشة الرئيسية">
      <img class="mobile-app-shot" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRCuFnQVtAFqPECchprmugbEQzCLiSaGsWUp7Xd_xgk4ANUSOAUzBOhTA&s=10" alt="سجل المكالمات">
      <img class="mobile-app-shot" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSey970DEmGtMKHRRarfcpDrzKqaQY1Qr5l6MGgGm4l09rSX8kJ4CIBmw0&s=10" alt="الإعدادات">
      <img class="mobile-app-shot" src="https://img.youm7.com/images/NewsPics/gallery/pics/8201544184571.jpg" alt="مشغل الصوت">
    </div>
  </div>

  <div class="mobile-grid-stats">
    <div class="mobile-stat-item">
      <span class="mobile-stat-label">الإصدار</span>
      <span class="mobile-stat-value">v26.3 (2025)</span>
    </div>
    <div class="mobile-stat-item">
      <span class="mobile-stat-label">التقييم</span>
      <span class="mobile-stat-value">⭐ 4.8 / 5</span>
    </div>
    <div class="mobile-stat-item">
      <span class="mobile-stat-label">النظام المطلوب</span>
      <span class="mobile-stat-value">Android 6.0+</span>
    </div>
    <div class="mobile-stat-item">
      <span class="mobile-stat-label">التحميلات</span>
      <span class="mobile-stat-value">89,793</span>
    </div>
  </div>

  <div class="mobile-card-actions">
    <a class="mobile-btn mobile-btn-primary" href="#" target="_blank" rel="nofollow">
     تحميل مباشر (APK)
    </a>
        <a class="mobile-btn mobile-btn-secondary" href="#" target="_blank" rel="nofollow">
       شرح الاستخدام
    </a>
  </div>
</div>

و اخيرا عدل النصوص و الارقام و الصوربما تراه مناسب و قم بالحفظ

أضافة بطاقات الأسعار و خطة المشتريات في قوالب بلوجر

2026-08-07T10:09:06.154+02:00

كود بطاقات أسعار احترافي لبلوجر بتصميم متجاوب وعصري

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

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

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

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

لماذا تحتاج إلى بطاقات أسعار في موقعك؟

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

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

أهم مميزات الكود

يتميز هذا الكود بمجموعة كبيرة من الخصائص التي تجعله مناسبًا لمعظم مواقع بلوجر، ومن أبرزها:

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

فيما يمكن استخدام هذا الكود في العديد من المجالات، مثل:

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

هل الكود سريع و يؤثر على القالب

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

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

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

طريقة التركيب

نذهب الى المظهر

نختارتعديل ~~HTML~~

نبحث بداخل اكواد القالب عن ~~</head>~~ و نضيف الكود التالي اعلاه

<style>
:root {
--primary-color: #07acb2;
--secondary-color: #53bca7;
--font-family: 'Tajawal', sans-serif;
}

.pricing-wrapper {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 25px;
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 20px;
font-family: var(--font-family);
direction: rtl;
box-sizing: border-box;
}

/* متغيرات ألوان كل حزمة */
.plan-starter {
--theme-color: #10aeb0;
--gradient-bg: linear-gradient(270deg, #07acb2 0.2%, #53bca7);
--shadow-color: rgba(11, 121, 107, 0.3);
}

.plan-popular {
--theme-color: #f7a379;
--gradient-bg: linear-gradient(90.1deg, #f59878 0.2%, #fdca7b 99.9%);
--shadow-color: rgba(247, 163, 121, 0.3);
}

.plan-pro {
--theme-color: #ee5285;
--gradient-bg: linear-gradient(90.1deg, #f4806f 0.2%, #ee4d88);
--shadow-color: rgba(238, 77, 136, 0.3);
}

.plan-card {
flex: 1 1 300px;
max-width: 360px;
background: #ffffff;
border: 1px solid var(--theme-color);
border-radius: 20px;
padding: 30px 20px;
display: flex;
flex-direction: column;
align-items: center;
position: relative;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.plan-card:hover {
transform: translateY(-8px);
box-shadow: 0 10px 25px var(--shadow-color);
}

.plan-card.popular .badge {
position: absolute;
top: -14px;
background: var(--gradient-bg);
color: #fff;
font-size: 12px;
font-weight: bold;
padding: 6px 16px;
border-radius: 20px;
box-shadow: 0 4px 10px var(--shadow-color);
}

.plan-header {
text-align: center;
margin-bottom: 20px;
width: 100%;
}

.plan-icon {
font-size: 50px;
color: var(--theme-color);
margin-bottom: 15px;
}

.plan-title {
background: var(--gradient-bg);
color: #ffffff;
padding: 8px 20px;
border-radius: 20px;
font-size: 16px;
margin: 0 auto;
width: fit-content;
box-shadow: 0 4px 12px var(--shadow-color);
}

.plan-price {
display: flex;
align-items: baseline;
justify-content: center;
gap: 5px;
color: var(--theme-color);
margin-bottom: 25px;
}

.plan-price .amount {
font-size: 48px;
font-weight: 700;
line-height: 1;
}

.plan-price .currency {
font-size: 16px;
font-weight: 500;
}

.plan-features {
list-style: none;
padding: 0;
margin: 0 0 30px 0;
width: 100%;
}

.plan-features li {
padding: 10px 0;
font-size: 14px;
color: #555;
display: flex;
align-items: center;
justify-content: flex-start;
gap: 10px;
border-bottom: 1px dashed #f0f0f0;
}

.plan-features li:last-child {
border-bottom: none;
}

.plan-features li::before {
content: "\f058";
font-family: "Font Awesome 6 Free";
font-weight: 900;
color: var(--theme-color);
font-size: 16px;
}

.plan-footer {
margin-top: auto;
width: 100%;
display: flex;
justify-content: center;
}

.btn-buy {
background: var(--gradient-bg);
color: #ffffff;
text-decoration: none;
padding: 10px 40px;
border-radius: 25px;
font-weight: bold;
display: inline-flex;
align-items: center;
gap: 8px;
transition: all 0.3s ease;
box-shadow: 0 4px 12px var(--shadow-color);
}

.btn-buy::before {
content: "\f07a";
font-family: "Font Awesome 6 Free";
font-weight: 900;
font-size: 14px;
transition: transform 0.3s ease;
}

.btn-buy:hover {
opacity: 0.95;
}

.btn-buy:hover::before {
transform: translateX(-4px);
}

/* التجاوب مع الشاشات الصغيرة */
@media (max-width: 768px) {
.pricing-wrapper {
flex-direction: column;
align-items: center;
}

.plan-card {
width: 100%;
max-width: 100%;
}
}
</style>

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

الكود التالي بداخله

<div class="pricing-wrapper">
  <!-- الباقة الأولى -->
  <div class="plan-card plan-starter">
    <div class="plan-header">
      <i class="plan-icon fa-solid fa-briefcase"></i>
      <h3 class="plan-title">الحزمة المبتدئة</h3>
    </div>
    
    <div class="plan-price">
      <span class="currency">ريال</span>
      <span class="amount">80</span>
    </div>

    <ul class="plan-features">
      <li>استبدل النص هنا</li>
      <li>استبدل النص هنا</li>
      <li>استبدل النص هنا</li>
      <li>استبدل النص هنا</li>
    </ul>

    <div class="plan-footer">
      <a href="#" class="btn-buy" target="_blank">شراء</a>
    </div>
  </div>

  <!-- الباقة الثانية (الأكثر شهرة) -->
  <div class="plan-card plan-popular popular">
    <span class="badge">الأكثر شهرة</span>
    <div class="plan-header">
      <i class="plan-icon fa-solid fa-rocket"></i>
      <h3 class="plan-title">الحزمة المتوسطة</h3>
    </div>

    <div class="plan-price">
      <span class="currency">ريال</span>
      <span class="amount">110</span>
    </div>

    <ul class="plan-features">
      <li>استبدل النص هنا</li>
      <li>استبدل النص هنا</li>
      <li>استبدل النص هنا</li>
      <li>استبدل النص هنا</li>
    </ul>

    <div class="plan-footer">
      <a href="#" class="btn-buy" target="_blank">شراء</a>
    </div>
  </div>

  <!-- الباقة الثالثة -->
  <div class="plan-card plan-pro">
    <div class="plan-header">
      <i class="plan-icon fa-solid fa-paper-plane"></i>
      <h3 class="plan-title">الحزمة المتقدمة</h3>
    </div>

    <div class="plan-price">
      <span class="currency">ريال</span>
      <span class="amount">150</span>
    </div>

    <ul class="plan-features">
      <li>استبدل النص هنا</li>
      <li>استبدل النص هنا</li>
      <li>استبدل النص هنا</li>
      <li>استبدل النص هنا</li>
    </ul>

    <div class="plan-footer">
      <a href="#" class="btn-buy" target="_blank">شراء</a>
    </div>
  </div>
</div>

الكود يعتمد على مكتبة ايقونات ~~font-awesome~~ اذا لا يحتوي القالب الخاص بك المكتب يمكنك

استخدام الكود التالي و تقوم بلصقه اسفل ~~<head>~~

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" />

ثم قم بالحفظ و شاهد النتيجة

أضافة تأثير الفقاعات الملونة عند النقر بالماوس في قالب بلوجر

2026-07-19T11:58:21.083+02:00

إضافة تأثير الفقاعات الملونة عند النقر بالماوس

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

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

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

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

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

معاينة التأثير على الماوس عند النقر

معاينة التأثيـر

شرح التركيب

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

نذهب الى المظهر
نختارتعديل HTML
نبحث بداخل اكواد القالب عن ~~</head>~~ و نضيف الكود التالي اعلاه

<style>
.click-particle{position:fixed;pointer-events:none;width:14px;height:14px;border-radius:50%;z-index:9999;animation:particle-explosion 1.1s ease-out forwards;box-shadow:0 0 6px rgba(255,255,255,0.8)}
.dark .click-particle{box-shadow:0 0 8px rgba(255,255,255,0.4)}
@keyframes particle-explosion{0%{opacity:1;transform:scale(0.4) translate(0,0)}15%{opacity:1;transform:scale(1.3) translate(var(--dx),var(--dy))}60%{opacity:0.8;transform:scale(1) translate(calc(var(--dx) * 2.5),calc(var(--dy) * 2.5))}100%{opacity:0;transform:scale(0.3) translate(calc(var(--dx) * 3.5),calc(var(--dy) * 3.5))}}
.click-particle.color-1{background:#ffc1cc;background:radial-gradient(circle,#ffb3ba 0%,#ffc1cc 100%)}
.click-particle.color-2{background:#bde4ff;background:radial-gradient(circle,#a8d8ff 0%,#bde4ff 100%)}
.click-particle.color-3{background:#fff2a8;background:radial-gradient(circle,#ffe66d 0%,#fff2a8 100%)}
.click-particle.color-4{background:#e6ccff;background:radial-gradient(circle,#d4a5ff 0%,#e6ccff 100%)}
.click-particle.color-5{background:#c1ffc1;background:radial-gradient(circle,#a8e6a8 0%,#c1ffc1 100%)}
.click-particle.color-6{background:#ffd4a3;background:radial-gradient(circle,#ffcc99 0%,#ffd4a3 100%)}
.click-particle.color-7{background:#c4e8ff;background:radial-gradient(circle,#b3deff 0%,#c4e8ff 100%)}
.click-particle.color-8{background:#f8d7da;background:radial-gradient(circle,#f5c2c7 0%,#f8d7da 100%)}
.click-particle.color-9{background:#d1f2d1;background:radial-gradient(circle,#c3e6c3 0%,#d1f2d1 100%)}
.click-particle.color-10{background:#fff0d4;background:radial-gradient(circle,#ffe8b3 0%,#fff0d4 100%)}
.dark .click-particle.color-1{background:#ff6b8a;background:radial-gradient(circle,#ff4757 0%,#ff6b8a 100%)}
.dark .click-particle.color-2{background:#4fc3f7;background:radial-gradient(circle,#29b6f6 0%,#4fc3f7 100%)}
.dark .click-particle.color-3{background:#ffd54f;background:radial-gradient(circle,#ffca28 0%,#ffd54f 100%)}
.dark .click-particle.color-4{background:#ba68c8;background:radial-gradient(circle,#ab47bc 0%,#ba68c8 100%)}
.dark .click-particle.color-5{background:#81c784;background:radial-gradient(circle,#66bb6a 0%,#81c784 100%)}
.dark .click-particle.color-6{background:#ffb74d;background:radial-gradient(circle,#ffa726 0%,#ffb74d 100%)}
.dark .click-particle.color-7{background:#64b5f6;background:radial-gradient(circle,#42a5f5 0%,#64b5f6 100%)}
.dark .click-particle.color-8{background:#f48fb1;background:radial-gradient(circle,#f06292 0%,#f48fb1 100%)}
.dark .click-particle.color-9{background:#a5d6a7;background:radial-gradient(circle,#81c784 0%,#a5d6a7 100%)}
.dark .click-particle.color-10{background:#ffe082;background:radial-gradient(circle,#ffd54f 0%,#ffe082 100%)}
</style>

نبحث عن ~~</body>~~ و نضيف كود الجافا سكربت أعلاه

<script>//<![CDATA[
document.addEventListener('DOMContentLoaded', () => {
function createParticle(
x,
y,
angle,
distance,
colorIndex
) {
const particle = document.createElement('div')
particle.className = `click-particle color-${colorIndex}`
const dx = Math.cos(angle) * distance
const dy = Math.sin(angle) * distance

particle.style.setProperty('--dx', dx + 'px')
particle.style.setProperty('--dy', dy + 'px')

particle.style.left = x + 'px'
particle.style.top = y + 'px'

const size = Math.random() * 6 + 8
particle.style.width = size + 'px'
particle.style.height = size + 'px'

document.body.appendChild(particle)

setTimeout(() => {
if (particle.parentNode) {
particle.parentNode.removeChild(particle)
}
}, 1100)
}

document.addEventListener('click', (e) => {
const particleCount = 10
const baseDistance = 18
for (let i = 0; i < particleCount; i++) {
const angle = ((Math.PI * 2) / particleCount) * i
const distance = baseDistance + Math.random() * 8
const colorIndex = (i % 10) + 1
setTimeout(() => {
createParticle(e.clientX, e.clientY, angle, distance, colorIndex)
}, i * 12)
}

for (let i = 0; i < 4; i++) {
const randomAngle = Math.random() * Math.PI * 2
const randomDistance = baseDistance + Math.random() * 10
const colorIndex = Math.floor(Math.random() * 10) + 1
setTimeout(
() => {
createParticle(e.clientX, e.clientY, randomAngle, randomDistance, colorIndex)
},
(particleCount + i) * 12
)
}
})
})
//]]></script>

ثم تقوم بالحفظ و شاهد النتيجة

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

2026-07-03T10:00:26.853+02:00

كنت قد شرحت في مواضيع سابقة عن طريقة تحويل قالب بلوجر عادي الى قالب بلوجر

لبيع المنتجات و شرحنا في موضوعين سابقين طريقة تحويله

تركيب جدول عرض المنتجات و أسعارها بداخل المواضيع

تركيب زر سلة المشتريات في قالب بلوجر

تركيب كرت عروض ترويجية في قوالب بلوجر بشكل منبثق

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

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

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

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

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

معاينة اضافة كرت عروض ترويجية

طريقة تركيب كرت عروض ترويجية لقالب بلوجر

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

بدون أن تسميها

<b:if cond='data:blog.pageType != "static_page"'>
<style>
#popup-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.7);display:none;justify-content:center;align-items:center;z-index:9999;animation:fadeIn .5s}
#popup-card{background:#fff;border-radius:20px;padding:30px;max-width:400px;width:90%;text-align:center;position:relative;box-shadow:0 15px 40px rgba(0,0,0,.3);animation:slideUp .5s}
#popup-card img{width:100%;max-height:200px;object-fit:cover;border-radius:12px;margin-bottom:15px}
#popup-card h2{font-size:22px;color:#333;margin:10px 0}
.offer-text{font-size:16px;color:#e74c3c;font-weight:bold;background:#fff3f3;padding:10px;border-radius:8px;margin:15px 0}
#countdown{display:flex;flex-direction:row;justify-content:center;align-items:center;gap:15px;direction:ltr;margin:20px 0}
.time-box{background:#2c3e50;color:#fff;border-radius:10px;min-width:65px;padding:10px;text-align:center}
.time-box span:first-child{display:block;font-size:28px;font-weight:bold}
.label{display:block;font-size:12px;margin-top:5px;opacity:.8}
.close-btn{position:absolute;top:10px;right:15px;font-size:28px;cursor:pointer;color:#aaa}
.close-btn:hover{color:#333}
.action-btn{width:100%;padding:12px;border:none;border-radius:30px;background:#e74c3c;color:#fff;font-size:18px;font-weight:bold;cursor:pointer;transition:.3s}
.action-btn:hover{background:#c0392b;transform:scale(1.03)}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes slideUp{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:480px){#popup-card{padding:20px}.time-box{min-width:55px;padding:8px}.time-box span:first-child{font-size:22px}}
</style>

<div id="popup-overlay">
<div id="popup-card">
<span class="close-btn" onclick="closePopup()">×</span>

<img src="https://via.placeholder.com/400x200/3498db/ffffff?text=Product+Image">

<h2>🔥 عرض حصري - منتج الأسبوع</h2>
<div class="offer-text">
🎯 خصم 50% لفترة محدودة!
</div>

<div id="countdown"><div class="time-box"><span id="days">10</span><span class="label">أيام</span></div>
<div class="time-box"><span id="hours">00</span><span class="label">ساعات</span></div>
<div class="time-box"><span id="minutes">00</span><span class="label">دقائق</span></div>
<div class="time-box"><span id="seconds">00</span><span class="label">ثواني</span></div>
</div>
<button class="action-btn" onclick="window.location.href='#'">
اطلب الآن 🛒
</button>

<p style="font-size:13px;color:#888;margin-top:15px;">
* العرض ساري حتى انتهاء الوقت
</p>
</div>
</div>

<script>

const endDate = "2026-07-04";

const targetDate = new Date(endDate + "T23:59:59").getTime();function updateCountdown(){const now = new Date().getTime();const distance = targetDate - now;if (distance <= 0){document.getElementById("days").textContent = "00";document.getElementById("hours").textContent = "00";document.getElementById("minutes").textContent = "00";document.getElementById("seconds").textContent = "00";return;}const days = Math.floor(distance / (1000 * 60 * 60 * 24));const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));const seconds = Math.floor((distance % (1000 * 60)) / 1000);document.getElementById("days").textContent = String(days).padStart(2,"0");document.getElementById("hours").textContent = String(hours).padStart(2,"0");document.getElementById("minutes").textContent = String(minutes).padStart(2,"0");document.getElementById("seconds").textContent = String(seconds).padStart(2,"0");}updateCountdown();setInterval(updateCountdown,1000);setTimeout(function (){document.getElementById("popup-overlay").style.display = "flex";},3000);function closePopup(){document.getElementById("popup-overlay").style.display = "none";}document.getElementById("popup-overlay").addEventListener("click",function (e){if (e.target === this){this.style.display = "none";}});document.getElementById("popup-overlay").addEventListener("touchmove",function (e){e.preventDefault();},{passive: false});
</script>
</b:if>

التعديلات اللتي من الممكن أن تقوم بها

صورة المنتج
استبدل هذا الرابط:
<img src="https://via.placeholder.com/400x200/3498db/ffffff?text=Product+Image">
برابط صورة منتجك، مثل:
<img src="https://example.com/product.jpg">

رابط زر الشراء
استبدل:
onclick="window.location.href='#'"
برابط المنتج، مثل:
onclick="window.location.href='https://example.com/product'"

لتغير عداد التوقيت الصيغة الصحيحة هي أن يكون اليوم والشهر مكوّنين من رقمين.
اكتبها هكذا:
const endDate = "2026-07-04";
وليس:
const endDate = "2026-7-4";
أمثلة صحيحة:
const endDate = "2026-01-09";
const endDate = "2026-07-04";
const endDate = "2026-12-31";

ثم قم بالحفظ و شاهد المعاينة

تركيب زر سلة المشتريات في قالب بلوجر

2026-06-15T09:53:51.674+02:00

تركيب زر سلة المشتريات في قوالب بلوجر

سلسلة تحويل قالب بلوجر الى قالب لبيع المنتجات الجزء الثاني

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

تركيب جدول عرض المنتجات و أسعارها بداخل المواضيع

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

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

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

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

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

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

شرح تركيب سلة المشتريات لقالب بلوحر

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

اولا - ندخل الى اكواد القالب و نبحث عن ~~/head~~ و نلصق الكود التالي أعلاه

<style>

#cart-toast{visibility:hidden;min-width:250px;background-color:#333;color:#fff;text-align:center;border-radius:8px;padding:12px;position:fixed;z-index:10000;left:20px;bottom:30px;font-size:14px;direction:rtl;box-shadow:0 4px 10px rgba(0,0,0,0.3);opacity:0;transition:opacity 0.3s,bottom 0.3s}
#cart-toast.show{visibility:visible;opacity:1;bottom:40px}
.header-cart{position:fixed;bottom:20px;left:20px;background:#e53935;color:#fff;padding:12px 15px;border-radius:50px;cursor:pointer;z-index:999;font-weight:bold;width:80px;justify-content:space-between;display:flex;align-items:center}
#cart-count{background:#fff;color:#e53935;padding:2px 8px;border-radius:50px;margin-right:5px}
.header-cart svg{width:24px;height:24px}
#overlay{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.6);z-index:9998}
#cart-modal{display:none;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:90%;max-width:420px;background:#fff;padding:20px;border-radius:12px;z-index:9999;direction:rtl}
.cart-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px}
.cart-total{margin:15px 0;font-size:18px;font-weight:bold}
.btn-whatsapp,.btn-paypal,.btn-visa{width:100%;padding:12px;border:none;border-radius:8px;margin-top:10px;cursor:pointer;color:#fff;font-weight:bold}
.btn-whatsapp{background:#25D366}
.btn-paypal{background:#0070BA}
.btn-visa{background:#1f2937}
</style>

ثانيا - نبحث الكود التالي ~~</body>~~ و نلصق الكود الخاص بالجافا سكربت اعلاه

<!-- سلة المشتريات -->

<div class='header-cart' onclick='toggleCart()'>
       <svg fill='none' height='800px' viewBox='-0.5 0 25 25' width='800px' xmlns='http://www.w3.org/2000/svg'>
  <path d='M18.5996 21.57C19.7042 21.57 20.5996 20.6746 20.5996 19.57C20.5996 18.4654 19.7042 17.57 18.5996 17.57C17.495 17.57 16.5996 18.4654 16.5996 19.57C16.5996 20.6746 17.495 21.57 18.5996 21.57Z' fill='none' stroke='#ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5'/>
  <path d='M8.59961 21.57C9.70418 21.57 10.5996 20.6746 10.5996 19.57C10.5996 18.4654 9.70418 17.57 8.59961 17.57C7.49504 17.57 6.59961 18.4654 6.59961 19.57C6.59961 20.6746 7.49504 21.57 8.59961 21.57Z' fill='none' stroke='#ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5'/>
  <path d='M2 3.55997C2 3.55997 6.64 3.49997 6 7.55997L5.31006 11.62C5.20774 12.1068 5.21778 12.6105 5.33954 13.0929C5.46129 13.5752 5.69152 14.0234 6.01263 14.4034C6.33375 14.7833 6.73733 15.0849 7.19263 15.2854C7.64793 15.4858 8.14294 15.5797 8.64001 15.56H16.64C17.7479 15.5271 18.8119 15.1196 19.6583 14.404C20.5046 13.6884 21.0834 12.7069 21.3 11.62L21.9901 7.50998C22.0993 7.0177 22.0939 6.50689 21.9744 6.017C21.8548 5.52712 21.6242 5.07126 21.3005 4.68467C20.9767 4.29807 20.5684 3.99107 20.1071 3.78739C19.6458 3.58371 19.1438 3.48881 18.64 3.50998H9.94' fill='none' stroke='#ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5'/>
</svg> <span id='cart-count'>0</span>
</div>

<div id='overlay' onclick='toggleCart()'></div>

<div id='cart-modal'>
    <div class='cart-header'>
        <h3>سلة المشتريات</h3>
        <span onclick='toggleCart()'>✖</span>
    </div>

    <div id='cart-items-list'></div>

    <div class='cart-total'>
        الإجمالي:
        <span id='total-price'>0</span> ج.م
    </div>

    <button class='btn-whatsapp' onclick="pay('whatsapp')">
        الطلب عبر واتساب
    </button>

    <button class='btn-paypal' onclick="pay('paypal')">
        الدفع عبر PayPal
    </button>

    <button class='btn-visa' onclick="pay('visa')">
        الدفع بفيزا / ماستر كارد
    </button>
</div>


<div id='cart-toast'>تمت إضافة المنتج للسلة بنجاح! 🛒</div>

<script type='text/javascript'>
//<![CDATA[
let cart = JSON.parse(localStorage.getItem("my_cart")) || [];

const paypalEmail = "YOUR_PAYPAL_EMAIL";
const whatsappNumber = "201234567890";

function saveCart(){
    localStorage.setItem("my_cart",JSON.stringify(cart));
}

function updateCartUI(){
    let list=document.getElementById("cart-items-list");
    let badge=document.getElementById("cart-count");
    let totalBox=document.getElementById("total-price");

    if(badge) badge.innerText=cart.length;

    if(cart.length===0){
        if(list) list.innerHTML="<p>السلة فارغة</p>";
        if(totalBox) totalBox.innerText="0";
        saveCart();
        return;
    }

    let total=0;
    let html="";

    cart.forEach((item,index)=>{
        total+=Number(item.price);
        html+=`
        <div style="display:flex;justify-content:space-between;margin-bottom:10px;">
        <span>${item.name}</span>
        <span>
        ${item.price} ج.م
        <button onclick="removeItem(${index})">❌</button>
        </span>
        </div>
        `;
    });

    if(list) list.innerHTML=html;
    if(totalBox) totalBox.innerText=total;

    saveCart();
}

function showToast() {
    let toast = document.getElementById("cart-toast");
    toast.className = "show";
    
    setTimeout(function(){ 
        toast.className = toast.className.replace("show", ""); 
    }, 3000);
}

function addToCart(name,price){
    cart.push({
        name:name,
        price:price
    });

    updateCartUI();
    showToast();
}

function removeItem(index){
    cart.splice(index,1);
    updateCartUI();
}

function toggleCart(){
    let modal=document.getElementById("cart-modal");
    let overlay=document.getElementById("overlay");

    if(modal.style.display==="block"){
        modal.style.display="none";
        overlay.style.display="none";
    }else{
        modal.style.display="block";
        overlay.style.display="block";
    }
}

function pay(method){
    if(cart.length===0){
        alert("السلة فارغة");
        return;
    }

    let total=0;
    cart.forEach(item=>{
        total+=Number(item.price);
    });

    if(method==="paypal"){
        let usd=(total/50).toFixed(2);
        window.open(`https://www.paypal.com/cgi-bin/webscr?cmd=_xclick&business=${paypalEmail}&amount=${usd}&currency_code=USD`,"_blank");
    }

    if(method==="whatsapp"){
        let msg="طلب جديد:%0A";
        cart.forEach((item,i)=>{
            msg += (i+1)+"- "+item.name+" ("+item.price+" ج.م)%0A";
        });
        msg += "%0Aالإجمالي: "+total+" ج.م";
        window.open(`https://wa.me/${whatsappNumber}?text=${msg}`,"_blank");
    }

    if(method==="visa"){
        window.open("https://ضع_هنا_رابط_الدفع_بالبطاقة","_blank");
    }
}

updateCartUI();
//]]>
</script>

ثالثا - نقوم بالذهاب الى الموضوع و نضيف ~~زر السلة في مكان مناسب~~

<button onclick="addToCart('اسم الساعة الذكية', 1500)" style="display: flex; align-items: center; justify-content: center; gap: 10px; padding: 10px 20px; background: #ff0000; color: #fff; border: none; border-radius: 5px; cursor: pointer;width: 100%;margin-top: 30px;font-size: 20px; ">

<svg fill="none" height="28px" viewBox="-0.5 0 25 25" width="28px" xmlns="http://www.w3.org/2000/svg">
<path d="M18.5996 21.57C19.7042 21.57 20.5996 20.6746 20.5996 19.57C20.5996 18.4654 19.7042 17.57 18.5996 17.57C17.495 17.57 16.5996 18.4654 16.5996 19.57C16.5996 20.6746 17.495 21.57 18.5996 21.57Z" fill="none" stroke="#ffffff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"></path>
<path d="M8.59961 21.57C9.70418 21.57 10.5996 20.6746 10.5996 19.57C10.5996 18.4654 9.70418 17.57 8.59961 17.57C7.49504 17.57 6.59961 18.4654 6.59961 19.57C6.59961 20.6746 7.49504 21.57 8.59961 21.57Z" fill="none" stroke="#ffffff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"></path>
<path d="M2 3.55997C2 3.55997 6.64 3.49997 6 7.55997L5.31006 11.62C5.20774 12.1068 5.21778 12.6105 5.33954 13.0929C5.46129 13.5752 5.69152 14.0234 6.01263 14.4034C6.33375 14.7833 6.73733 15.0849 7.19263 15.2854C7.64793 15.4858 8.14294 15.5797 8.64001 15.56H16.64C17.7479 15.5271 18.8119 15.1196 19.6583 14.404C20.5046 13.6884 21.0834 12.7069 21.3 11.62L21.9901 7.50998C22.0993 7.0177 22.0939 6.50689 21.9744 6.017C21.8548 5.52712 21.6242 5.07126 21.3005 4.68467C20.9767 4.29807 20.5684 3.99107 20.1071 3.78739C19.6458 3.58371 19.1438 3.48881 18.64 3.50998H9.94" fill="none" stroke="#ffffff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
</svg>
<span>أضف للسلة - 1500 ج.م</span>
</button>

رابعا - نعود الى أكواد القالب الأساسية و نضيف زر السلة بداخل الـ ~~post~~ اللذي يظهر بواجهة القالب

<button expr:onclick='"addToCart(\"" + data:post.title + "\",1500)"' style='background: #e53935;width: 100%;margin-top: 14px;color: #fff;border: none;padding: 12px 20px;border-radius: 8px;cursor: pointer;display: flex;align-items: center;justify-content: center;'>
<svg fill='none' height='800px' viewBox='-0.5 0 25 25' width='800px' xmlns='http://www.w3.org/2000/svg'>
<path d='M18.5996 21.57C19.7042 21.57 20.5996 20.6746 20.5996 19.57C20.5996 18.4654 19.7042 17.57 18.5996 17.57C17.495 17.57 16.5996 18.4654 16.5996 19.57C16.5996 20.6746 17.495 21.57 18.5996 21.57Z' fill='none' stroke='#ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5'/>
<path d='M8.59961 21.57C9.70418 21.57 10.5996 20.6746 10.5996 19.57C10.5996 18.4654 9.70418 17.57 8.59961 17.57C7.49504 17.57 6.59961 18.4654 6.59961 19.57C6.59961 20.6746 7.49504 21.57 8.59961 21.57Z' fill='none' stroke='#ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5'/>
<path d='M2 3.55997C2 3.55997 6.64 3.49997 6 7.55997L5.31006 11.62C5.20774 12.1068 5.21778 12.6105 5.33954 13.0929C5.46129 13.5752 5.69152 14.0234 6.01263 14.4034C6.33375 14.7833 6.73733 15.0849 7.19263 15.2854C7.64793 15.4858 8.14294 15.5797 8.64001 15.56H16.64C17.7479 15.5271 18.8119 15.1196 19.6583 14.404C20.5046 13.6884 21.0834 12.7069 21.3 11.62L21.9901 7.50998C22.0993 7.0177 22.0939 6.50689 21.9744 6.017C21.8548 5.52712 21.6242 5.07126 21.3005 4.68467C20.9767 4.29807 20.5684 3.99107 20.1071 3.78739C19.6458 3.58371 19.1438 3.48881 18.64 3.50998H9.94' fill='none' stroke='#ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/>
</svg> أضف للسلة
</button>

التعديلات اللتي يجب عليك القيام بها

تغير رقم الواتس أب ستجد بكود الجافا سكربت

const paypalEmail = "YOUR_PAYPAL_EMAIL";
const whatsappNumber = "201234567890";

إذا كان رقمك مثلاً : +20 123 456 7890
اكتبه بدون + وبدون مسافات :
const whatsappNumber = "201234567890";

حساب PayPal

إذا كان بريد حساب PayPal هو: myshop@gmail.com
اكتب :
const paypalEmail = "myshop@gmail.com";

زر فيزا / ماستركارد

window.open(
"https://ضع_هنا_رابط_الدفع_بالبطاقة",
"_blank"
);

يجب استبداله برابط دفع حقيقي من بوابة دفع مثل:
PayPal Business
Stripe
مثال :
window.open(
"https://buy.stripe.com/xxxxxxxxxxxxx",
"_blank"
);

ملاحظة مهمة جدا

لا يمكنك وضع رقم بطاقة الفيزا الخاصة بك مباشرة داخل الكود مثل:

4111 1111 1111 1111

هذا غير آمن ولن يعمل كوسيلة دفع.
يجب أن يكون لديك حساب تاجر على:
PayPal Business
أو Stripe
أو أي بوابة دفع إلكتروني
ثم تأخذ رابط الدفع وتضعه في الكود.

ثم تقوم بالتعديلات المناسبة مثلا ~~النصوص~~ و ~~الأسعار~~ وغيرها و ثم تقوم بالحفظ

تركيب جدول عرض المنتجات و أسعارها بداخل المواضيع

2026-05-26T09:06:26.699+02:00

سلسلة تحويل قالب بلوجر الى قالب لبيع المنتجات الجزء الأول

شرحت في مواضيع عن طريقة تحويل قالب بلوجر عادي الى قالب بلوجر

لبيع المنتجات و شرحنا في موضوعين سابقين طريقة تحويله

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

تركيب زر سلة المشتريات في قالب بلوجر

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

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

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

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

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

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

معاينة الأضافة

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

اولا - ندخل الى اكواد القالب و نبحث عن ~~/head~~ و نلصق الكود التالي أعلاه

<style>:root{--primary-color:#2c3e50;--accent-color:#e67e22;--bg-light:#f9f9f9;--border-color:#eee;--text-dark:#333}

.tr-caption-container{width:100%;margin-bottom:20px;border-collapse:collapse}

.tr-caption-container img{width:100%;height:auto;border-radius:12px;box-shadow:0 4px 15px rgba(0,0,0,0.1)}

.tr-caption::before{content:attr(data-text);display:block;font-size:1.5rem;font-weight:bold;color:var(--primary-color);margin-top:15px;text-align:center}

.pPric{font-size:3rem;font-weight:800;color:#007bff;margin:20px 0;padding:10px;border-bottom:2px solid var(--border-color)}

.pPric::before{content:attr(data-text) ":";font-size:1rem;margin-left: 4px;color:#777}

.pInfo{display:flex;flex-wrap:wrap;padding:12px 0;border-bottom:1px solid var(--border-color)}

table.tr-caption-container td.tr-caption{font-size:12px;color:var(--meta-color);font-style:normal;padding:6px 0 0}

.pInfo .L,.pInfo .R{flex:1;padding-right:9px;border-right:4px solid #007bff;min-width:250px;margin:5px 0}

.pInfo small{display:block;text-transform:uppercase;font-size:0.9rem;color:#000000;font-weight:600;letter-spacing:0.5px;margin-bottom:2px}

.pInfo small1{display:block;text-transform:uppercase;font-size:1.5rem;color:#0070ff;letter-spacing:0.5px;margin-bottom:2px;font-weight:700}

.pInfo span{font-weight:700;color:var(--text-dark);font-size:1.4rem}

.tabs{margin-top:30px;position:relative}

.tabs input{display:none}

.tabs label{display:inline-block;padding:12px 20px;background:#eee;cursor:pointer;border-radius:8px 8px 0 0;margin-right:5px;font-weight:bold;transition:0.3s}

.tabs label::before{content:attr(data-text)}

.tabC-1,.tabC-2,.tabC-3,.tabC-4{display:none;padding:20px;border:1px solid var(--border-color);background:#fff;border-radius:0 8px 8px 8px;line-height:1.6}

#tabT-1:checked ~ div label[for='tabT-1'],#tabT-2:checked ~ div label[for='tabT-2'],#tabT-3:checked ~ div label[for='tabT-3'],#tabT-4:checked ~ div label[for='tabT-4']{background:var(--primary-color);color:#fff}

#tabT-1:checked ~ .tabC-1,#tabT-2:checked ~ .tabC-2,#tabT-3:checked ~ .tabC-3,#tabT-4:checked ~ .tabC-4{display:block}

.pMart{background:var(--bg-light);padding:20px;border-radius:10px;margin:20px 0;font-size:23px;align-items:center;display:flex}

.pMart img{width:35px;height:35px;margin:10px 10px 0 0;border-radius:5px;transition:transform 0.2s}

.pMart img:hover{transform:scale(1.1)}

.hidden{display:none}

</style>

ثانيا - ندخل الى الموضوع المراد نشره والدخول الى عرض ~~HTML~~ و لصق الكود التالي بداخلها

<table class='tr-caption-container'>

<tbody>

<tr>

<td>

<img alt='HP Pavilion Laptop 15-eh1101AU' width='1280' height='720' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhlmxjjEVsUtVQBywwPr71Kaub2SWDF9S_vm5vBJzh5q3u-Whz_rIg6jABe2mP9wGkMTxUxvFMHORB_7K9MSpif8ogjaGRxjf3_gMJnwaO9-FdX_M-adxvFadG10QKbHMvlSUVi2V9pyKQIiMCaErp5USIN1v4L16MdrIUji8B9YBHcxVLwm19pU8IMQ/s1280/HP_Pavilion.webp'/>

</td>

</tr>

<tr>

<td class='tr-caption' data-text='HP Pavilion Laptop 15-eh1101AU'></td>

</tr>

</tbody>

</table>



<div class='pPric pPad' data-text=' سعر القطعة '>$800</div>





<div class='hidden'>Specifications, Design, Performance, Battery</div>

<div class='pInfo pPad'>

<div class='L'><small>Series</small><span>HP Pavilion Laptop 15-eh1101AU</span></div>

<div class='R'><small>Brand</small><span>HP</span></div>

</div>

<div class='pInfo pPad'>

<div class='L'><small>Specific Uses For Product</small><span>Multimedia</span></div>

<div class='R'><small>Screen Size</small><span>15.6 Inches</span></div>

</div>

<div class='pInfo pPad'>

<div class='L'><small>Operating System</small><span>Windows 10 Home</span></div>

<div class='R'><small>Human Interface Input</small><span>Touchscreen</span></div>

</div>

<div class='pInfo pPad'>

<div class='L'><small>CPU Manufacturer</small><span>AMD</span></div>

<div class='R'><small>Graphics Card Description</small><span>Integrated</span></div>

</div>

<div class='pInfo pPad'>

<div class='L'><small>Processor</small><span>AMD Ryzen 5 5500U</span></div>

<div class='R'><small>Storage</small><span>512 GB SSD</span></div>

</div>

<div class='pInfo pPad'>

<div class='L'><small>Memory</small><span>8 GB DDR4-3200 MHz</span></div>

<div class='L'><small>Special Feature</small><span>Micro-Edge Display, Thin</span></div>

</div>

<div class='pInfo pPad'>

<div class='R'><small>Colour</small><span>Silver</span></div>

</div>

<div class='pInfo pPad o'><small1> ماذا يوجد في العلبة : </small1><span> كمبيوتر محمول من HP، محول طاقة ذكي بقدرة 65 واط، كتيبات المستخدم </span></div>

<div class='pMart'>

<small>أو يمكنك التسوق من خلال هذه الروابط '<b>Market Place</b>' :</small>





<a title='Market 1' href='#' target='_blank' rel='noopener'>

<img alt='Market 1' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisldTSPR5qQSsrqZDyfYV81HFSq4Pko5u8xpbzKJ7V05CZAaCkfxG550uqbp2xlCxukxcVL4i2so2XxNri-wqqUO0yuVLLznfFes1rdmg7Ywq8pWE8FXwWQfcyrNiAPlyI3_ngX12x7-KGzAVPfjiTWPMP3HdwelG4pn729xMfH05-hdWVbQyaIsgMkQg/s100/favicon.png'/>

</a>

<a title='Market 2' href='#' target='_blank' rel='noopener'>

<img alt='Market 2' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisldTSPR5qQSsrqZDyfYV81HFSq4Pko5u8xpbzKJ7V05CZAaCkfxG550uqbp2xlCxukxcVL4i2so2XxNri-wqqUO0yuVLLznfFes1rdmg7Ywq8pWE8FXwWQfcyrNiAPlyI3_ngX12x7-KGzAVPfjiTWPMP3HdwelG4pn729xMfH05-hdWVbQyaIsgMkQg/s100/favicon.png'/>

</a>

</div>

<div class='tabs stick'>



<input id='tabT-1' type='radio' name='postProduct' checked=''>

<input id='tabT-2' type='radio' name='postProduct'>

<input id='tabT-3' type='radio' name='postProduct'>

<input id='tabT-4' type='radio' name='postProduct'>



<div>



<label for='tabT-1' data-text='Processor'></label>

<label for='tabT-2' data-text='Display'></label>

<label for='tabT-3' data-text='Audio'></label>

<label for='tabT-4' data-text='Battery'></label>

</div>





<div class='tabC-1'>

<p>AMD Ryzen 5 5500U (حتى سرعة تعزيز قصوى 4.0 جيجاهرتز، ذاكرة تخزين مؤقت L3 بسعة 8 ميجابايت، 6 أنوية، 12 خيط)

</p>

<p>عش حياتك بلا حدود مع لابتوب ينجز الأمور. كن أكثر إنتاجية وأثبت جدارتك عندما تمتلك أحدث معالجات AMD Ryzen، وذاكرة تصل إلى 16GB Dual Channel 3200 DDR4، ورسومات AMD Raedon لتناسب تنقلاتك بين الألعاب والترفيه والعمل الإبداعي بسلاسة. استمتع بأداء قوي وحوسبة سلسة لمهامك اليومية. يشمل ذلك تحسين الإنتاجية، والبث السلس، وترفيه Full HD الرائع مع شاشة غامرة مضادة للوهج. أيضا، احصل على ميزة أداء كبيرة مع أقراص SSD — فهي أسرع في التشغيل، أسرع في الإغلاق، وأسرع في نقل البيانات.

</p>

</div>



<div class='tabC-2'>

<p>39.6 cm (15.6') diagonal, FHD (1920 x 1080), IPS, micro-edge, BrightView, 250 nits, 45% NTSC</p>

<p> بفضل قدراته المتميزة في تحديد الألوان، يضمن هذا اللابتوب عرضا مذهلا للألوان على شاشة FHD IPS. سهولة الوصول والتصميم المريح تماما يسمحان لك بتعظيم إمكانيات جهازك. لابتوب صغير يضفي الحياة على التجربة البصرية مع FHD وإطار Micro Edge. لابتوب بنسبة شاشة إلى جسم أكبر، وحواف ميكرو إيدج تعظم رؤيتك وتضمن أن لديك رسومات واضحة وشاشة أكبر للاستمتاع بفيديوهاتك المفضلة.</p>

</div>



<div class='tabC-3'>

<p> تجربة صوتية غنية وأصيلة من خلال مسرحية بانغ & أولوفسن. كل صوت يغمر فيك نغمة في صوت يأخذك بعيدا. دمجه مع سماعات HP المزدوجة وHP Audio Boost، يحيي كل نغمة وصوت، سواء أثناء الاستماع إلى الموسيقى أو مشاهدة فيلم.</p>

</div>





<div class='tabC-4'>

<p>هل أنت قلق من انقطاع طاقتك أثناء السفر لساعات طويلة؟ ضع مخاوفك جانبا واحصل على لابتوب HP Pavilion الذي يأتي بشحن بطارية فائق السرعة. استمتع بتجربة حوسبة أسرع وأكثر سلاسة واستجابة مذهلة تتيح لك أداء جميع مهامك أثناء التنقل دون أي قلق. تم بناؤه ببطارية تتكيف بذكاء مع متطلبات النظام، ومن المؤكد أنك ستحصل على أفضل أداء ممكن. شحن HP Adaptive Battery Fast Charge في وقت أقل مع محول 43WH - 50٪ في 30 دقيقة سيسمح لك باستعادة ساعات أكثر في وقت أقل.

</p>

</div>

</div>

ثالثا- قم بالتعديل على اللازم مثلا الصورة و السعر و النصوص و غيرها

ثم بالحفظ

قالب سبارك الأحترافي و العصري المدفوع بشكل مجاني

2026-05-19T12:32:08.422+02:00

قالب سبارك الأحترافي المدفوع بشكل مجاني

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

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

مميزات قالب سبارك

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

معاينة و تحميل القالب من الموقع الرئيسي

معاينة القالب

تفعيل القالب

نصيحة

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

Plus Ui v3.7.0 Blogger Template أفضل قالب بلوجر

2026-05-14T09:35:14.176+02:00

أفضل و أسرع قالب بلوجر Plus Ui v3.7.0

يُعد قالب Plus UI v3.7.0 Blogger Template من أشهر قوالب بلوجر الحديثة التي تجمع بين السرعة، التصميم الأنيق، وتجربة الاستخدام المتطورة. جاء الإصدار 3.7.0 بعدة تحديثات وتحسينات مهمة تهدف إلى تحسين أداء المواقع ورفع جودة التصفح سواء على الهواتف أو أجهزة الكمبيوتر.

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

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

أما فائدة تركيب قالب Plus UI v3.7.0 فهي كبيرة لأصحاب المدونات والمواقع؛ إذ يمنح الموقع مظهرًا احترافيًا يساعد على جذب الزوار وزيادة مدة بقائهم داخل الموقع، كما يساهم في تحسين سرعة التصفح ورفع فرص ظهور المقالات في نتائج البحث. إضافة إلى ذلك، يوفر القالب تجربة استخدام سلسة تسهّل إدارة المحتوى وتحسين الأرباح الإعلانية بفضل أماكن الإعلانات الذكية والتنظيم الاحترافي للعناصر.

المميزات الموجودة في قالب Plus Ui v3.7.0

تصميم حديث و انيق
سرعة تحميل عالية
تصميم متجاوب بالكامل
تحسين قوي للسيو SEO
الوضع الليلي Dark Mode
نظام SafeLink المطور
جاهز للإعلانات والربح
مكونات UI جاهزة
جدول محتويات تلقائي
دعم الأكواد والاختصارات Shortcodes
إمكانية تخصيص كبيرة
إشعارات وتنبيهات ذكية
مقالات ذات صلة تلقائية
دعم PWA وتحسين الثبات
عداد مشاهدات وإحصائيات
تغير الوان القالب من القالب بدون الدخول للاكواد
يدعم التبديل بين الوضع الليلي والنهاري تلقائيًا لتحسين راحة الزائر أثناء التصفح.
و غيرها ستجدها عند أستخدام القالب

معاينة القالب

تحميل القالب

النصيحة

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

تغير شكل أحصائيات المدونة الى شكل أحترافي في قالب بلوجر

2026-05-02T09:31:58.919+02:00

تغير شكل أحصائيات المدونة الى شكل أحترافي

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

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

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

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

شرح التركيب

الأكواد الخاصة بالشكل الجديد

ندخل الى اكواد القالب و نبحث عن ~~/head~~ و نلصق الكود التالي أعلاه

<style>
.cnmustatusw{display:flex;flex-wrap:wrap;gap:12px;list-style:none!important;margin:15px 0!important;padding:0!important;direction:rtl;font-family:'Segoe UI',Tahoma,sans-serif}
.cnmustatusw li{background:#ffffff;border:1px solid #f0f0f0;border-radius:12px;padding:15px;flex:1 1 calc(33.333% - 12px);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;transition:all 0.3s ease;box-shadow:0 2px 8px rgba(0,0,0,0.04)}
.cnmustatusw li:hover{transform:translateY(-5px);box-shadow:0 8px 20px rgba(0,0,0,0.08);}
.cnmustatusw li svg{color:#0058ff;width:40px;height:40px;margin:0 0 10px 0!important;background:#f0f5ff;padding:8px;border-radius:50%}
.cnmustatusw span{display:block;font-size:13px;color:#777;font-weight:600;margin-bottom:5px}
.cnmustatusw h4{color:#222;margin:0;font-size:20px;font-weight:800}
.cnmuspos svg{color:#0058ff;background:#eef4ff}
#cnmutc svg{color:#28a745;background:#eafff0}
#cnmutcount svg{color:#fd7e14;background:#fff5ed}
@media (max-width:768px){.cnmustatusw li{flex:1 1 calc(50% - 12px)}}
@media (max-width:480px){.cnmustatusw li{flex:1 1 100%}}
li.cnmuspos{border-bottom:4px solid #007bff}
li#cnmutc{border-bottom:4px solid #33a849}
li#cnmutcount{border-bottom:4px solid #f97d27}
</style>

نبحث عن مكان ~~الأضافة السابقة~~ و نقوم بأستبدال الكود القديم بالجديد

أكواد الأضافة

ثم نقوم بالحفظ و نعاين النتيجة

تركيب سلايدر شو أحترافي متحرك تلقائي في قالب بلوجر

2026-04-08T12:14:00.031+02:00

طريقة تركيب سلايدر شو أحترافي متحرك لقوالب بلوجر

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

ما هو السلايدر؟

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

أهمية السلايدر

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

كيفية تركيبه في بلوجر

عملية تركيب السلايدر ليست معقدة، ويمكن تنفيذها عبر:
تعديل كود القالب تعتمد على أكواد ~~HTML~~ ~~CSS~~ ~~JavaScript~~

شرح التركيب بالفيديو

الأكواد الخاصة بالسلايدر

نذهب الى اكواد القالب من خلال المظهر و الذهاب الى تعديل ~~HTML~~ و البحث عن ~~<head>~~ و اضافة هذا الكود اسفله الخاص بمكتبة الأيقونات

<link href='https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css' rel='stylesheet'/>

ثم نقوم نضع الكود التالي في المكان المناسب مثلا فوق ~~رسائل المدونة الألكترونية~~ او اسفل الهيدر ~~/header~~

<b:section class='HomeSliderSection' id='HomeSliderSection' maxwidgets='1' showaddelement='yes'>
<b:widget id='HTML150' locked='false' title='السلايدر والشبكة' type='HTML' version='2' visible='true'>
<b:widget-settings>
<b:widget-setting name='content'/>
</b:widget-settings>
<b:includable id='main'>
<b:if cond='data:view.isHomepage'>
<div class='hm-container'>
<div class='hm-grid'>
<div class='hm-item' id='item1'><div class='loading-spinner'/></div>
<div class='hm-item' id='item2'><div class='loading-spinner'/></div>
<div class='hm-slider-wrapper' id='imageslider'>
<div class='slider-inner'><div class='loading-spinner'/></div>
<button class='BTlef'><i class='bi bi-chevron-left'/></button>
<button class='BTRig'><i class='bi bi-chevron-right'/></button>
</div>
<div class='hm-item' id='item4'><div class='loading-spinner'/></div>
<div class='hm-item' id='item5'><div class='loading-spinner'/></div>
</div>
</div>
</b:if>
</b:includable>
</b:widget>
</b:section>

و ثم نبحث عن ~~</head>~~ و نضيف الكود التالي اعلاه

<style>
.hm-container{max-width:1280px;margin:20px auto;direction:rtl;background:#efefef;padding:18px;border-radius:10px;}
.hm-grid{display:grid;grid-template-columns:1fr 1fr 2fr;gap:15px}
.hm-item{background:#f5f5f5;height:230px;position:relative;border-radius:12px;overflow:hidden}
#imageslider{grid-column:3;grid-row:1 / span 2;position:relative;height:475px;border-radius:12px;overflow:hidden;background:#eee}
.slider-inner{width:100%;height:100%;position:relative}
.slide{position:absolute;inset:0;opacity:0;transition:opacity 0.6s ease;z-index:1}
.slide.active{opacity:1;z-index:2}
.hm-item img,.slide img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 0.5s ease-in-out,filter 0.5s ease-in-out;filter:brightness(1)}
.hm-item:hover img{transform:scale(1.1);filter:brightness(0.7)}
.slide:hover img{transform:scale(1.05);filter:brightness(0.8)}
.hm-title{position:absolute;bottom:0;left:0;right:0;padding:15px;background:linear-gradient(transparent,rgba(0,0,0,0.85));color:#fff;z-index:3}
.slide-info{position:absolute;bottom:0;left:0;right:0;padding: 40px 20px;background:linear-gradient(transparent,rgba(0,0,0,0.85));color:#fff;z-index:3}
.slide-info b{padding: 17px 0;font-size:18px;display:block}
.hm-title h3{font-size:14px;margin:0;color:#fff;text-align:center}
.post-label{position:absolute;top:10px;right:10px;background:#ff5a5f;color:#fff;padding:2px 8px;border-radius:4px;font-size:10px;z-index:4}
#imageslider button{position:absolute;top:50%;transform:translateY(-50%);width:35px;height:35px;border-radius:50%;border:none;background:rgba(255,255,255,0.8);cursor:pointer;z-index:10;display:flex;align-items:center;justify-content:center}
.BTlef{left:10px}
.BTRig{right:10px}
@keyframes spin{100%{transform:translate(-50%,-50%) rotate(360deg)}}
@media (max-width:992px){.hm-grid{grid-template-columns:1fr 1fr}#imageslider{grid-column:1 / span 2;grid-row:1;height:400px}}
@media (max-width:600px){.hm-container{margin:10px;padding:10px}.hm-grid{grid-template-columns:1fr;gap:10px}#imageslider{grid-column:1;height:280px}.hm-item{height:200px}.slide-info b{font-size:16px}}
</style>

و أخيرا نبحث عن ~~</body>~~ و نضيف الكود التالي اعلاه

<script type='text/javascript'>
//<![CDATA[
(function(){
document.addEventListener('DOMContentLoaded', function() {
const sliderContainer = document.getElementById('imageslider');
if (!sliderContainer) return;
const script = document.createElement('script');
script.src = '/feeds/posts/default?alt=json-in-script&max-results=10&callback=initHomeUI';
document.head.appendChild(script);
window.initHomeUI = function(data) {
const posts = data.feed.entry || [];
const items = ['item1', 'item2', 'item4', 'item5'];
items.forEach((id, i) => {
const el = document.getElementById(id);
if (posts[i] && el) {
const post = posts[i];
const title = post.title.$t;
const url = post.link.find(l => l.rel === 'alternate').href;
const img = post.media$thumbnail ? post.media$thumbnail.url.replace('s72-c', 's600') : 'https://via.placeholder.com/600x400';
const label = post.category ? post.category[0].term : 'أخبار';
el.innerHTML = `<a href="${url}"><div class="post-label">${label}</div><img src="${img}"><div style="position:absolute;bottom:0;left:0;right:0;padding:15px;background:linear-gradient(transparent,rgba(0,0,0,0.8));color:#fff;"><h3 style="font-size:14px;margin:0;">${title}</h3></div></a>`;
}
});
const sliderInner = sliderContainer.querySelector('.slider-inner');
const sliderPosts = posts.slice(4, 9);
if (sliderInner && sliderPosts.length > 0) {
sliderInner.innerHTML = '';
sliderPosts.forEach((post, idx) => {
const title = post.title.$t;
const url = post.link.find(l => l.rel === 'alternate').href;
const img = post.media$thumbnail ? post.media$thumbnail.url.replace('s72-c', 's1600') : 'https://via.placeholder.com/1200x800';
const author = post.author[0].name.$t;
const published = new Date(post.published.$t).toLocaleDateString('ar-EG', {year:'numeric', month:'long', day:'numeric'});
sliderInner.innerHTML += `<div class="slide ${idx === 0 ? 'active' : ''}"><a href="${url}"><img src="${img}"><div class="slide-info"><div class="slide-title"><b>${title}</b></div><div class="slide-meta"><span><i class="bi bi-person-circle"></i> ${author}</span><span><i class="bi bi-calendar3"></i> ${published}</span></div></div></a></div>`;
});
let current = 0;
const slides = sliderInner.querySelectorAll('.slide');
const next = () => { slides[current].classList.remove('active'); current = (current + 1) % slides.length; slides[current].classList.add('active'); };
const prev = () => { slides[current].classList.remove('active'); current = (current - 1 + slides.length) % slides.length; slides[current].classList.add('active'); };
document.querySelector('.BTlef').onclick = (e) => { e.preventDefault(); next(); };
document.querySelector('.BTRig').onclick = (e) => { e.preventDefault(); prev(); };
setInterval(next, 5000);
}
};
});
})();
//]]>
</script>

و نقوم بالحفظ و ثم قم بتحديث الموقع و شاهد النتيجة

ملاحظة

عند الذهاب للتنسيق ستجد انه تم اضافة صندوق جديد باسم ~~السلايدر و الشبكة~~ يمكنك الدخول اليه

و التحكم منه بأيقاف السلايدر او تشغيله

الكود لا يعتمد على مكتبة الجيكويري اي السلايدر سريع و لا يوثر على سرعة القالب

تركيب أفضل صفحة فهرس لمدونات بلوجر

2026-04-01T10:31:00.018+02:00

تركيب صفحة الأرشيف في قوالب بلوجر

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

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

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

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

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

معاينة صفحة الأرشيف

معاينة الفهرس

طريقة التركيب

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

بداخلها مع اعطائها اسم مناسب للصفحة و ثم حفظ

الأكواد الخاصة بصفحة الأرشيف

التحميل

ثم قم بالحفظ و مبروك الأضافة

تركيب ميزة نسخ الأكواد بنقرتين داخل صندوق الاقتباس في قالب بلوجر

2026-03-22T09:48:07.671+01:00

اضافة ميزة نسخ الاكواد بنقرتين في صندوق الأقتباس في قوالب بلوجر

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

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

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

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

معاينة الأضافة

شرح اضافة هذه الميزة الى قالب بلوجر

نذهب الى المظهر
نختارتعديل HTML
نبحث بداخل اكواد القالب عن ~~</head>~~ و نضيف الكود التالي اعلاه

<style>
blockquote{position:relative;background:linear-gradient(135deg,#0f172a,#1e293b);color:#e2e8f0;padding:20px 30px;margin:20px 0;border-radius:12px;font-size:14px;line-height:1.6;overflow-x:auto;border-left:4px solid #38bdf8;box-shadow:0 10px 25px rgba(0,0,0,0.3);transition:all 0.3s ease;cursor:pointer;direction:ltr;line-height:1.7em;margin:0 auto;font-size:15px;border-radius:3px;padding:65px 30px 30px 30px;text-align:left;overflow:auto;word-wrap:normal;height:100%;max-height:320px;white-space:pre-wrap;width:90%}
blockquote::-webkit-scrollbar{height:6px}
blockquote::-webkit-scrollbar-track{background:transparent}
blockquote::-webkit-scrollbar-thumb{background:#2778fc;border-radius:10px}
blockquote:before{position:absolute;top:17px;left:10px;content:"نقرتين لنسخ الكود";font-size:50px;color:#ffffff;font-style:normal;line-height:1;font-size:16px;font-family:inherit;background:#2778fc;padding:8px 7px;width:28%;text-align:center;border-radius:3px;
font-weight:bold}
.rtl blockquote:before{left:unset;right:36px}
.copy-toast{position:fixed;bottom:30px;left:6%;transform:translateX(-50%);background-color:#333;color:#fff;padding:10px 20px;border-radius:5px;font-size:14px;opacity:0;transition:opacity 0.3s ease,bottom 0.3s ease;z-index:9999}
.copy-toast.show{opacity:1;bottom:50px}
</style>

نبحث عن ~~</body>~~ و نضيف كود الجافا سكربت أعلاه

<script type='text/javascript'>
//<![CDATA[
document.querySelectorAll("blockquote").forEach(block => {
block.addEventListener("dblclick", async function () {
const selection = getSelection();
selection.removeAllRanges();
selection.selectAllChildren(this);

try {
await navigator.clipboard.writeText(this.innerText);
showToast(" تم نسخ الكــود !");
} catch {
showToast(" النسخ غير مدعوم !");
}
});
});

function showToast(message) {
const toast = document.createElement("div");
toast.className = "copy-toast";
toast.textContent = message;
document.body.appendChild(toast);
setTimeout(() => toast.classList.add("show"), 50);
setTimeout(() => {
toast.classList.remove("show");
setTimeout(() => toast.remove(), 300);
}, 2000);
}

//]]>
</script>

قم بالحفظ و ثم عاين النتيجة بداخل المواضيع

تركيب سلايدر شو متحرك تلقائي 3 شرائح لقوالب بلوجر

2026-03-15T10:25:00.011+01:00

تركيب سلايدر شو 3 شرائح متحركة في قالب بلوجر

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

أهمية السلايدر في تصميم المواقع

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

تحسين تجربة المستخدم

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

جذب انتباه الزائر

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

تنظيم الصفحة الرئيسية

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

الخلاصة

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

شرح تركيب سلايدر شو في قالب بلوجر

الأكواد الخاصة بالسلايدر شو

الذهاب الى المظهرتعديل ~~HTML~~ البحث عن ~~</head>~~ ولصق الكود التالي أعلاه

<style>
#imageslider .post-label{opacity:0;transition:opacity 0.5s ease,transform 0.5s ease;transform:translateX(0);pointer-events:none;}
#imageslider .post-label{transform:translateX(100px)}
#imageslider:hover .post-label{opacity:0.8;transform:translateX(0);pointer-events:auto}
#imageslider{max-width:1340px;width: 100%;margin:0 auto 20px;background-color:#fff;height:300px;overflow:hidden;position:relative}
@keyframes imageslider-key-next{0%{left:100%}100%{left:0}}
@keyframes imageslider-key-left{0%{left:0}100%{left:-100%}}
@keyframes imageslider-key-previous{0%{left:-100%}100%{left:0}}
@keyframes imageslider-key-right{0%{left:0}100%{left:100%}}
#imageslider >div,#imageslider li{list-style:none;margin:unset;padding:unset}
#imageslider >div >div{position:absolute;left:100%;top:0;width:100%;height:100%;visibility:hidden;animation-timing-function:ease-in-out;animation-fill-mode:forwards;display:flex;gap:10px;box-sizing:border-box;padding:10px}
#imageslider >div >div.active{visibility:visible;left:0}
#imageslider >div >div.left{animation-name:imageslider-key-left}
#imageslider >div >div.next{animation-name:imageslider-key-next}
#imageslider >div >div.right{animation-name:imageslider-key-right}
#imageslider >div >div.previous{animation-name:imageslider-key-previous}
.slider-item{flex:1;background:#000;position:relative;overflow:hidden;border-radius:8px}
.slider-item a{display:block;width:100%;height:100%}
.slider-item img{width:100%;height:100%;object-fit:cover}
.slide-info{position:absolute;bottom:-100%;color:#fff;padding:30px 10px 20px;width:100%;text-align:center;background:linear-gradient(to top,#353840,#00000047);transition:bottom 0.4s ease;pointer-events:none}
.slider-item:hover .slide-info{bottom:0}
.slide-info b{display:block;font-size:120%;margin-bottom:5px}
.meta{font-size:90%;opacity:0.8;display:flex;justify-content:center;gap:15px;margin-top:8px}
.meta span{display:flex;align-items:center;gap:5px}
#imageslider button{position:absolute;top:calc(50% - 24px);border:0;background-color:#fff;opacity:0.7;width:48px;height:48px;font-size:24px;border-radius:50%;cursor:pointer;z-index:10}
#imageslider button:hover{opacity:1}
.post-label{position:absolute;top:10px;right:10px;background:#ff5a5f;color:white;padding:5px 10px;border-radius:5px;font-size:13px;z-index:2;font-weight:bold}
.BTlef{left:26px}
.BTRig{right:26px}
@media screen and (max-width:768px){#imageslider >div >div{flex-direction:column}.slider-item{flex:1 0 100%;height:300px}}
</style>

نختار المكان المناسب ليظهر السلايدرالافضل فوق ~~رسائل المدونة الألكترونية~~ أو ~~اسفل الهيدر~~

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<b:section class='slider-section' id='slider-section' maxwidgets='1' showaddelement='yes'>
<b:widget id='HTML106' locked='false' title='' type='HTML' version='2' visible='true'>
<b:widget-settings>
<b:widget-setting name='content'>slider</b:widget-setting>
</b:widget-settings>
<b:includable id='main'>
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>

<div class='widget-content'>
<div id='imageslider'>
<div/>
<button class='BTlef'>❯</button>
<button class='BTRig'>❮</button>
</div>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>
</b:section>
</b:if>

ثم نقوم بالبحث عن ~~</body>~~ و نلصق الكود التالي اعلاه

<script type='text/javascript'>
//<![CDATA[
document.addEventListener("DOMContentLoaded", function () {
const currentUrl = window.location.origin;
const baseUrl = currentUrl.replace(/^https?:\/\//, '').replace(/\/$/, '');

const feedUrl = `https://${baseUrl}/feeds/posts/default?alt=json&max-results=15`;

console.log('Fetching from:', feedUrl);

fetch(feedUrl)
.then(res => {
if (!res.ok) {
throw new Error('Network response was not ok');
}
return res.json();
})
.then(data => {
if (!data.feed.entry || data.feed.entry.length === 0) {
throw new Error('No posts found');
}

const entries = data.feed.entry;
const sliderContainer = document.querySelector("#imageslider > div");

sliderContainer.innerHTML = '';

const slides = [];

for (let i = 0; i < entries.length; i += 3) {
const group = entries.slice(i, i + 3);
const slide = document.createElement("div");

group.forEach(entry => {
const title = entry.title.$t;
const labels = entry.category ? entry.category.map(cat => cat.term) : [];
const label = labels.length > 0 ? labels[0] : "غير مصنف";

const link = entry.link.find(l => l.rel === "alternate").href;
const content = entry.content.$t || "";
const imgMatch = content.match(/<img.*?src="(.*?)"/i);
let imgSrc = imgMatch ? imgMatch[1] : "https://via.placeholder.com/1600x900?text=No+Image";

if (imgSrc.includes("blogger.com")) {
imgSrc = imgSrc.replace(/\/s\d+-c/, '/s1600');
imgSrc = imgSrc.split("?")[0];
}

const author = entry.author ? entry.author[0].name.$t : "مجهول";
const publishedDate = new Date(entry.published.$t);
const formattedDate = publishedDate.toLocaleDateString('ar-AR', {
year: 'numeric',
month: 'long',
day: 'numeric'
});

const item = document.createElement("div");
item.className = "slider-item";
item.innerHTML = `
<div class="post-label">${label}</div>
<a href="${link}" target="_blank">
<img src="${imgSrc}" alt="${title}" loading="lazy" />
<div class="slide-info">
<b>${title}</b>
<div class="meta">
<span><i class="fas fa-user"></i> ${author}</span>
<span><i class="fas fa-calendar-alt"></i> ${formattedDate}</span>
</div>
</div>
</a>
`;
slide.appendChild(item);
});

slides.push(slide);
sliderContainer.appendChild(slide);
}

imagesliders({
selector: "#imageslider",
time: 500,
autoTime: 3000
});
})
.catch(error => {
console.error('Error fetching posts:', error);

const sliderElement = document.querySelector('#imageslider');
if (sliderElement) {
sliderElement.innerHTML = `
<div style="text-align: center; padding: 50px; background: #f8f9fa; border-radius: 10px;">
<p style="color: #dc3545; font-size: 18px; margin-bottom: 10px;">
❌ حدث خطأ في تحميل السلايدر
</p>
<p style="color: #6c757d; font-size: 14px;">
يرجى التأكد من اتصال الإنترنت أو المحاولة لاحقاً
</p>
<button onclick="location.reload()" style="
background: #007bff;
color: white;
border: none;
padding: 8px 20px;
border-radius: 5px;
cursor: pointer;
margin-top: 10px;
font-size: 14px;
">
إعادة المحاولة
</button>
</div>
`;
}
});

function imagesliders(o) {
const time = o.time || 500;
const autoTime = o.autoTime || 5000;
const selector = o.selector;
const imageslider = document.querySelector(selector);

if (!imageslider) return;

const buttonLeft = imageslider.querySelector(".BTRig");
const buttonRight = imageslider.querySelector(".BTlef");
const wrapper = imageslider.querySelector("div");

if (!wrapper || !buttonLeft || !buttonRight) return;

const slides = wrapper.children;
let activeIndex = 0;
let isAnimating = false;
let autoScroll;

if (slides.length === 0) return;

for (let slide of slides) {
slide.style.animationDuration = time + "ms";
}

slides[activeIndex].classList.add("active");

function goToNext() {
if (isAnimating) return;
isAnimating = true;
const nextIndex = (activeIndex + 1) % slides.length;
slides[nextIndex].classList.add("next");
slides[activeIndex].classList.add("left");
slides[nextIndex].classList.add("active");

setTimeout(() => {
slides[activeIndex].classList.remove("active", "left");
slides[nextIndex].classList.remove("next");
activeIndex = nextIndex;
isAnimating = false;
}, time);
}

function goToPrev() {
if (isAnimating) return;
isAnimating = true;
const prevIndex = (activeIndex - 1 + slides.length) % slides.length;
slides[prevIndex].classList.add("previous");
slides[activeIndex].classList.add("right");
slides[prevIndex].classList.add("active");

setTimeout(() => {
slides[activeIndex].classList.remove("active", "right");
slides[prevIndex].classList.remove("previous");
activeIndex = prevIndex;
isAnimating = false;
}, time);
}

function startAutoScroll() {
if (autoScroll) clearInterval(autoScroll);
autoScroll = setInterval(goToNext, autoTime);
}

function stopAutoScroll() {
if (autoScroll) {
clearInterval(autoScroll);
autoScroll = null;
}
}

startAutoScroll();

imageslider.addEventListener("mouseenter", () => {
console.log('Mouse entered - auto scroll stopped');
stopAutoScroll();
imageslider.style.opacity = '0.95';
});

imageslider.addEventListener("mouseleave", () => {
console.log('Mouse left - auto scroll resumed');
startAutoScroll();
imageslider.style.opacity = '1';
});

buttonLeft.addEventListener("click", (e) => {
e.preventDefault();
console.log('Left button clicked');
goToPrev();
});

buttonRight.addEventListener("click", (e) => {
e.preventDefault();
console.log('Right button clicked');
goToNext();
});

buttonLeft.style.cursor = 'pointer';
buttonRight.style.cursor = 'pointer';
}
});
//]]>
</script>

التعديلات

ستجد بهذا الكود رقم 15 و هو المسؤل عن عدد المواضيع اللتي تظهر بداخل السلايدر اذا اردت تغير العدد غير الرقم فقط

https://${baseUrl}/feeds/posts/default?alt=json&max-results=15`

ملاحظة

أذا القالب الخاص بك لا يحتوي على مكتبة الايقونات ~~Font Awesome~~ يجب اضافة المكتبة اسفل ~~<head>~~

<link href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css' rel='stylesheet'/>

Fletro Pro قالب بلوجر احترافي سريع جدا

2026-03-06T10:05:00.022+01:00

Fletro Pro قالب بلوجر احترافي المعدل

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

واحدة من أبرز مميزات Fletro Pro هي سرعته العالية في التحميل، حيث تم تحسين الكود ليتوافق مع معايير SEO الحديثة، مما يعزز من ظهور الموقع في نتائج محركات البحث. كما يوفر القالب خيارات متعددة لتخصيص الصفحات والمشاركات، بما في ذلك ألوان متعددة، خطوط متنوعة، وخيارات لتعديل قائمة التنقل أو تذييل الموقع بسهولة دون الحاجة لأي خبرة برمجية.

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

باختصار، قالب Fletro Pro يجمع بين الجمال والاحترافية والمرونة، ويعد خياراً مثالياً لأي مدونة ترغب في تقديم محتوى رقمي عالي الجودة مع تجربة مستخدم سلسة ومتوافقة مع جميع الأجهزة الحديثة.

مواصفات قالب Fletro Pro

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

معاينة القالب

سرعة القالب

التحميل

تحميل القالب

في الختام

القالب جميل و سريع تم تعديله من قبل مدونة هلا تك ليظهر بهذا الشكل

تركيب زر تكبير و تصغير الخط بداخل المواضيع لقوالب بلوجر

2026-02-26T10:03:00.013+01:00

تركيب زر تصغير و تكبير الخط بداخل المواضيع لقالب بلوجر

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

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

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

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

و هذه الميزة قد تجدها في القوالب المدفوهة و انا من خلال هذا الموضوع اقدمها لكم بشكل جديد و مميز جدا

و تركيبها يتم بداخل القالب بكل سهولة و ستظهر القالب اكثر احترافية و اقدمها لكم بشكلين

الشكل الاول امكانيو وضع زر التحكم في مكان تختاره انت بداخل المواضيع و الشكل الثاني تظهر زر التحكم بشكل عائم بداخل المواضيع

شرح التركيب بالفيديو

صورة الاضافة

الأكواد الخاصة لأضافة زر التكبير و التصغيرللمواضيع

نذهب الى المظهر و ثم ننتقل الى تعديل ~~HTML~~ و ثم نبحث عن ~~</head>~~ و نلصق الكود التالي أعلاه

<style>
input#fontSlider {background: linear-gradient(135deg, #007bff, #00bcd4);height: 2px;}
.fontControlWrapper{position:relative;width:100%;height:260px;margin:40px 0}
#fontControlBtn{position:absolute;left:58px;width:35px;height:36px;border-radius:50%;background:linear-gradient(135deg,#007bff,#00bcd4);border:none;cursor:pointer;z-index:10;display:flex;align-items:center;justify-content:center;font-size:25px;color:#fff}
#fontControlBox{position:absolute;left:50px;background:#fff;padding:12px;border-radius:14px;display:none;gap:8px;align-items:center;box-shadow:0 6px 16px rgba(0,0,0,.25);z-index:10}
#fontSizeIndicator{position:absolute;top:110px;left:100px;background:#007bff;color:#fff;padding:6px 12px;border-radius:20px;font-size:14px;opacity:0;transition:.3s;z-index:10}
#fontSizeIndicator.show{opacity:1}
.icon-svg{width:22px;height:22px;fill:#007bff;cursor:pointer}
#fontSlider{width:120px}
#resetFontBtn{background: linear-gradient(135deg, #007bff, #00bcd4);border:none;color:#fff;border-radius:4px;cursor:pointer;padding:0 14px;font-size:18px}
</style>

ثم نبحث عن ~~</body>~~ و نلصق الكود التالي أعلاه

<script type='text/javascript'>
//<![CDATA[
document.addEventListener("DOMContentLoaded", function() {
const article = document.querySelector(".post-body");
if (!article) return;

const btn = document.getElementById("fontControlBtn");
const box = document.getElementById("fontControlBox");
const slider = document.getElementById("fontSlider");
const indicator = document.getElementById("fontSizeIndicator");
const increaseFont = document.getElementById("increaseFont");
const decreaseFont = document.getElementById("decreaseFont");
const resetFontBtn = document.getElementById("resetFontBtn");

const saved = localStorage.getItem("fontSize");
if (saved) {
article.style.fontSize = saved + "px";
slider.value = saved;
}

btn.onclick = () => box.style.display = box.style.display == "flex" ? "none" : "flex";

function show(v) {
indicator.textContent = v + "px";
indicator.classList.add("show");
setTimeout(() => indicator.classList.remove("show"), 1500);
}

slider.oninput = () => {
article.style.fontSize = slider.value + "px";
localStorage.setItem("fontSize", slider.value);
show(slider.value);
};

increaseFont.onclick = () => { if (+slider.value < 30) { slider.value++; slider.oninput() } };
decreaseFont.onclick = () => { if (+slider.value > 12) { slider.value--; slider.oninput() } };
resetFontBtn.onclick = () => { slider.value = 16; slider.oninput() };

document.addEventListener("click", function(event) {
if (!box.contains(event.target) && !btn.contains(event.target)) {
box.style.display = "none";
}
});
});
//]]>
</script>

نقوم بالبحث عن ~~مكان لوضع الزر بداخله~~ و نضيف الكود التالي بداخله

<button id="fontControlBtn" title="تغيير حجم الخط">
A
</button>

<div id="fontControlBox">
<svg id="decreaseFont" class="icon-svg" viewBox="0 0 24 24">
<path d="M19 13H5v-2h14v2z"/>
</svg>

<input id="fontSlider" type="range" min="12" max="30" value="16"/>

<svg id="increaseFont" class="icon-svg" viewBox="0 0 24 24">
<path d="M19 11h-6V5h-2v6H5v2h6v6h2v-6h6v-2z"/>
</svg>

<button id="resetFontBtn">↺</button>
</div>

<div id="fontSizeIndicator">16px</div>

أذا رغبت أختيار الزر بشكل عائم بداخل المواضيع كل ما عليك تغير اكواد ~~CSS~~ بهذا

<style>
input#fontSlider{background:#2675fc;height:2px}
#fontControlBtn{position:fixed;bottom:70px;right:20px;width:50px;height:50px;border-radius:50%;background:linear-gradient(135deg,#007bff,#00bcd4);border:none;cursor:pointer;z-index:9999;display:flex;align-items:center;font-size:25px;color:#ffffff;justify-content:center;box-shadow:0 4px 10px rgba(0,0,0,.25)}
#fontControlBtn svg{width:24px;height:24px;fill:#fff}
#fontControlBox{position:fixed;bottom:130px;right:20px;background:#fff;padding:12px;border-radius:14px;display:none;gap:8px;align-items:center;box-shadow:0 6px 16px rgba(0,0,0,.25);z-index:9999}
#fontSlider{width:120px}
.icon-svg{width:22px;height:22px;fill:#007bff;cursor:pointer}
#resetFontBtn{background:#007bff;border:none;color:#fff;border-radius:4px;cursor:pointer;padding:0 14px;font-size:18px}
#fontSizeIndicator{position:fixed;bottom:196px;right:26px;background:#007bff;color:#fff;padding:6px 12px;border-radius:20px;font-size:14px;opacity:0;transition:.3s;z-index:9999}
#fontSizeIndicator.show{opacity:1}
</style>

ملاحظة مهمة

أذا لم يعمل الزر معك بعد التركيب يجب التاكد من ID الخاص بالمواضيع الموجود بالقالب الخاص بك

ID الحالي الموجود بكود الجافا سكربت هو ~~.post-body~~ اذا لم يكن نفس ID يجب تغيره

ستجده باكواد الجافا سكربت باللون الأحمر

و ثم قم بالحفظ

قالب مدونة هلا تك السابق الأحترافي بكامل أضافاته

2026-02-10T15:39:00.018+01:00

قالب مدونة هلا تك السابق بكامل أضافاته

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

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

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

المواصفات الخاصة بالقالب

يتميز القالب ببنية نظيفة وكود منظم يساعد محركات البحث على فهرسة الصفحات بسرعة وكفاءة.
تم تطويره وفق أحدث معايير الويب، مع التركيز على سرعة التحميل وتجربة المستخدم
تصميم متجاوب يعمل بكفاءة على جميع الأجهزة (الهواتف، التابلت، وأجهزة الكمبيوتر)
متوافق مع معايير تحسين محركات البحث SEO
سرعة تحميل عالية وأداء محسّن
هيكل صفحات منظم وصديق لمحركات البحث
سهولة التخصيص دون الحاجة إلى خبرة برمجية متقدمة
دعم SEO: مهيأ بالكامل لمحركات البحث
متوافق مع جميع المتصفحات الحديثة

التعديلات الأضافات التي تمت على القالب

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

أختبار القالب

معاينة القالب

تحميل القالب

أو من هنا

تحميل القالب

تركيب صفحة التحويل بالقالب

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

<div class="progress-circle">10</div>
<div class="progress-bar">
<div class="progress-fill"></div>
</div>
<button id="skip-button">الانتقال إلى الرابط</button>
</div>

لتركيب الصفحة قم بالذهاب الى الصفحات و ثم انشاء صفحة جديدة و قم بتسميتها مثلا ~~pageredirect~~

و ثم أختار ~~عرض HTML~~ و الصق الكود بداخلها و قم بعرض الصفحة

اذهب الى أكواد القالب و أبحث عن هذا الرابط ~~https://zom2zom.blogspot.com/p/pageredirect_24.html~~

~~و قم بأستبداله~~ برابط صفحة التحويل التي قمت بعرضها و قم بالحفظ

ستجد الرابط بهذا الشكل

و أخيرا

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

SouqStore قالب بلوجرأحترافي لعرض المنتجات و بيعها

2026-02-05T10:06:00.004+01:00

SouqStore قالب بلوجر لعرض المنتجات و بيعها

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

معاينة القالب

مواصفات القالب

قالب سريع جدا بالتحميل
سلايدر شو جميل جدا
زر قائمة الامنيات
دفع عن طريق paypal
زر السلة
عنصر البيع على الصفحة الرئيسية
اماكن كثيرة للاعلانات و غيرها

للتحميل

تحميل القالب

و في الختام

اذا اردت قالب لعرض المنتجات و بيعها هذا القالب سيلبي ما تحتاج اليه

Codesera قالب بلوجر للشركات

2026-02-04T09:25:00.018+01:00

Codesera قالب بلوجر للشركات

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

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

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

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

مواصفات القالب

قالب احترافي مميز
قالب خاص للشركات و بيع المنتجات
الوان مريحة مميزة
قالب يحوي سيو قوي
محرك بحث احترافي
اماكن للاعلانات

التعديلات اللتي قمت بأضافتها للقالب

تم اضافة زر الوضع المظلم
اضافة صندوق جدول المحتويات
اضافة خط مميز
تغير السلايدر الرئيسي بسلايدر احترافي تلقائي

معاينة القالب

تحميل القالب

أو من هنـــــأ

تحميل القالب

في الختام

اذا اردت قالب لعرض المنتجات او للشركات يمكنك استخدام هذا القالب

القالب سيلبي استخدامك

أضافة سلايدر شو أحترافي شريحة واحدة متحرك لقوالب بلوجر

2026-02-02T10:32:00.022+01:00

تركيب سلايدرشو أحترافي متحرك لقالب بلوجر

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

تركيب سلايدر شو لقوالب بلوجر

شرح أضافة الأكواد الخاصة بالسلايدر شو

طريقة تركيب هذا السلايدر شو طريقة بسيظ و سهلة و لا تحتاج لأي مجهود

الذهاب الى المظهر
تعديل HTML
لصق الكود بالمكان المناسب سأختار داخل رسائل المدونة الألكترونية

<b:section class='homeslider' id='HomeSlider' maxwidgets='1' showaddelement='no'>
  <b:widget id='HTML18' locked='true' title='سلايدر المواضيع' type='HTML' version='2' visible='true'>
    <b:widget-settings>
      <b:widget-setting name='content'><![CDATA[<!-- mode:random -->]]></b:widget-setting>
    </b:widget-settings>
    <b:includable id='main'>

      <style>
        #imageslider{width:100%;margin:0 auto 20px;overflow:hidden;position:relative;direction:rtl}
        .slider-wrap{position:relative;width:100%;padding-top:56.25%;overflow:hidden}
        .slider-track{position:absolute;top:0;right:0;height:100%;display:flex;transition:transform .6s ease}
        .slide{min-width:100%;height:100%;position:relative}
        .slide img{width:100%;height:100%;object-fit:cover}
        .slide-info{position:absolute;bottom:0;width:100%;padding:70px 15px 20px;color:#fff;text-align:center;background:linear-gradient(to top,#000,transparent)}
        .post-label{position:absolute;top:25px;right:25px;background:#0066ff;color:#fff;padding:6px 16px;font-size:13px;font-weight:600;border-radius:4px;z-index:5;box-shadow:0 2px 6px rgba(0,0,0,.3);white-space:nowrap}
        #imageslider button{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border:0;border-radius:50%;background:#fff;opacity:.75;font-size:20px;cursor:pointer;z-index:10}
        .prev{left:15px}
        .next{right:15px}
        #imageslider .slide img{transition:all .6s ease-in-out}
        #imageslider .slide:hover img{filter:brightness(80%);transform:scale(1.05)}
        .slide-info b{font-size:22px;line-height:36px}
        .meta{margin-top:16px;display:flex;justify-content:center;gap:15px;font-size:14px;opacity:.85}
        .meta span{display:flex;align-items:center;gap:5px}
      </style>

      <b:if cond='data:blog.url == data:blog.homepageUrl'>
        <div id='imageslider'>
          <div class='slider-wrap'>
            <div class='slider-track'/>
          </div>
          <button class='next'>&#10094;</button>
          <button class='prev'>&#10095;</button>
        </div>
      </b:if>

<script>
//<![CDATA[
document.addEventListener("DOMContentLoaded", function () {

  const MODE = "recent"; // recent | random
  const LIMIT = 10;
  const AUTO_TIME = 4000;

  fetch("/feeds/posts/default?alt=json&max-results=20")
    .then(res => res.json())
    .then(data => {

      let posts = data.feed.entry || [];
      const track = document.querySelector(".slider-track");
      if (!track || posts.length === 0) return;

      if (MODE === "random") posts.sort(() => 0.5 - Math.random());

      posts.slice(0, LIMIT).forEach(post => {

        const title = post.title.$t;
        const linkObj = post.link.find(l => l.rel === "alternate");
        const link = linkObj ? linkObj.href : "#";
        const content = post.content ? post.content.$t : "";
        const imgMatch = content.match(/<img.*?src="(.*?)"/i);
        let imgSrc = imgMatch ? imgMatch[1] : "https://via.placeholder.com/1600x900";
        imgSrc = imgSrc.replace(/\/s\d+-c/, "/s1600").split("?")[0];

        const label = post.category && post.category.length ? post.category[0].term : "عام";
        const author = post.author && post.author.length ? post.author[0].name.$t : "";
        const date = post.published ? new Date(post.published.$t).toLocaleDateString('ar',{year:'numeric',month:'long',day:'numeric'}) : "";

        const slide = document.createElement("div");
        slide.className = "slide";
        slide.innerHTML = `
          <a href="${link}">
            <span class="post-label">${label}</span>
            <img src="${imgSrc}" alt="${title}">
            <div class="slide-info">
              <b>${title}</b>
              <div class="meta">
                <span>${author}</span>
                <span>${date}</span>
              </div>
            </div>
          </a>
        `;
        track.appendChild(slide);
      });

      track.appendChild(track.children[0].cloneNode(true));
      initSlider();
    });

  function initSlider() {

    const slider = document.getElementById("imageslider");
    const track  = document.querySelector(".slider-track");
    const slides = document.querySelectorAll(".slide");
    const next   = document.querySelector(".next");
    const prev   = document.querySelector(".prev");

    let index = 0;
    let moving = false;
    let auto;

    function move(i) {
      if (moving) return;
      moving = true;
      track.style.transition = "transform .6s ease";
      track.style.transform = `translateX(${i * 100}%)`;

      setTimeout(() => {
        if (i === slides.length - 1) {
          track.style.transition = "none";
          index = 0;
          track.style.transform = "translateX(0)";
        }
        moving = false;
      }, 600);
    }

    function startAuto() {
      auto = setInterval(() => {
        index++;
        move(index);
      }, AUTO_TIME);
    }

    function stopAuto() {
      clearInterval(auto);
    }

    next.onclick = () => {
      stopAuto();
      index++;
      move(index);
      startAuto();
    };

    prev.onclick = () => {
      stopAuto();
      if (index === 0) {
        track.style.transition = "none";
        index = slides.length - 1;
        track.style.transform = `translateX(${index * 100}%)`;
      }
      setTimeout(() => {
        index--;
        move(index);
      }, 20);
      startAuto();
    };

    slider.addEventListener("mouseenter", stopAuto);
    slider.addEventListener("mouseleave", startAuto);

    startAuto();
  }

});
//]]>
</script>


    </b:includable>
  </b:widget>
</b:section>

التعديلات

ستجد بداخل الكود ~~const AUTO_TIME = 4000;~~ و هو المسول عند مدة حركة الشريحة غير الرقم فقط و ستجد

istener("DOMContentLoaded",function (){const MODE = "recent";const LIMIT = 10

الرقم 10 هي عدد الشرائح المتحركة و ~~recent~~ هي جلب أخر المواضيع اذا اردت مواضيع عشوائية استبدلها بـكلمة ~~random~~

ملاحظة

أذا القالب الخاص بك لا يحتوي على مكتبة الايقونات قم بلصق الكود أسفل ~~<head>~~

<link href='https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css' rel='stylesheet'/>

ثم قم بالحفظ

تركيب جدول المحتويات لعناوين الموضوع منزلق في قالب بلوجر

2026-01-23T10:08:00.005+01:00

تركيب جدول المحتويات احترافي منزلق في قالب بلوجر

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

فوائد تركيب جدول المحتويات في بلوجر

تحسين تجربة المستخدم

الزائر يقدر يوصل بسرعة للجزء اللي يهمه بدون ما يمرّر الصفحة كلها المقالات الطويلة تصبح أسهل في القراءة والتنقل

تحسين السيو (SEO)

يساعد محركات البحث (مثل جوجل) على فهم بنية المقال يزيد فرصة ظهور روابط أقسام المقال في نتائج البحث (Sitelinks) حيث يقلل معدل الارتداد لأن الزائر يبقى وقت أطول في الصفحة

تنظيم المقال بشكل احترافي

يعطي المقال شكل مرتب واحترافي ويجعل الكاتب يلتزم بتقسيم المقال لعناوين واضحة (H2 – H3)

مناسب للمقالات الطويلة

مهم جدًا للشروحات، الدروس، والمقالات التقنية ويوفر وقت الزائر ويزيد رضاه عن المحتوى

تحسين التوافق مع الجوال

في الهاتف، التنقل عبر جدول المحتويات أسهل من التمرير الطويل

زيادة التفاعل مع المقال

الزائر يضغط على أكثر من عنوان

شرح التركيب لجدول المحتويات بقالب بلوجر

الأكواد المستخدمة

نبحث عن ~~</head>~~ و نلصق الكود التالي أعلاه

<style>
#toc-button{position:fixed;top:20px;right:20px;background:#0088cc;color:#fff;border:none;border-radius:50%;width:55px;height:55px;font-size:26px;font-weight:bold;box-shadow:0 4px 10px rgba(0,0,0,0.25);cursor:pointer;z-index:9999;transition:background 0.3s,transform 0.2s}
#toc-button:hover{background:#006fa6;transform:scale(1.05)}
#toc-container{position:fixed;top:50%;right:-320px;transform:translateY(-50%);width:300px;max-height:80vh;overflow-y:auto;background:#fff;border-radius:12px 0 0 12px;box-shadow:-4px 0 15px rgba(0,0,0,0.2);padding:20px;transition:right 0.4s ease;z-index:9998;height:100%}
#toc-container.active{right:0}
#toc-container h3{margin-top:0;font-size:18px;border-bottom:2px solid #0088cc;padding-bottom:8px;color:#0088cc}
#toc-container ul{list-style:none;padding:0;margin:0}
#toc-container li{margin:8px 0;padding:6px 8px;border-radius:8px;transition:background 0.3s}
#toc-container li:hover{background:#f3f8fc}
#toc-container a{text-decoration:none;color:#333;display:block;transition:color 0.2s}
#toc-container a:hover{color:#0088cc}
#toc-container ul li a{font-size:16px;font-weight:600}
#toc-container ul ul li a{font-size:15px;padding-left:8px;font-weight:500}
#toc-container ul ul ul li a{font-size:14px;padding-left:16px;font-weight:500}
#toc-container ul ul ul ul li a{font-size:13px;padding-left:24px;font-weight:400}
#toc-container ul ul ul ul ul li a{font-size:12px;padding-left:32px;font-weight:400}
#toc-container ul ul{border-left:2px dashed #ddd;margin-left:10px;padding-left:10px}
html{scroll-behavior:smooth}
#toc-list >li >a::before{content:"\f22d";/* book */
font-family:"Font Awesome 6 Free";font-weight:900;font-size:14px;color:#0088cc}
#toc-list ul >li >a::before{content:"\f22d";/* book-open */
font-family:"Font Awesome 6 Free";font-weight:900;font-size:14px;color:#00aacc}
#toc-list ul ul >li >a::before{content:"\f22d";/* bookmark */
font-family:"Font Awesome 6 Free";font-weight:900;font-size:14px;color:#00bbdd}
#toc-list ul ul ul >li >a::before{content:"\f22d";/* file-alt */
font-family:"Font Awesome 6 Free";font-weight:900;font-size:14px;color:#00ccee}
#toc-list ul ul ul ul >li >a::before{content:"\f22d";/* file */
font-family:"Font Awesome 6 Free";font-weight:900;font-size:14px;color:#00ddee}
#toc-list a::before{display:inline-block;margin-left:4px;transition:transform 0.2s}
#toc-list a:hover::before{transform:translateX(3px)}
@media (max-width:480px){#toc-container{width:80vw;right:-85vw}#toc-container.active{right:0}}
</style>

ثم نبحث عن ~~</body>~~ و نلصق الكود التالي أعلاه

<b:if cond='data:view.isPost'>

<button id='toc-button' title='جدول المحتويات'>☰</button>
<nav id='toc-container'>
<h3>جدول المحتويات</h3>
<ul id='toc-list'/>
</nav>

<script type='text/javascript'>
//<![CDATA[
document.addEventListener("DOMContentLoaded",function(){const button = document.getElementById("toc-button");const tocContainer = document.getElementById("toc-container");const tocList = document.getElementById("toc-list");if (!button || !tocContainer || !tocList) return;const content = document.querySelector(".post-body,.entry-content,.article-post,.post");if (!content){tocList.innerHTML = "<li>لم يتم العثور على محتوى المقال.</li>";return;}const headings = content.querySelectorAll("h1,h2,h3,h4,h5");if (headings.length === 0){tocList.innerHTML = "<li>لا توجد عناوين في هذا المقال.</li>";}headings.forEach((h,i) =>{const id = "toc-item-" + i;h.setAttribute("id",id);const li = document.createElement("li");const a = document.createElement("a");a.href = "#" + id;a.textContent = h.textContent;a.addEventListener("click",function(e){e.preventDefault();const rect = h.getBoundingClientRect();const top = window.pageYOffset + rect.top - 20;window.scrollTo({top,behavior: "smooth"});});li.appendChild(a);tocList.appendChild(li);});button.addEventListener("click",() =>{tocContainer.classList.toggle("active");button.innerHTML = tocContainer.classList.contains("active") ? "✕" : "☰";});});
//]]>
</script>
</b:if>

و ثم نقوم بالحفظ

أضافة صفحة تحويل الروابط الخارجية لقالب بلوجر

2025-12-24T12:55:00.036+01:00

شرح تركيب صفحة تحويل الروابط في قوالب بلوجر

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

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

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

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

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

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

شرح طريقة تركيب صفحة تحويل الروابط الخارجية في قالب بلوجر

كيف يتم تركيب الاكواد الخاصة بصفحة التحويل

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

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

<title>جاري التحويل...</title>
<style>
.box{background:#fff;padding:30px;text-align:center;border-radius:12px;box-shadow:0 10px 25px rgba(0,0,0,.1)}
.progress-text{font-size:40px;font-weight:700;color:#4276eb;margin-bottom:33px;text-align:center;direction:ltr;letter-spacing:1px;animation:pulse 1.2s infinite}
.progress{width:100%;height:16px;background:#e0e0e0;border-radius:50px;overflow:hidden}
.progress-bar{width:0%;height:100%;background:linear-gradient(90deg,#2560e2,#77c0fa);border-radius:50px;transition:width .2s linear}
#goBtn{margin-top:20px;display:none;padding:10px 24px;background:linear-gradient(90deg,#2560e2,#054b83);color:#fff;text-decoration:none;border-radius:8px}
</style>

<div class="box">
  <div class="progress-text"><span id="percent">0</span>%</div>
  
  <div class="progress">
    <div class="progress-bar" id="bar"></div>
  </div>
  <a href="#" id="goBtn">الانتقال الآن</a>
</div>

<script>
var seconds = 10;

var bar = document.getElementById("bar");
var percentText = document.getElementById("percent");
var btn = document.getElementById("goBtn");

var params = new URLSearchParams(window.location.search);
var targetUrl = params.get("url");

if (!targetUrl) {
  btn.innerText = "لا يوجد رابط للانتقال";
}

var duration = seconds * 1000;
var startTime = Date.now();

var smoothTimer = setInterval(function () {
  var elapsed = Date.now() - startTime;
  var progress = Math.min(elapsed / duration, 1);
  var percent = Math.floor(progress * 100);

  bar.style.width = (progress * 100) + "%";
  percentText.innerText = percent;

  if (progress >= 1) {
    clearInterval(smoothTimer);

    if (targetUrl) {
      btn.href = targetUrl;           
      btn.style.display = "inline-block";

      // window.location.href = targetUrl;
    }
  }
}, 50);
</script>

ستجد بداخل الكود رقم 10 و هو المسؤل عن عدد الثواني اللتي تريد ان ينتظر بها الزائر يمكنك تغيرها للرقم

اللذي تريده و سوف تجدها بهذا الشكل

var seconds = 10;

ثم نقوم بالحفظ

و بعد ذلك نذهب الى المظهر و نختار تعديل ~~HTML~~ و ثم نبحث عن ~~</body>~~ و نضيف الكود التالي أعلاه

<script type='text/javascript'>
//<![CDATA[

// رابط صفحة التحويل
var redirectPage = "xxxxxxxxxxxxxxxxxx";

// دومين المدونة فقط بدون https
var myDomain = "xxxxxxxxxxxxxxxxxxx";

// روابط السوشيال ميديا المستثناة
var socialDomains = [
"facebook.com",
"fb.com",
"twitter.com",
"x.com",
"instagram.com",
"youtube.com",
"youtu.be",
"tiktok.com",
"linkedin.com",
"whatsapp.com",
"telegram.me",
"t.me"
];

document.addEventListener("DOMContentLoaded", function () {
var links = document.getElementsByTagName("a");

for (var i = 0; i < links.length; i++) {
(function (link) {
var href = link.getAttribute("href");
if (!href || !href.startsWith("http")) return;

if (href.indexOf(myDomain) !== -1) return;

for (var s = 0; s < socialDomains.length; s++) {
if (href.indexOf(socialDomains[s]) !== -1) return;
}

if (href.indexOf("#") !== -1) return;

link.addEventListener("click", function (e) {
e.preventDefault();
window.location.href =
redirectPage + "?url=" + encodeURIComponent(href);
});
})(links[i]);
}
});
//]]>
</script>

ملاحظة

قم بتغير ~~XXXXXXXXXX~~ برابط صفحة التحويل و ستجده بهذا الشكل

// رابط صفحة التحويل
var redirectPage = "xxxxxxxxxxxxxxxxxx";

قم بتغير ~~XXXXXXXXXXXX~~ برابط دومين موقعك بدون ان تضيف ~~https://~~ و ستجده هكذا

// دومين المدونة فقط بدون https
var myDomain = "xxxxxxxxxxxxxxxxxxx";

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

ثم قم بالحفظ