قالب مميز برو الاخباري لمنصات بلوجر
قالب إخباري عربي احترافي مبني خصيصًا لـ Blogger، يعمل بالاتجاه من اليمين إلى اليسار (RTL)، ويوفر تجربة مستخدم متكاملة مشابهة لمواقع الأخبار الكبرى. يعتمد على تصميم عصري بألوان أحمر وأبيض مع خطوط عربية (Tajawal وCairo) وأيقونات Font Awesome 6.
لمعاينة القالب: https://momayazpro.blogspot.com/
✅ أبرز مميزات القالب
🎨 التصميم والواجهة
- تصميم RTL كامل باللغة العربية
- خطوط Google العربية: Tajawal + Cairo
- نظام ألوان CSS متغير سهل التخصيص
- شريط أخبار عاجل متحرك (Ticker) في أعلى الصفحة
- شريط التاريخ مع عرض حالة الطقس
- هيدر ثابت مع شعار + قائمة تنقل + أزرار بحث وإشعارات
- زر العودة للأعلى
🖼️ السلايدر الرئيسي
- سلايدر ديناميكي يجلب أحدث 9 مقالات من Feed
- 3 شرائح (كل شريحة تضم مقال رئيسي + مقالين صغيرين)
- تبديل تلقائي كل 6 ثوانٍ
- نقاط تنقل يدوية أسفل السلايدر
- تأثير تكبير الصورة عند التفعيل
📰 صفحة الرئيسية
- شبكة 4 بطاقات للمقالات الأولى (Grid 4 columns)
- قائمة بطاقات أفقية للمقالات الباقية مع مقتطف ورابط "اقرأ المزيد"
- ترقيم الصفحات (أحدث / أقدم)
📁 أقسام التصنيفات (4 أقسام)
- قسم سياسة — نمط A (مقال رئيسي كبير + 4 صغيرة على الجانب)
- قسم رياضة — نمط B (مقال بطل + شبكة 3 بطاقات)
- قسم تقنية — نمط C (شبكة 4 بلاطات بصورة كاملة)
- قسم اقتصاد — نمط D (مقال رئيسي + قائمة مقالات)
- كل قسم يجلب مقالاته تلقائيًا من Blogger Feed حسب التصنيف
📄 صفحة المقال المفرد
- صورة بارزة بعرض كامل
- شريط بيانات المقال (التاريخ، الكاتب، وقت القراءة)
- محتوى منسق مع خطوط واضحة
- وسوم (Tags) تشير لصفحات التصنيف
- أزرار مشاركة: فيسبوك، تويتر/X، واتساب، تيليغرام
- قسم "قد يهمك أيضاً" (مقالات ذات صلة تُجلب تلقائياً)
📂 صفحة الأرشيف والبحث
- تخطيط كامل العرض بدون سايدبار
- عنوان الأرشيف يُعرض تلقائياً (اسم التصنيف / نتائج البحث)
- قائمة مقالات بنمط الكروت الأفقية
📌 الشريط الجانبي (Sidebar)
- ويدجت "اخترنا لكم" (المقالات المميزة مع صور مصغرة)
- ويدجت "الأكثر قراءة" (قائمة مرقمة)
- ويدجت "الأقسام" (تاجات التصنيفات)
🦶 الفوتر
- 4 أعمدة: معلومات الموقع + روابط سريعة + أقسام + نشرة بريدية
- روابط التواصل الاجتماعي
- حقوق الملكية وروابط السياسات
⚡ الأداء والبنية
- جلب المقالات عبر Blogger JSON Feed (بدون بطء)
- تحميل أقسام التصنيفات فقط في الصفحة الرئيسية
- إخفاء الصورة المكررة داخل محتوى المقال تلقائياً
- كود JavaScript نظيف بدون مكتبات خارجية
🛠️ كيفية تعديل أقسام التصنيفات
📌 الأقسام الموجودة وبياناتها
القسمالـ IDالتصنيف الحاليالنمطقسم 1cs-1سياسةAقسم 2cs-2رياضةBقسم 3cs-3تقنيةCقسم 4cs-4اقتصادD
🔧 تغيير اسم التصنيف في قسم موجود
كل قسم له 3 أماكن يجب تعديلها معاً:
المكان الأول — خاصية data-label في الـ HTML
ابحث عن هذا السطر (مثال قسم سياسة):
html
<div class='cat-section' data-label='سياسة' data-layout='a' id='cs-1'>
غيّر سياسة إلى اسم التصنيف الجديد، مثلاً ثقافة:
html
<div class='cat-section' data-label='ثقافة' data-layout='a' id='cs-1'>
المكان الثاني — اسم القسم في العنوان
ابحث عن:
html
<span class='cst-name'>سياسة</span>
غيّره إلى:
html
<span class='cst-name'>ثقافة</span>
المكان الثالث — رابط "الكل"
ابحث عن:
html
<a class='see-all cst-all' href='/search/label/سياسة'>الكل ...
غيّره إلى:
html
<a class='see-all cst-all' href='/search/label/ثقافة'>الكل ...
⚠️ مهم: اسم التصنيف في data-label يجب أن يطابق تمامًا اسم التصنيف في مدونتك (حساسية الأحرف والمسافات).
🎨 تغيير نمط عرض القسم (Layout)
كل قسم يدعم 4 أنماط عرض. لتغيير النمط عدّل خاصية data-layout:
html
<div class='cat-section' data-label='رياضة' data-layout='b' id='cs-2'>
القيمةالنمطالوصفaLayout Aمقال رئيسي كبير على اليسار + 4 مقالات صغيرة على اليمينbLayout Bمقال بطل كامل العرض + شبكة 3 بطاقات أسفلهcLayout C4 بلاطات متساوية بصورة كاملة وعنوان فوقهاdLayout Dمقال رئيسي كبير + قائمة مقالات على الجانب
مثال: لتحويل قسم رياضة من نمط B إلى نمط C:
html
<div class='cat-section' data-label='رياضة' data-layout='c' id='cs-2'>
➕ إضافة قسم تصنيف جديد
الخطوة 1: أضف ويدجت HTML جديد في لوحة تحكم Blogger ضمن قسم #primary، أو أضف الكود مباشرة في قالب HTML بعد آخر </b:section> لقسم cat-sec-4:
html
<b:section id='cat-sec-5' showaddelement='yes'>
<b:widget id='HTML5' locked='false' title='قسم: صحة (نمط B)' type='HTML' version='2' visible='true'>
<b:includable id='main'>
<div class='cat-section' data-label='صحة' data-layout='b' id='cs-5'>
<div class='section-head'>
<h2>
<span class='sh-icon'><i class='fa-solid fa-heart-pulse'/></span>
<span class='cst-name'>صحة</span>
</h2>
<a class='see-all cst-all' href='/search/label/صحة'>الكل <i class='fa-solid fa-arrow-left'/></a>
</div>
<div class='cst-body'>
<div style='text-align:center;padding:40px;color:var(--text-muted);'>
<i class='fa-solid fa-spinner fa-spin' style='font-size:22px;'/>
</div>
</div>
</div>
</b:includable>
</b:widget>
</b:section>
✅ سيتم تحميل المقالات تلقائياً عند تحميل الصفحة الرئيسية لأن السكريبت يستهدف كل العناصر التي تحمل الكلاس cat-section.
🔢 تغيير عدد المقالات في كل قسم
في السكريبت ابحث عن دالة loadCatSection، وتحديدًا عن هذا السطر:
javascript
fetch('/feeds/posts/default/-/'+encodeURIComponent(label)+'?alt=json&max-results=5')
غيّر max-results=5 إلى العدد الذي تريده، مثلاً 7:
javascript
fetch('/feeds/posts/default/-/'+encodeURIComponent(label)+'?alt=json&max-results=7')
📌 ملاحظة: النمط A و D يستخدمان المقال الأول كبطل + 4 مقالات صغيرة (max 5). النمط B يستخدم 1 بطل + 3 بطاقات. النمط C يستخدم 4 بلاطات.
🌈 تغيير أيقونة قسم التصنيف
ابحث عن الأيقونة داخل الـ sh-icon للقسم المطلوب، مثلاً:
html
<span class='sh-icon'><i class='fa-solid fa-globe'/></span>
استبدل fa-globe بأي أيقونة من Font Awesome 6:
الأيقونةالكودكرة قدمfa-futbolتقنيةfa-microchipاقتصادfa-chart-lineصحةfa-heart-pulseفن وثقافةfa-paletteسفرfa-planeعلومfa-flaskدينfa-mosque
🔄 ترتيب الأقسام
لتغيير ترتيب ظهور الأقسام في الصفحة، انقل كتلة <b:section id='cat-sec-X'> كاملةً إلى الموضع الجديد في الكود. الأقسام تظهر بالترتيب الذي تكون فيه في الكود.
🚫 إخفاء قسم بدون حذفه
أضف style='display:none' على cat-section:
html
<div class='cat-section' data-label='سياسة' data-layout='a' id='cs-1' style='display:none'>
📋 ملخص سريع للتعديلات الشائعة
المهمةالملف/المكانما تعدلهتغيير اسم تصنيفويدجت HTML في قالب Bloggerdata-label + cst-name + رابط hrefتغيير نمط العرضنفس الويدجتdata-layout="a/b/c/d"إضافة قسم جديدقالب HTMLنسخ كتلة b:section وتعديل الـ IDتغيير عدد المقالاتالسكريبت في نهاية القالبmax-results=5تغيير الأيقونةويدجت HTMLfa-globe → أيقونة أخرىإخفاء قسمويدجت HTMLstyle='display:none'