قالب مميز العربي الإخباري لمدونات بلوجر

قالب مميز العربي الإخباري لمدونات بلوجر

قالب إخباري عربي احترافي مبني خصيصًا لـ Blogger، يعمل بالاتجاه من اليمين إلى اليسار (RTL)، ويوفر تجربة مستخدم متكاملة مشابهة لمواقع الأخبار الكبرى. يعتمد على تصميم عصري بألوان أحمر وأبيض مع خطوط عربية (Tajawal وCairo) وأيقونات Font Awesome 6.

---

✅ أبرز مميزات القالب

🎨 التصميم والواجهة

• تصميم 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	التصنيف الحالي	النمط
قسم 1	cs-1	سياسة	A
قسم 2	cs-2	رياضة	B
قسم 3	cs-3	تقنية	C
قسم 4	cs-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'>

القيمة	النمط	الوصف
a	Layout A	مقال رئيسي كبير على اليسار + 4 مقالات صغيرة على اليمين
b	Layout B	مقال بطل كامل العرض + شبكة 3 بطاقات أسفله
c	Layout C	4 بلاطات متساوية بصورة كاملة وعنوان فوقها
d	Layout 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 في قالب Blogger	data-label + cst-name + رابط href
تغيير نمط العرض	نفس الويدجت	data-layout="a/b/c/d"
إضافة قسم جديد	قالب HTML	نسخ كتلة b:section وتعديل الـ ID
تغيير عدد المقالات	السكريبت في نهاية القالب	max-results=5
تغيير الأيقونة	ويدجت HTML	fa-globe → أيقونة أخرى
إخفاء قسم	ويدجت HTML	style='display:none'