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

📑 محتويات المقال

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

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

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

ما وظيفة شريط أحدث المقالات؟

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

مميزات الكود

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

معاينة فكرة الشريط

{getButton} $text={معاينة} $icon={preview} $color={#f57c00}

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

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

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

<style>
.news-ticker-wrapper {
  width: 100%;
  height: 50px;
  background: linear-gradient(90deg, #1e3a8a, #3b82f6);
  overflow: hidden;
  display: flex;
  align-items: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  font-family: 'Segoe UI', Tahoma, Arial, sans-serif;
  direction: rtl;
}

.ticker-label {
  background: #f59e0b;
  color: #fff;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: bold;
  border-radius: 7px;
  margin: 0 10px;
  white-space: nowrap;
  flex-shrink: 0;
  position: relative;
  z-index: 3;
}

.ticker-mask {
  flex: 1;
  height: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
  direction: ltr;
}

.ticker-track {
  display: flex;
  width: max-content;
  animation: ticker-move-ltr 35s linear infinite;
}

.news-ticker-wrapper:hover .ticker-track {
  animation-play-state: paused;
}

.ticker-group {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.ticker-item {
  color: #fff;
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
  white-space: nowrap;
  padding: 0 30px;
  border-left: 1px solid rgba(255,255,255,0.3);
  direction: rtl;
  transition: color 0.3s ease;
}

.ticker-item:hover {
  color: #fbbf24;
}

.ticker-item:before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  background: #fbbf24;
  border-radius: 50%;
  margin-left: 10px;
  vertical-align: middle;
}

/* الحركة من اليسار إلى اليمين */
@keyframes ticker-move-ltr {
  0% {
    transform: translateX(-50%);
  }
  100% {
    transform: translateX(0);
  }
}

@media (max-width: 768px) {
  .news-ticker-wrapper {
    height: 44px;
  }

  .ticker-label {
    font-size: 12px;
    padding: 7px 10px;
    margin: 0 6px;
  }

  .ticker-item {
    font-size: 13px;
    padding: 0 20px;
  }

  .ticker-track {
    animation-duration: 28s;
  }
}
</style>

<div class="news-ticker-wrapper">
  <div class="ticker-label">📰 أحدث المقالات</div>

  <div class="ticker-mask">
    <div class="ticker-track">

      <div class="ticker-group">
        <a href="https://example.com/article1" class="ticker-item">كيفية تحسين سرعة موقعك بنسبة 200٪</a>
        <a href="https://example.com/article2" class="ticker-item">دليل شامل لتعلم HTML و CSS للمبتدئين</a>
        <a href="https://example.com/article3" class="ticker-item">أفضل 10 أدوات مجانية للمصممين</a>
        <a href="https://example.com/article4" class="ticker-item">استراتيجيات SEO تضعك في الصفحة الأولى</a>
        <a href="https://example.com/article5" class="ticker-item">كيف تبني متجر إلكتروني ناجح من الصفر</a>
      </div>

      <div class="ticker-group">
        <a href="https://example.com/article1" class="ticker-item">كيفية تحسين سرعة موقعك بنسبة 200٪</a>
        <a href="https://example.com/article2" class="ticker-item">دليل شامل لتعلم HTML و CSS للمبتدئين</a>
        <a href="https://example.com/article3" class="ticker-item">أفضل 10 أدوات مجانية للمصممين</a>
        <a href="https://example.com/article4" class="ticker-item">استراتيجيات SEO تضعك في الصفحة الأولى</a>
        <a href="https://example.com/article5" class="ticker-item">كيف تبني متجر إلكتروني ناجح من الصفر</a>
      </div>

    </div>
  </div>
</div>

طريقة تركيب الكود في بلوجر

يمكنك تركيب الكود بطريقتين، إما من التخطيط أو من داخل كود القالب نفسه.

الطريقة الأولى: من التخطيط

1. ادخل إلى لوحة تحكم بلوجر.
2. اختر المدونة التي تريد إضافة الشريط إليها.
3. اذهب إلى قسم التخطيط.
4. اضغط على إضافة أداة.
5. اختر أداة HTML/JavaScript.
6. الصق الكود داخل الأداة.
7. اضغط حفظ.

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

الطريقة الثانية: من تعديل HTML للقالب

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

1. ادخل إلى المظهر.
2. اضغط على السهم بجانب زر التخصيص.
3. اختر تعديل HTML.
4. ابحث عن وسم <body>.
5. ضع الكود بعده مباشرة.
6. احفظ القالب.

طريقة تغيير روابط المقالات

لتغيير روابط المقالات، ابحث داخل الكود عن الروابط بهذا الشكل:

<a href="https://example.com/article1" class="ticker-item">
  عنوان المقال هنا
</a>

استبدل الرابط التجريبي برابط مقالك الحقيقي، ثم استبدل النص بعنوان المقال.

مثال:

<a href="https://www.arabakwad.com/2026/05/example-post.html" class="ticker-item">
  شرح إضافة أداة احترافية لمدونات بلوجر
</a>

لماذا الروابط مكررة داخل الكود؟

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

طريقة تغيير سرعة الشريط

للتحكم في سرعة الحركة، ابحث عن هذا السطر:

animation: ticker-move-ltr 35s linear infinite;

الرقم 35s هو مدة الحركة. كلما زاد الرقم أصبحت الحركة أبطأ، وكلما قل الرقم أصبحت الحركة أسرع.

لجعل الشريط أبطأ:

animation: ticker-move-ltr 50s linear infinite;

لجعل الشريط أسرع:

animation: ticker-move-ltr 20s linear infinite;

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

لتغيير لون خلفية الشريط، ابحث عن هذا السطر:

background: linear-gradient(90deg, #1e3a8a, #3b82f6);

يمكنك تغيير الألوان بما يناسب قالب مدونتك. مثلًا لو تريد اللون الأسود مع الأزرق:

background: linear-gradient(90deg, #020617, #2563eb);

ولتغيير لون زر "أحدث المقالات"، ابحث عن هذا السطر:

background: #f59e0b;

واستبدله بأي لون يناسبك.

طريقة جعل الشريط ثابتًا أثناء التمرير

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

position: sticky;
top: 0;
z-index: 9999;

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

هل الكود يؤثر على سرعة المدونة؟

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

نصائح مهمة قبل استخدام الكود

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

الخلاصة

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

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

---

تم إعداد وشرح هذا الكود حصريًا بواسطة عرب أكواد