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

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

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

الخطوة 1: فهم آلية العمل

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

ملاحظة: خلاصة RSS لمدونتك تكون متاحة بشكل تلقائي على الرابط: https://yourblogname.blogspot.com/feeds/posts/default?alt=rss (استبدل yourblogname باسم مدونتك الفعلي).

الخطوة 2: إنشاء هيكل HTML

أضف هذا الكود في المكان الذي تريد ظهور شريط الأخبار فيه (عادة في الرأس أو التذييل):

<div class="news-ticker-container">
    <div class="news-ticker-label">أحدث المواضيع:</div>
    <div class="news-ticker">
        <ul id="news-ticker-list"></ul>
    </div>
</div>

الخطوة 3: تنسيق الشريط باستخدام CSS

أضف أنماط CSS التالية لتحسين مظهر شريط الأخبار:

<style>
.news-ticker-container {
    display: flex;
    align-items: center;
    background-color: #f5f5f5;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    margin: 15px 0;
    direction: rtl;
}

.news-ticker-label {
    background-color: #2c3e50;
    color: white;
    padding: 5px 10px;
    border-radius: 3px;
    margin-left: 10px;
    font-weight: bold;
}

.news-ticker {
    overflow: hidden;
    white-space: nowrap;
    flex-grow: 1;
    position: relative;
}

.news-ticker ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: inline-block;
    animation: ticker 20s linear infinite;
}

.news-ticker li {
    display: inline-block;
    margin-right: 30px;
    color: #333;
}

.news-ticker li a {
    color: #2c3e50;
    text-decoration: none;
}

.news-ticker li a:hover {
    text-decoration: underline;
    color: #e74c3c;
}

@keyframes ticker {
    0% { transform: translateX(100%); }
    100% { transform: translateX(-100%); }
}
</style>

الخطوة 4: جلب البيانات باستخدام JavaScript

أضف هذا الكود JavaScript قبل وسم </body>:

<script>
// دالة لجلب آخر المواضيع من خلاصة RSS
function fetchBlogPosts() {
    const blogRssUrl = 'https://yourblogname.blogspot.com/feeds/posts/default?alt=rss';
    const proxyUrl = 'https://api.rss2json.com/v1/api.json?rss_url=';
    
    fetch(proxyUrl + encodeURIComponent(blogRssUrl))
        .then(response => response.json())
        .then(data => {
            if (data.items && data.items.length > 0) {
                displayPosts(data.items);
            }
        })
        .catch(error => console.error('Error fetching posts:', error));
}

// دالة لعرض المواضيع في شريط الأخبار
function displayPosts(posts) {
    const tickerList = document.getElementById('news-ticker-list');
    
    posts.slice(0, 10).forEach(post => {
        const listItem = document.createElement('li');
        const link = document.createElement('a');
        
        link.href = post.link;
        link.textContent = post.title;
        link.title = post.title;
        
        listItem.appendChild(link);
        tickerList.appendChild(listItem);
    });
}

// تشغيل الدالة عند تحميل الصفحة
window.addEventListener('DOMContentLoaded', fetchBlogPosts);
</script>

نصائح إضافية

• استخدم RSS2JSON لتحويل خلاصة RSS إلى JSON بسهولة
• يمكنك تعديل سرعة الحركة بتغيير قيمة 20s في خاصية animation
• لإضافة أيقونة قبل العنوان، استخدم مكتبة مثل Font Awesome
• لمزيد من المعلومات حول واجهة بلوجر API، راجع الوثائق الرسمية

استكشاف الأخطاء وإصلاحها

إذا لم يعمل الشريط بشكل صحيح:

1. تأكد من استبدال yourblogname باسم مدونتك الفعلي
2. تحقق من أن خلاصة RSS تعمل بالزيارة المباشرة للرابط
3. افتح أدوات المطورين في المتصفح (F12) وابحث عن أي أخطاء في Console
4. جرب استخدام Blogger API بدلاً من RSS إذا كانت مدونتك كبيرة

مصادر مفيدة:

• دليل RSS الرسمي لبلوجر
• تعلم CSS Animations
• دليل Fetch API