إذا كنت تمتلك مدونة على بلوجر وتريد جعلها أكثر احترافية، فإن إضافة شريط آخر الأخبار هي واحدة من أفضل الطرق لجذب انتباه الزوار وعرض أحدث المقالات بشكل ديناميكي وجذاب! 🎯 في هذه المقالة، سنشرح لك كيفية إضافة شريط أخبار احترافي بسهولة وبدون الحاجة إلى خبرة في البرمجة! 🔥
🎨 لماذا تحتاج إلى شريط آخر الأخبار في مدونتك؟
إضافة شريط الأخبار تساعد في:
✅ زيادة تفاعل الزوار: عرض المقالات الحديثة بطريقة متحركة يجذب انتباههم.
✅ تحسين تجربة المستخدم: يسهل عليهم الوصول إلى أحدث المحتوى بسرعة.
✅ تقليل معدل الارتداد: يجعل الزائر يقضي وقتًا أطول في مدونتك.
🛠️ طريقة إضافة شريط آخر الأخبار إلى بلوجر
✨ الطريقة 1: باستخدام كود HTML + CSS + JavaScript
1️⃣ توجه إلى لوحة تحكم بلوجر > اختر التخطيط > ثم اضغط على إضافة أداة.
2️⃣ اختر HTML/JavaScript، ثم الصق الكود التالي:
<style>
.news-ticker {
background: #ff5733; /* لون الخلفية */
color: #fff; /* لون النص */
padding: 10px;
overflow: hidden;
white-space: nowrap;
}
.news-ticker span {
display: inline-block;
padding-left: 100%;
animation: ticker 10s linear infinite;
}
@keyframes ticker {
from { transform: translateX(0); }
to { transform: translateX(-100%); }
}
</style>
<div class="news-ticker">
<span>📢 آخر الأخبار: <a href="URL1">عنوان الخبر الأول</a> | <a href="URL2">عنوان الخبر الثاني</a> | <a href="URL3">عنوان الخبر الثالث</a></span>
</div>
3️⃣ استبدل "URL1" و"عنوان الخبر الأول" بروابط وأسماء مقالاتك الحديثة.
🔥 الطريقة 2: استخدام كود jQuery لجعل الأخبار تتحرك بشكل احترافي
إذا كنت ترغب في إضافة تأثيرات أكثر احترافية، يمكنك استخدام jQuery:
<head>:<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script><style>
.ticker-container {
width: 100%;
background: #222;
color: #fff;
padding: 10px;
overflow: hidden;
position: relative;
}
.ticker {
display: flex;
position: absolute;
white-space: nowrap;
animation: scroll 15s linear infinite;
}
@keyframes scroll {
from { transform: translateX(100%); }
to { transform: translateX(-100%); }
}
.ticker a {
color: #ffcc00;
text-decoration: none;
margin: 0 15px;
}
</style>
<div class="ticker-container">
<div class="ticker">
<a href="URL1">📢 عنوان المقال الأول</a>
<a href="URL2">🔥 عنوان المقال الثاني</a>
<a href="URL3">🚀 عنوان المقال الثالث</a>
</div></div>🎯 نصائح لجعل شريط الأخبار أكثر فعالية
✔️ استخدم عناوين جذابة لزيادة التفاعل مع الزوار.
✔️ قم بتحديث الأخبار بانتظام حتى يكون الشريط ديناميكياً.
✔️ اختر ألواناً متناسقة مع تصميم مدونتك ليبدو الشريط جزءًا منها.
✔️ لا تفرط في سرعة الشريط، حتى يتمكن الزوار من قراءته بسهولة.
🚀 الآن لديك شريط أخبار احترافي على مدونة بلوجر الخاصة بك! لا تنسَ تجربة الأكواد وإضافة لمستك الخاصة لجعلها أكثر جاذبية. 😉 إذا كان لديك أي استفسارات، لا تتردد في طرحها! 💬
إرسال تعليق