المميزات
- ✅ عربي RTL تلقائيًا.
- ✅ متجاوب مع الهاتف والكمبيوتر.
- ✅ هيدر بسيط.
- ✅ قائمة رئيسية.
- ✅ بحث.
- ✅ قائمة جوال.
- ✅ عرض المشاركات.
- ✅ صفحة المقال تعمل.
- ✅ التصنيفات.
- ✅ المشاركات الشائعة.
- ✅ ترقيم المشاركات.
- ✅ أقسام قابلة للإضافة من تخطيط Blogger.
- ✅ CSS خفيف.
-
✅ لا يحتوي على
data:blog.homepageUrl + ...الذي سبب الخطأ السابق. - ✅ لا توجد حماية أو تشفير للقالب.
Minimal-Arabic-Blogger-v2.xml تم بناؤه على مراحل بسيطة. سأشرح لك من الصفر إلى النهاية بحيث تستطيع لاحقًا تعديل القالب بنفسك.1. الهيكل الأساسي للقالب
أول شيء نبدأ بهيكل XML/HTML الذي يفهمه Blogger:
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html
b:css="false"
b:defaultwidgetversion="2"
b:layoutsVersion="3"
b:responsive="true"
expr:dir="data:blog.languageDirection"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:b="http://www.google.com/2005/gml/b"
xmlns:data="http://www.google.com/2005/gml/data"
xmlns:expr="http://www.google.com/2005/gml/expr">
هذه ليست صفحة HTML عادية فقط؛ هناك إضافات خاصة بـ Blogger مثل:
-
b:section -
b:widget -
b:skin -
data:blog -
data:post -
expr:
وهي التي تسمح لـ Blogger بإدارة المحتوى تلقائيًا
2. إعداد اللغة والاتجاه
استخدمنا:
expr:dir="data:blog.languageDirection"
وهذا يجعل اتجاه القالب يعتمد على لغة المدونة.
إذا كانت المدونة عربية يصبح الاتجاه:
RTL
وإذا كانت إنجليزية يمكن أن يصبح:
LTR
وهذه أفضل من كتابة dir="rtl" بشكل ثابت إذا أردت قالبًا قابلًا للتبديل.
3. قسم <head>
بعد ذلك نضع معلومات الصفحة:
<head><meta charset="UTF-8"/><meta content="width=device-width, initial-scale=1" name="viewport"/><title><data:blog.pageTitle/></title>
السطر:
<meta charset="UTF-8"/>
مهم جدًا لدعم اللغة العربية.
أما:
<meta name="viewport" ... />
فيجعل التصميم متوافقًا مع الهواتف.
وهذا:
<title><data:blog.pageTitle/></title>
يجعل عنوان الصفحة يتغير تلقائيًا حسب الصفحة أو المقال
4. CSS الخاص بالقالب
داخل <head> وضعنا:
<b:skin><![CDATA[ ... ]]></b:skin>
هذا هو المكان الأساسي لتصميم القالب.
مثلًا:
body{ margin:0; background:#f5f6f8; color:#222; font-family:Arial,Tahoma,sans-serif; }
هنا حددنا:
- لون الخلفية.
- لون النص.
- الخط.
- إزالة الهوامش الافتراضية.
5. تحديد عرض الموقع
أنشأنا كلاس:
.container{ width:94%; max-width:1100px; margin:auto; }
وظيفته جعل المحتوى في المنتصف.
على شاشة كبيرة لن يتجاوز:
1100px
وعلى الهاتف يستخدم تقريبًا:
94%
من عرض الشاشة.
6. تصميم الهيدر
أنشأنا:
<header class="header">
والهيدر يحتوي على:
الشعار القائمة البحث زر قائمة الهاتف
الشعار:
<a class="logo" expr:href="data:blog.homepageUrl"> <data:blog.title/> </a>
هنا استخدمنا:
<data:blog.title/>
حتى يظهر اسم مدونتك تلقائيًا.
واستخدمنا:
expr:href="data:blog.homepageUrl"
للعودة إلى الصفحة الرئيسية.
7. القائمة الرئيسية
القائمة عبارة عن:
<nav class="nav">
وبداخلها:
<a expr:href="data:blog.homepageUrl">الرئيسية</a> <a href="/p/about.html">من نحن</a> <a href="/p/contact.html">اتصل بنا</a>
لاحظ الفرق المهم هنا.
للصفحة الرئيسية استخدمنا:
expr:href="data:blog.homepageUrl"
لأن Blogger يوفر رابط الصفحة الرئيسية.
أما الصفحات الثابتة فاستخدمنا:
href="/p/about.html"
بدل التعبير الذي سبب المشكلة سابقًا.
8. مربع البحث
أنشأنا:
<form class="search" action="/search" method="get">
ثم:
<input name="q" placeholder="ابحث هنا..." type="search"/>
وعند كتابة كلمة والضغط على بحث، Blogger يستقبلها عن طريق:
/search?q=الكلمة
وهذه طريقة بسيطة وخفيفة للبحث.
9. قائمة الهاتف
على الكمبيوتر القائمة العادية تظهر.
لكن على الهاتف نخفيها:
@media(max-width:800px){ .nav,.search{ display:none } .mobile-button{ display:block } }
ونظهر زر:
☰
عند الضغط عليه تظهر القائمة:
<div class="container mobile-menu" id="mobileMenu">
10. تخطيط الصفحة الرئيسي
بعد الهيدر وضعنا:
<div class="container layout">
وجعلناه Grid:
.layout{ display:grid; grid-template-columns:minmax(0,1fr) 280px; gap:22px; }
أي أن الموقع يتكون من:
┌──────────────────────────────┐ │ الهيدر │ ├──────────────────────┬───────┤ │ │ │ │ المقالات │ │ │ │ │ │ │ │ │ │ │ ├──────────────────────┴───────┤ │ الفوتر │ └──────────────────────────────┘
عرض الشريط الجانبي:
280px
والباقي للمحتوى.
11. منطقة المشاركات في Blogger
أهم جزء في القالب هو:
<b:section id="main" class="main" showaddelement="yes">
هذه تخبر Blogger:
هذه منطقة يمكن أن تحتوي على Widgets.
ثم وضعنا Widget المدونة:
<b:widget id="Blog1" type="Blog" title="المشاركات" version="2" locked="true">
type="Blog" تعني أن هذه هي منطقة المشاركات الأساسية.
12. عرض المشاركات
استخدمنا:
<b:loop values="data:posts" var="post">
وهذا يعني:
مر على جميع المشاركات الموجودة واعرضها واحدة تلو الأخرى.
ثم لكل مشاركة:
<article class="post">
وبداخلها العنوان:
<data:post.title/>
والرابط:
<a expr:href="data:post.url">
وبالتالي يصبح لكل مقال رابط تلقائي.
13. تاريخ المقال
استخدمنا:
<data:post.timestampLabel/> <data:post.timestamp/>
ليظهر مثلًا:
تاريخ النشر 18 أغسطس 2026
بحسب إعدادات Blogger.
14. معاينة المقال
في الصفحة الرئيسية لا نعرض المقال كاملًا، وإنما:
<data:post.snippet/>
أي مقتطف مختصر.
ثم:
<a class="read-more" expr:href="data:post.url"> اقرأ المزيد ← </a>
وبذلك تكون الصفحة الرئيسية خفيفة.
15. صفحة المقال نفسها
استخدمنا شرط Blogger:
<b:if cond="data:blog.pageType == "item"">
هذا يعني:
إذا كانت الصفحة صفحة مقال، اعرض المقال كاملًا.
ثم:
<data:post.body/>
أما إذا لم تكن صفحة مقال:
<b:else/>
نعرض:
<data:post.snippet/>
وهذه نقطة مهمة جدًا في القالب.
16. ترقيم المشاركات
استخدمنا:
<b:if cond="data:newerPageUrl">
ثم:
<a expr:href="data:newerPageUrl"> ← المشاركات الأحدث </a>
وللمشاركات الأقدم:
<b:if cond="data:olderPageUrl">
ثم:
<a expr:href="data:olderPageUrl"> المشاركات الأقدم → </a>
وبذلك يعتمد التصفح على نظام Blogger بدل اختراع نظام ترقيم خارجي.
17. الشريط الجانبي
أنشأنا:
<aside class="sidebar">
وفي داخله صندوق التصنيفات:
<div class="sidebar-box">
ثم Widget التصنيفات:
<b:widget id="Label1" type="Label" title="التصنيفات" version="2"/>
وهنا Blogger يقوم بإنشاء التصنيفات تلقائيًا من تسميات المقالات.
18. المشاركات الشائعة
أضفنا Widget آخر:
<b:widget id="PopularPosts1" type="PopularPosts" title="المشاركات الشائعة" version="2"/>
وبالتالي Blogger هو الذي يدير المشاركات الشائعة.
لا نحتاج JavaScript خارجي أو API.
19. جعل القالب متجاوبًا
هذه أهم نقطة للهاتف.
استخدمنا:
@media(max-width:800px){
وعند وصول الشاشة إلى 800px أو أقل:
.layout{ grid-template-columns:1fr; }
فيصبح التصميم:
الهاتف: الهيدر ─────── المقالات ─────── التصنيفات ─────── المشاركات الشائعة ─────── الفوتر
بدل عمودين.
20. الفوتر
في النهاية:
<footer class="footer">
ووضعنا:
© <data:blog.title/> - جميع الحقوق محفوظة
فيظهر اسم المدونة تلقائيًا.
21. JavaScript
استخدمنا JavaScript صغير جدًا فقط لقائمة الهاتف:
(function(){ var button=document.getElementById('menuButton'); var menu=document.getElementById('mobileMenu'); if(button && menu){ button.onclick=function(){ menu.style.display= (menu.style.display==='block')?'none':'block'; }; } })();
وظيفته الوحيدة:
☰ ↓ فتح القائمة ↓ ☰ ↓ إغلاق القائمة
ولا توجد مكتبات مثل jQuery أو Bootstrap، لذلك القالب خفيف.
الشكل النهائي للقالب
البنية الأساسية أصبحت:
HTML │ ├── HEAD │ ├── Meta │ ├── Title │ └── Blogger Skin │ └── CSS │ ├── HEADER │ ├── Logo │ ├── Navigation │ ├── Search │ └── Mobile Menu │ ├── MAIN │ │ │ ├── Blog Posts │ │ ├── Post Title │ │ ├── Date │ │ ├── Snippet │ │ └── Read More │ │ │ └── SIDEBAR │ ├── Labels │ └── Popular Posts │ ├── FOOTER │ └── JAVASCRIPT └── Mobile Menu
أهم شيء تتعلمه من هذا القالب
إذا أردت تصميم قالب Blogger بنفسك، فاحفظ هذه الأجزاء الأساسية:
b:skin → تصميم CSS
b:section → منطقة Widgets
b:widget → Widget من Blogger
b:loop → تكرار المشاركات
data:post.title → عنوان المقال
data:post.body → محتوى المقال
data:post.url → رابط المقال
data:blog.title → اسم المدونة
data:blog.homepageUrl → رابط الصفحة الرئيسية
b:if → الشروط
وهذه هي الأساسيات التي يمكنك من خلالها بناء قالب Blogger كامل بدل الاعتماد على قالب جاهز.
التعليقات