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

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

معاينة للشريط الجديد: تصميم احترافي بحواف دائرية وتحديث تلقائي للمقالات

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

مميزات هذا الإضافة:

• خفة في التصفح: يعتمد على Vanilla Javascript مما يجعله سريعاً جداً ولا يؤثر على سرعة الموقع.
• تحديث تلقائي: يجلب عناوين أحدث المقالات من التغذية (Feed) تلقائياً.
• تصميم احترافي: يتميز بحواف دائرية وفواصل أنيقة بين الأخبار.
• سهولة التركيب: كود واحد يمكن وضعه في أداة التخطيط مباشرة.

خطوات التركيب

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

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

الكود الكامل (HTML + CSS + JS):

<div class="huda-news-container">
  <div class="huda-news-label">
    <span class="huda-icon">⚡</span>
    <span class="huda-text">مستجدات</span>
  </div>
  <div class="huda-news-content">
    <div class="huda-news-track" id="huda-news-feed"></div>
  </div>
</div>

<style>
:root {
  --huda-primary: #2980b9;
  --huda-bg: #ffffff;
  --huda-text: #2c3e50;
  --huda-border: #e0e0e0;
  --huda-separator: #e74c3c;
}
.huda-news-container {
  display: flex;
  align-items: center;
  background: var(--huda-bg);
  border: 1px solid var(--huda-border);
  border-radius: 50px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.05);
  height: 46px;
  overflow: hidden;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  width: 100%;
  position: relative;
  margin: 10px 0;
}
.huda-news-label {
  background: var(--huda-primary);
  color: #fff;
  height: 100%;
  display: flex;
  align-items: center;
  padding: 0 20px;
  font-weight: 700;
  font-size: 13px;
  z-index: 2;
  position: relative;
  border-radius: 0 50px 50px 0;
  box-shadow: 2px 0 10px rgba(0,0,0,0.1);
}
.huda-icon {
  margin-left: 8px;
  font-size: 16px;
}
.huda-news-content {
  flex-grow: 1;
  overflow: hidden;
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
}
.huda-news-track {
  display: flex;
  white-space: nowrap;
  animation: hudaScroll 35s linear infinite;
  padding-right: 15px;
}
.huda-news-track:hover {
  animation-play-state: paused;
}
.huda-news-item {
  color: var(--huda-text);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  margin-left: 40px;
  position: relative;
  transition: color 0.3s ease;
  display: inline-flex;
  align-items: center;
}
.huda-news-item::after {
  content: '';
  position: absolute;
  left: -25px;
  top: 50%;
  transform: translateY(-50%) skewX(-20deg);
  width: 2px;
  height: 14px;
  background-color: var(--huda-separator);
  opacity: 0.6;
}
.huda-news-item:hover {
  color: var(--huda-primary);
}
@keyframes hudaScroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(100%); }
}
@media (max-width: 480px) {
  .huda-text { display: none; }
  .huda-news-label { padding: 0 15px; border-radius: 0 50px 50px 0; }
  .huda-icon { margin-left: 0; }
}
</style>

<script>
(function() {
  var feedUrl = "/feeds/posts/default?alt=json&max-results=10";
  var container = document.getElementById("huda-news-feed");
  fetch(feedUrl)
    .then(response => response.json())
    .then(data => {
      var posts = data.feed.entry;
      if (posts) {
        var content = "";
        posts.forEach(post => {
          var title = post.title.$t;
          var link = post.link.find(l => l.rel === "alternate").href;
          content += `<a href="${link}" class="huda-news-item">${title}</a>`;
        });
        container.innerHTML = content;
      }
    })
    .catch(error => console.error(error));
})();
</script>

كيفية تعديل الألوان لتناسب قالبك

لقد صممنا الكود ليكون مرناً للغاية. يمكنك تغيير ألوان الشريط بسهولة من خلال تعديل القيم الموجودة في بداية الكود تحت قسم :root:

• huda-primary: لون الخلفية لعنوان الشريط (اللون الأزرق حالياً).
• huda-bg: لون خلفية الشريط (الأبيض).
• huda-text: لون نصوص العناوين.
• huda-separator: لون الفاصل بين كل خبر وآخر.

بمجرد تغيير كود اللون (Hex Code)، سيتغير شكل الشريط بالكامل ليتناغم مع هويتكم البصرية.

خاتمة:

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