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

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

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

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

💡 ما هي فائدة شريط الأخبار في مدونتك؟

شريط الأخبار يُعد من الإضافات المهمة لأي مدونة احترافية، حيث يعمل على:

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

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

1. إضافة كود الـ CSS لتصميم الشريط

انتقل إلى:
لوحة التحكم > القالب > تعديل HTML
ثم ابحث عن الوسم ]]></b:skin>، وضع الكود التالي فوقه مباشرة:

css

/* CSS Breaking News - Manal Academy */
#breakingnews {
  position: relative;
  font-family: 'Droid Arabic Kufi', Roboto;
  margin: 20px 20px 0 20px;
  height: 50px;
  line-height: 26px;
  overflow: hidden;
  padding: 4px 0;
  border-top: 2px solid #ecf0f1;
  border-bottom: 2px solid #ecf0f1;
}
#breakingnews:after {
  content: '\f0c9';
  font-family: fontawesome;
  color: #bdc3c7;
  position: absolute;
  left: 18px;
  font-size: 1.2rem;
  top: 12px;
  text-align: center;
}
#breakingnews .breakhead {
  background: #e74c3c;
  color: #fff;
  display: inline-block;
  float: right;
  font-size: 17px;
  font-weight: 700;
  padding: 6px 12px;
}
#adbreakingnews {
  float: right;
  margin-right: 12px;
  margin-top: 6px;
  line-height: 28px;
}
#adbreakingnews ul,
#adbreakingnews li {
  list-style: none;
  margin: 0;
  padding: 0;
}
#adbreakingnews li a {
  font-weight: 400;
  color: #000;
}
#adbreakingnews li a:hover {
  color: #e74c3c;
}
#adbreakingnews li a:before {
  content: '\f079';
  font-family: fontawesome;
  float: right;
  margin-left: 8px;
}

2. إضافة كود الجافا سكربت لتحميل المشاركات تلقائيًا

ابحث في نفس القالب عن الوسم </body>، ثم الصق الكود التالي فوقه مباشرة، مع تغيير الرابط الموجود إلى رابط مدونتك:

html

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){
  var e = "https://YOURBLOGURL.blogspot.com"; // ✏️ غيّر هذا لرابط مدونتك
  var t = 20;
  $.ajax({
    url: e + "/feeds/posts/default?alt=json-in-script&max-results=" + t,
    type: "get",
    dataType: "jsonp",
    success: function(data) {
      function scrollNews() {
        $("#adbreakingnews li:first").slideUp(function(){
          $(this).appendTo($("#adbreakingnews ul")).slideDown();
        });
      }
      var posts = data.feed.entry;
      if (posts) {
        var html = "<ul>";
        for (var i = 0; i < posts.length; i++) {
          var postLink = "";
          for (var j = 0; j < posts[i].link.length; j++) {
            if (posts[i].link[j].rel == "alternate") {
              postLink = posts[i].link[j].href;
              break;
            }
          }
          var postTitle = posts[i].title.$t;
          html += '<li><a href="' + postLink + '" target="_blank">' + postTitle + '</a></li>';
        }
        html += "</ul>";
        $("#adbreakingnews").html(html);
        setInterval(scrollNews, 5000);
      } else {
        $("#adbreakingnews").html("<span>لا توجد مشاركات حالياً!</span>");
      }
    },
    error: function(){
      $("#adbreakingnews").html("<strong>حدث خطأ أثناء تحميل المشاركات!</strong>");
    }
  });
});
//]]>
</script>

3. إضافة العنصر من خلال التخطيط أو القالب

من خلال لوحة التخطيط أو داخل القالب بين وسم <body> و </body>، قم بلصق الكود التالي لعرض الشريط في المكان المناسب:

html

<div id='breakingnews'>
  <span class='breakhead'>آخر الأخبار</span>
  <div id='adbreakingnews'>جاري تحميل الأخبار...</div>
</div>

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

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

شكل شريط الاخبار

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

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

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

📌 نصيحة من منال أكاديمي:
يمكنك استخدام هذا الشريط في الصفحة الرئيسية فقط أو في جميع الصفحات، حسب التصميم المناسب لك، كما يُفضل اختيار عدد مناسب من المشاركات (10 أو 20) للحفاظ على الأداء الجيد.

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

هل ترغب في المزيد من أدوات بلوجر الحصرية؟ ✨
اكتب لنا في التعليقات أو راسلنا مباشرة!

ManalAcademy - منال أكاديمي