أفضل 5 إضافات لشريط آخر الأخبار على مدونة بلوجر

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

ماهو شريط آخر الأخبار ؟

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

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

يعتبر شريط الأخبار أحد الميزات المهمة لنقل أحدث الأخبار وأهم المعلومات للقارئ، ومن تسمياته أيضا شريط متحرك، و بالإنجليزية (News Letter, Ticker News, Breaking News, Running Text).

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

سأقدم لك في هذا الشرح 5 إضافات لشريط آخر الأخبار متنوعة ومختلفة من ناحية الشكل وأنيميشن تمرير روابط المواضيع المعروضة وهي على التوالي شريط تمرير أفقي لا نهائي، شريط تمرير عمودي، شريط إخفاء وإظهار، شريط أنيميشن الكتابة، شريط تمرير عمودي مع صورة الموضوع.

تم برمجة إضافة شريط آخر الأخبار ب Vanilla Javascript أي أننا لم نعتمد على أي مكتبة خارجية لضمان سرعة شريط الأخبار.

مراحل تركيب شريط آخر الأخبار في قالب بلوجر:

1. اختر شريط آخر الأخبار المناسب لمدونتك وحمل أكواده
2. أنسخ أكواد CSS وضعها فوق ]]></b:skin>
3. أنسخ أكواد Javascript لشريط آخر الأخبار وضعها فوق </body>
4. أنسخ أكواد تحديد العرض الأقصى للأداة (max-width) وضعه في المكان الذي تريد وضع فيه الشريط ويفضل أن يكون أسفل </header>
5. أنسخ أكواد HTML شريط الأخبار وضعها وسط أكواد تحديد العرض الأقصى
6. لعرض الأداة في الصفحة الرئيسية فقط قم بوضع أكواد تحديد العرض الأقصى مع أكواد HTML داخل أكواد إظهار الأداة في الصفحة الرئيسية فقط

أكواد تحديد العرض الأقصى لشريط آخر الأخبار

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

<div style="display:flex;max-width:1100px;margin:0 auto;padding:10px 10px;box-sizing:border-box">
<!-- هنا يوضع كود HTML شريط الأخبار -->
</div>

أكواد تخصيص ظهور شريط الأخبار في الصفحة الرئيسية فقط

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

<b:if cond='data:view.isHomepage'>
<!-- أي كود يوضع هنا لن يظهر إلا في الصفحة الرئيسية -->
</b:if>

أنواع شريط آخر الأخبار

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

1. شريط تمرير أفقي دائم

يعتبر هو الأشهر ويقوم بعرض روابط المواضيع بشكل أفقي، مع تمرير أفقي دائم لا يتوقف إلى إذا وضعت سهم الموس فوقه.

معاينة شريط الأخبار تحميل شريط الأخبار

2. شريط تمرير عمودي

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

معاينة شريط الأخبار تحميل شريط الأخبار

3. شريط إخفاء وإظهار مع أنيميشن

يعتبر هو الأخف من بين كل هذه الشرائط، حيث يقوم بإستبدال عرض روابط المواضيع من خلال إظهار الرابط المطلوب وإخفاء السابق مع أنيميشن بسيط يمكن تشبيه بحركة خلط أوراق اللعب.

معاينة شريط الأخبار تحميل شريط الأخبار

4. شريط أنيميشن كتابة

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

معاينة شريط الأخبار تحميل شريط الأخبار

5. شريط تمرير عمودي مع صورة الموضوع

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

معاينة شريط الأخبار تحميل شريط الأخبار

إعدادات شريط الأخبار

أكواد HTML شرائط الأخبار تتضمن مجموعة من المتغييرات التي تتحكم في خواص كل شريط متحرك وهي كتالي.

data-speed - خاصية يتميز بها شريط آخر الأخبار الأفقي (1) فقط وتمكنك من التحكم في سرعة الشريط المتحرك 

data-wait - كل الشرائط تدعمها ما عدا الشريط (1)، تمكنك هذه الخاصية من تحديد عدد ثواني الإنتظار قبل عرض رابط الموضوع التالي وإخفاء السابق (مع الأنيميشن).

data-label - تمكنك هذه الخاصية من تحديد التصنيف الذي سيتم جلب المواضيع حسبه، في حالة أردت أن تجلب المواضيع حسب آخر المنشورات، فكل ما عليك فعله هو جعل قيمة هذا المتغير recent.

data-results - موجودة في كل الشرائط التي ذكرناها، تمكنك من تحديد عدد المواضيع التي ترغب في جلبها لشريط الأخبار.

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