قالب روعة لمنصة بلوجر

مرحباً بك في دليل استخدام “قالب روعة” الإخباري. صُمم هذا القالب ليكون المحرك الاحترافي لمدونتك على منصة بلوجر، حيث يدمج بين سرعة الأداء المتطورة وجماليات التصميم العربي الحديث. يهدف هذا الدليل إلى تمكينك من إدارة موقعك وتخصيصه بالكامل، بدءاً من تغيير الألوان وصولاً إلى ضبط المحتوى الديناميكي، دون الحاجة لخبرة برمجية مسبقة.

نظرة سريعة على مميزات القالب

• تصميم إخباري متكامل: واجهة احترافية مخصصة للمحتوى العربي.
• دعم كامل للغة العربية: توافق تام مع اتجاه الكتابة من اليمين إلى اليسار (RTL).
• مرونة العرض: متجاوب تماماً مع الهواتف الذكية، الأجهزة اللوحية، وأجهزة الحاسوب.
• سهولة الإدارة: التحكم في العناصر يتم عبر “التخطيط” في بلوجر دون لمس الكود.
• قوائم احترافية: قائمة ثانوية تدعم القوائم المنسدلة (Dropdown) أسفل شريط الأخبار.

أولاً: وصف القالب ومكوناته الهيكلية

1.1 هيكل الصفحة الرئيسي

يتوزع محتوى القالب بشكل عمودي منظم يسهل عملية التصفح:

• الرأس (Header): مركز القيادة ويضم الشعار، شريط البحث، القائمة الرئيسية، وزر القائمة للجوال.
• شريط الأخبار العاجلة: شريط حركي بخلفية زرقاء لعرض العناوين الهامة بشكل دوري.
• القائمة الثانوية: شريط تنقل إضافي يقع أسفل الأخبار ويحتوي على تصنيفات فرعية منسدلة.
• المنطقة الرئيسية: تنقسم لعمود المحتوى (المقالات) وعمود الشريط الجانبي (Sidebar).
• عرض المحتوى: يتنوع التنسيق بين “مقال بطولي”، “شبكة ثلاثية”، وقائمة “للمزيد”.
• التذييل (Footer): يضم أربعة أعمدة (الهوية، روابط سريعة، تصنيفات، ومعلومات التواصل).
• زر العودة للأعلى: يظهر تلقائياً عند التمرير لأسفل لتسهيل العودة للرأس.

1.2 محتويات الشريط الجانبي (Sidebar)

يضم الشريط الجانبي أدوات (ودجات) مرتبة كالتالي:

• بطاقة تعريف الموقع مع أيقونات التواصل الاجتماعي.
• محرك بحث داخلي.
• صندوق الاشتراك في النشرة البريدية.
• قائمة المقالات الأكثر قراءة.
• سحابة التصنيفات (Labels).
• بطاقة إحصائيات الموقع.

1.3 التقنيات المستخدمة

• خط Tajawal: الخط العربي الرسمي للقالب.
• Font Awesome 6: لتوفير أيقونات عصرية وتفاعلية.
• CSS Grid & Flexbox: لضمان التنسيق المتجاوب والدقيق.
• Blogger API & XML Tags: لجلب البيانات والروابط بشكل ديناميكي وسريع.

ثانياً: مزايا القالب التقنية والجمالية

• التصميم: يعتمد نظام ألوان مريح للعين (الأزرق والكهرماني) مع تأثيرات حركية سلسة.
• الاستجابة: قائمة “هامبرغر” مخصصة للجوال وقائمة ثانوية قابلة للتمرير الأفقي على الشاشات الصغيرة.
• الأداء: كود نظيف بدون مكتبات JavaScript ثقيلة، مع دعم ميزة “Lazy Load” لتحميل الصور بذكاء.
• SEO: بنية برمجية تدعم محركات البحث عبر وسوم دلالية (Semantic HTML) وتوزيع سليم لوسوم العناوين (H1-H3).

ثالثاً: طريقة تركيب وتفعيل القالب

1. توجه إلى لوحة تحكم بلوجر > السمة (Theme).
2. اضغط على السهم بجانب “تخصيص” واختر تعديل HTML.
3. احذف كافة الأكواد الموجودة، ثم الصق كود القالب الجديد واضغط حفظ.
4. تنبيه: احتفظ دائماً بنسخة احتياطية من قالبك القديم قبل البدء.

رابعاً: إدارة القوائم (العلوية والثانوية)

تعديل القائمة الرئيسية

تُدار من قسم التخطيط (Layout) عبر ودجت Main Menu:

• لإضافة رابط: اكتب الاسم (مثلاً: الرئيسية) ثم الرابط (URL).
• ملاحظة: الرابط الأخير في القائمة يظهر تلقائياً كزر أزرق بارز (CTA).

تعديل القائمة الثانوية (Dropdown)

• الروابط الديناميكية: تُعدل من ودجت “القائمة الثانوية” في التخطيط.
• القوائم الثابتة: يتم تعديلها من داخل كود HTML بالبحث عن تعليق “ وتغيير النصوص والروابط يدوياً.

خامساً: تخصيص الودجات والأدوات

• المنشورات الشائعة: يُفضل ضبطها على (5 مقالات) وتفعيل خيار “الصور المصغرة”.
• شريط الأخبار (Ticker): ابحث في الكود عن ticker-content وقم بتغيير الخبر داخل وسوم <span>. (يجب تكرار الخبر مرتين لضمان استمرارية الحركة).
• الإحصائيات: ابحث في الكود عن كلمة “إحصائيات” وقم بتعديل الأرقام والنصوص يدوياً.
• النشرة البريدية: يمكنك ربطها بخدمات مثل (Mailchimp أو Brevo) عبر استبدال كود الودجت بالكود المقدم من تلك المنصات.
• التواصل الاجتماعي: ابحث عن href='#' في الكود واستبدل الرمز # برابط حسابك المباشر.

سادساً: تخصيص الألوان والخطوط (CSS Variables)

لتغيير هوية الموقع البصرية، ابحث في الكود عن قسم :root وقم بتغيير القيم التالية:

• --primary: للون الرئيسي (الأزرق).
• --accent: للون التمييز (الكهرماني).
• تغيير الخط: يمكنك استبدال رابط Google Fonts في head وتغيير font-family في الكود ليعمل الموقع بالخط الجديد فوراً.

سابعاً: الأسئلة الشائعة وحلول المشكلات

• عدم ظهور الصور: تأكد من إدراج “صورة مميزة” في بداية كل مقال.
• مشاكل الترقيم: تأكد من أن قيمة var PER_PAGE في الكود تطابق عدد المقالات المحدد في إعدادات بلوجر.
• Google Analytics: يتم وضع معرف التتبع في إعدادات بلوجر أو يدوياً قبل وسم الإغلاق </head>.
• اختفاء القائمة في الجوال: تأكد من حفظ التعديلات؛ القائمة تظهر كشريط قابل للتمرير عرضياً بإصبع اليد.

جدول مرجعي سريع للأكواد (للبحث داخل HTML)

• نصوص الأخبار: ابحث عن ====TICKER====
• اللون الرئيسي: ابحث عن --primary: #2563eb
• عدد مقالات الترقيم: ابحث عن var PER_PAGE = 7
• روابط التواصل: ابحث عن title='فيسبوك' أو المنصة المطلوبة.
• تغيير الشعار النصي: ابحث عن class='logo-icon'