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

[احمد مـحمود]

​

مقدمة​

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

---

معاينة الأداة​

يمكنك معاينة الاداة من هنا.

---

صور الأداة​

صور من الهاتف

---

​

مميزات الأداة​

• تصميم احترافي وجذاب باستخدام ألوان متدرجة.
• دعم اللغة العربية لعرض الأخبار بسهولة.
• تحريك تلقائي للأخبار مع إمكانية إيقاف الحركة عند تمرير الماوس.
• عرض التاريخ الميلادي والهجري تلقائيًا.
• سهل التركيب والتخصيص.

---

كود الأداة​

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

  <style>   

    @import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;700&display=swap');   

    .blfym-news-container {   

        display: flex;   

        align-items: center;   

        background: linear-gradient(135deg, #007bff, #0056b3);   

        color: white;   

        padding: 12px;   

        overflow: hidden;   

        white-space: nowrap;   

        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);   

        border-radius: 12px;   

        width: 100%;   

        max-width: 800px;   

        position: relative;   

    }   

    .blfym-date-box {   

        font-weight: bold;   

        font-size: 14px;   

        padding: 8px 15px;   

        background: #fff;   

        color: black; 

        border-radius: 8px;   

        display: flex;   

        align-items: center;   

        gap: 5px;   

        position: absolute;   

        right: 15px;   

        top: 50%;   

        transform: translateY(-50%);   

        transition: all 0.5s ease-in-out;   

        z-index: 5; 

    }   

    .blfym-news-ticker {   

        flex-grow: 1;   

        overflow: hidden;   

        position: relative;   

    }   

    .blfym-news-content {   

        display: inline-block;   

        white-space: nowrap;   

        animation: blfymScrollNews 17s linear infinite;   

    }   

    .blfym-news-item {   

        display: inline-block;   

        margin-right: 30px;   

    }   

    .blfym-news-item a {   

        color: white;   

        text-decoration: none;   

        font-weight: bold;   

        transition: color 0.3s;   

    }   

    .blfym-news-item a:hover {   

        text-decoration: underline;   

        color: #ffea00;   

    }   

    @keyframes blfymScrollNews {   

        from { transform: translateX(100%); }   

        to { transform: translateX(-100%); }   

    }   

    .blfym-news-ticker:hover .blfym-news-content {   

        animation-play-state: paused;   

    }   

</style>   

<div class="blfym-news-container">   

    <div class="blfym-date-box" id="blfymDateBox">   

        <i>📅</i> جاري تحميل التاريخ...   

    </div>   

    <div class="blfym-news-ticker" id="blfymNewsTicker">   

        <div class="blfym-news-content" id="blfymNews">   

            <span class="blfym-news-item"><a href="#">📢 خبر عاجل: إطلاق تحديث جديد!</a></span>   

            <span class="blfym-news-item"><a href="#">💡 نصيحة تقنية: كيف تحسن سرعة موقعك؟</a></span>   

            <span class="blfym-news-item"><a href="#">📊 تقرير: ارتفاع عدد مستخدمي التطبيقات!</a></span>   

            <span class="blfym-news-item"><a href="#">🔥 عروض خاصة: تخفيضات تصل إلى 50%!</a></span>   

        </div>   

    </div>   

</div>   

<script>   

    function blfymUpdateDate() {   

        let today = new Date();   

        let options = { year: 'numeric', month: 'long', day: 'numeric' };   

          

        let gregorianDate = new Intl.DateTimeFormat('ar-EG', options).format(today); 

        let hijriDate = new Intl.DateTimeFormat('ar-SA-u-ca-islamic', options).format(today);   

 

        document.getElementById("blfymDateBox").innerHTML = `<i>📅</i> ${gregorianDate} | 🕌 ${hijriDate}`;   

    }   

    function blfymToggleDateVisibility() {   

        let dateBox = document.getElementById("blfymDateBox");   

        setInterval(() => {   

            dateBox.style.display = "none"; 

            setTimeout(() => {   

                dateBox.style.display = "flex";   

            }, 1000); 

        }, 2000);   

    }   

    blfymUpdateDate();   

    setInterval(blfymUpdateDate, 86400000);   

    blfymToggleDateVisibility();   

</script>

---

كيفية تركيب الأداة في مدونات بلوجر​

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

---

تخصيص الأداة​

• تغيير الأخبار: قم بتعديل الروابط والنصوص داخل blfym-news-content.
• تعديل الألوان: يمكنك تغيير تدرج الألوان في .blfym-news-container.
• ضبط سرعة الحركة: قم بتعديل animation-duration في @keyframes blfymScrollNews.

---

الخاتمة​

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

 

[أسيرالشوق]

جزاك الله خيراً