📁 آخر الأخبار
0

إضافة شريط الأخبار المتحرك لبلوجر Blogger Moving Bar PRO مجاناً

Techno Riad Techno Riad

إضافة شريط الأخبار المتحرك لمدونات بلوجر Blogger Moving Bar PRO مجاناً



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

تم تطوير هذه الإضافة بواسطة WebCCCC باستخدام HTML وCSS وJavaScript، ولا تحتاج إلى قاعدة بيانات أو استضافة خارجية.

ما هي إضافة Blogger Moving Bar PRO؟

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

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

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

طريقة تركيب الإضافة على Blogger

  1. ادخل إلى لوحة تحكم Blogger.
  2. اختر المدونة التي تريد تركيب الإضافة عليها.
  3. انتقل إلى قسم التنسيق (Layout).
  4. اضغط على إضافة أداة (Add a Gadget).
  5. اختر أداة HTML/JavaScript.
  6. اترك عنوان الأداة فارغاً.
  7. انسخ الكود الموجود بالأسفل والصقه في مربع المحتوى.
  8. اضغط على حفظ.

كود إضافة شريط الأخبار المتحرك

انسخ الكود كاملاً والصقه داخل أداة HTML/JavaScript في بلوجر:

<style>
#webcccc-moving-bar {
  position: fixed;
  bottom: -60px;
  right: 0;
  left: 0;
  width: 100%;
  height: 44px;
  background: #0f172a;
  color: #fff;
  z-index: 999999;
  display: flex;
  align-items: center;
  overflow: hidden;
  direction: ltr;
  box-shadow: 0 -2px 12px rgba(0,0,0,.2);
  transition: bottom .35s ease;
  font-family: Arial, sans-serif;
  box-sizing: border-box;
}
#webcccc-moving-bar * { box-sizing: border-box; }
#webcccc-moving-bar.show { bottom: 0; }
#webcccc-moving-bar .wc-label {
  background: #e11d48;
  height: 100%;
  padding: 0 16px;
  display: flex;
  align-items: center;
  white-space: nowrap;
  font-weight: bold;
  direction: rtl;
  flex-shrink: 0;
}
#webcccc-moving-bar .wc-track {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}
#webcccc-moving-bar .wc-content {
  display: flex;
  width: max-content;
  align-items: center;
  animation: wc-ticker 25s linear infinite;
}
#webcccc-moving-bar:hover .wc-content {
  animation-play-state: paused;
}
#webcccc-moving-bar .wc-content a {
  color: #fff;
  text-decoration: none;
  padding: 0 28px;
  white-space: nowrap;
  font-size: 14px;
  direction: rtl;
}
#webcccc-moving-bar .wc-content a:hover {
  color: #38bdf8;
}
#webcccc-moving-bar .wc-close {
  background: transparent;
  color: white;
  border: 0;
  font-size: 24px;
  cursor: pointer;
  padding: 0 13px;
  height: 100%;
  flex-shrink: 0;
}
@keyframes wc-ticker {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media(max-width:600px) {
  #webcccc-moving-bar { height: 40px; }
  #webcccc-moving-bar .wc-label {
    padding: 0 9px;
    font-size: 12px;
  }
  #webcccc-moving-bar .wc-content a {
    font-size: 12px;
    padding: 0 18px;
  }
}
@media(prefers-reduced-motion: reduce) {
  #webcccc-moving-bar .wc-content {
    animation-duration: 60s;
  }
}
</style>

<div id="webcccc-moving-bar">
  <div class="wc-label">آخر الأخبار</div>
  <div class="wc-track">
    <div class="wc-content">
      <a href="https://www.webcccc.com/">مرحباً بكم في موقع WebCCCC</a>
      <a href="https://www.webcccc.com/">اكتشف أحدث الإضافات والسكربتات</a>
      <a href="https://www.webcccc.com/">شروحات بلوجر ووردبريس وحلول تقنية</a>
      <a href="https://www.webcccc.com/" aria-hidden="true">مرحباً بكم في موقع WebCCCC</a>
      <a href="https://www.webcccc.com/" aria-hidden="true">اكتشف أحدث الإضافات والسكربتات</a>
      <a href="https://www.webcccc.com/" aria-hidden="true">شروحات بلوجر ووردبريس وحلول تقنية</a>
    </div>
  </div>
  <button class="wc-close" type="button" aria-label="إغلاق الشريط">×</button>
</div>

<script>
(function () {
  var bar = document.getElementById('webcccc-moving-bar');
  if (!bar || bar.dataset.initialized) return;
  bar.dataset.initialized = 'true';

  var close = bar.querySelector('.wc-close');
  var closed = false;
  var threshold = 250;

  function checkScroll() {
    if (closed) return;
    if (window.scrollY > threshold) {
      bar.classList.add('show');
    } else {
      bar.classList.remove('show');
    }
  }

  window.addEventListener('scroll', checkScroll, {passive:true});

  close.addEventListener('click', function () {
    closed = true;
    bar.classList.remove('show');
  });

  checkScroll();
})();
</script>

كيفية تخصيص الإضافة

1. تغيير عنوان الشريط

ابحث عن السطر التالي واستبدل «آخر الأخبار» بالنص الذي تريده:

<div class="wc-label">آخر الأخبار</div>

2. تغيير لون خلفية الشريط

ابحث عن اللون التالي واستبدله باللون المناسب لموقعك:

background: #0f172a;

3. تغيير لون عنوان الأخبار

background: #e11d48;

4. تغيير سرعة الحركة

animation: wc-ticker 25s linear infinite;
  • 15 ثانية: حركة سريعة.
  • 25 ثانية: حركة متوسطة.
  • 40 ثانية: حركة بطيئة.

5. تغيير وقت ظهور الشريط

var threshold = 250;

الرقم 250 يعني أن الشريط سيظهر بعد تمرير الصفحة بمقدار 250 بكسل.

6. إضافة أخبار وروابط جديدة

أضف هذا السطر داخل العنصر wc-content، مع استبدال الرابط والنص بما يناسبك:

<a href="https://www.example.com/">
  اكتب عنوان الخبر أو المقال هنا
</a>

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

هل تعمل الإضافة على الهاتف؟

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

هل تؤثر الإضافة على سرعة المدونة؟

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

الأسئلة الشائعة

هل تحتاج الإضافة إلى استضافة خاصة؟

لا، يكفي وضع الكود داخل أداة HTML/JavaScript في Blogger.

هل يمكن تغيير الأخبار؟

نعم، يمكنك تعديل النصوص والروابط مباشرة من الكود.

هل يستطيع الزائر إغلاق الشريط؟

نعم، يوجد زر × لإغلاقه خلال الزيارة الحالية.

هل تظهر الإضافة منذ فتح المدونة؟

لا، تظهر فقط بعد تمرير الصفحة بمقدار 250 بكسل.

الخلاصة

تعتبر إضافة Blogger Moving Bar PRO وسيلة بسيطة لإبراز آخر الأخبار والمقالات والعروض داخل مدونات بلوجر. يمكنك تركيبها خلال دقائق وتخصيصها لتناسب ألوان وتصميم موقعك.

البرمجة والتطوير: WebCCCC

www.webcccc.com

© جميع الحقوق محفوظة لـ WebCCCC.

Techno Riad
Techno Riad

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

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

💬 أهلاً بك في Techno Riad Official!

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

📌 يرجى احترام آراء الآخرين، والابتعاد عن الروابط المزعجة والتعليقات غير اللائقة.

❤️ شكراً لزيارتك وثقتك بنا، ولا تنسَ زيارة مدونتنا باستمرار لاكتشاف المزيد من الشروحات والمقالات التقنية.

**Techno Riad Official – عالم التكنولوجيا بين يديك.**