تك مصراوي - أخبار التكنولوجيا، الكمبيوتر والهواتف الذكية

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

كود شريط الأخبار الاحترافي لبلوجر – يعرض آخر التدوينات بشكل أنيق

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

طريقة إضافة شريط آخر الأخبار لمدونة بلوجر بسهولة

كود شريط التدوينات الجديد لموقعك – تصميم عصري وسريع التحميل

🔹 عناوين بأسلوب تقني (تناسب موقعك “تك مصراوي”):

شريط أخبار Tec Masrawy – عرض أحدث المقالات التقنية تلقائيًا

كود بلوجر: شريط أخبار متحرك يعرض جديد البرامج والشروحات

أحدث إضافات بلوجر 2025: شريط الأخبار المتواصل بتصميم احترافي

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

تعرف على طريقة إنشاء شريط أخبار ديناميكي لموقعك التقني

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

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

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

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

المنشورة في مدونتك التقنية مثل "تك مصراوي" أو أي موقع آخر.

📰 شرح تركيب شريط الأخبار من خلال التخطيط في بلوجر

🔹 الخطوة 1: تسجيل الدخول إلى بلوجر

افتح لوحة تحكم بلوجر

اختر المدونة اللي هتضيف فيها الشريط (مثلاً: تك مصراوي).

🔹 الخطوة 2: الانتقال إلى التخطيط (Layout)

من القائمة الجانبية اضغط على التخطيط.

هتظهر لك خريطة القالب فيها الأقسام (Header – Sidebar – Main – Footer ...).

🔹 الخطوة 3: اختيار مكان عرض شريط الأخبار

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

اختَر مربع (إضافة أداة / Add a Gadget) في المكان المناسب.

ثم اختَر HTML/JavaScript من القائمة.

🔹 الخطوة 4: إضافة كود الشريط داخل الأداة

انسخ الكود التالي كاملًا وضعه داخل المربع الخاص بـ HTML/JavaScript 👇

<div class="news-ticker" dir="ltr">
  <div class="breaking-label">📰 عاجل</div>
  <div class="ticker-container">
    <div class="ticker-content" id="ticker-content"></div>
  </div>
</div>

// تحميل كل المقالات تدريجيًا
  function loadAllPosts(url) {
    const callbackName = 'displayAllPosts_' + new Date().getTime();
    window[callbackName] = function(json) {
      if (json.feed && json.feed.entry) {
        json.feed.entry.forEach(entry => {
          const title = entry.title.$t;
          const link = entry.link.find(l => l.rel === 'alternate').href;
          allPosts.push({ title, link });
        });
      }

// لو فيه صفحة تانية نكمل التحميل
      const next = json.feed.link.find(l => l.rel === 'next');
      if (next) {
        nextPage = next.href.replace('http://', 'https://') + '&callback=' + callbackName;
        loadNextPage(nextPage);
      } else {
        renderTicker();
      }

document.body.removeChild(script);
      delete window[callbackName];
    };

const script = document.createElement('script');
    script.src = url + '&callback=' + callbackName;
    document.body.appendChild(script);
  }

function loadNextPage(nextUrl) {
    const script = document.createElement('script');
    script.src = nextUrl;
    document.body.appendChild(script);
  }

// عرض الشريط بعد جمع كل المقالات
  function renderTicker() {
    let html = '';
    allPosts.forEach(post => {
      const color = colors[colorIndex % colors.length];
      html += `<span class="news-item" style="background:${color};"><a href="${post.link}" target="_blank">${post.title}</a></span>`;
      colorIndex++;
    });
    tickerContainer.innerHTML = html.repeat(5); // تكرار لملء الشريط
  }

// أول استدعاء
  loadAllPosts('https://www.masrawy.giize.com/feeds/posts/default?alt=json-in-script&max-results=' + maxResults);
})();
</script>

ملحووظه غير رابط الموقع الى الرابط الخاص بك

✅ مميزات الطريقة من خلال التخطيط

لا تحتاج لتعديل القالب أو الأكواد الأساسية

آمنة 100٪ حتى لو غيرت القالب لاحقًا.

يمكن نقلها أو حذفها بسهولة من التخطيط.

متوافقة مع جميع قوالب بلوجر الحديثة.