الدليل الشامل لقالب Blfym CV V1

كل ما تحتاج معرفته لبناء موقع سيرة ذاتية احترافي على منصة بلوجر — من التركيب حتى التخصيص الكامل عبر لوحة التخطيط.

1. مقدمة عن القالب

قالب Blfym CV V1 هو قالب بلوجر متكامل مصمم لعرض السيرة الذاتية والملف الشخصي للمبرمجين والمطورين والمستقلين وأصحاب المهن الحرة. يعتمد القالب على فكرة ذكية: كل المحتوى يتم إدارته من واجهة التخطيط (Layout) في لوحة تحكم بلوجر، بينما يتم بناء التصميم والعناصر ديناميكياً عند فتح الصفحة.

هذا يعني أنك لن تحتاج لتعديل أي سطر كود لتغيير المحتوى. كل شيء — من اسمك وصورتك، إلى مهاراتك ومشاريعك وإنجازاتك — يُدار من مكان واحد: التخطيط.

أهم مميزات القالب

لوحة تخطيط كاملة لكل عنصر — لا حاجة لتعديل الكود لتغيير المحتوى.
تصميم عصري متجاوب مع جميع الشاشات (جوال، تابلت، كمبيوتر).
وضع ليلي ونهاري بضغطة زر مع حفظ التفضيل.
شاشة تحميل أنيقة (Splash Screen) بشعار القالب.
نظام حماية للحقوق مع إعادة توجيه تلقائية عند التلاعب.
دعم كامل للغة العربية (RTL) والخطوط العربية الحديثة.
مشاريع غير محدودة، مهارات غير محدودة، إنجازات غير محدودة.
بحث وفلترة ديناميكية للمشاريع حسب التصنيف.
شجرة إنجازات زمنية تفاعلية مع فلترة السنوات.
مودال تفاصيل لكل مشروع + مودال مشاركة اجتماعية.
أزرار عائمة للمشاركة والعودة للأعلى.
عدادات إحصائية متحركة عند الظهور.
دائرات مهارات متحركة (SVG Animation).
سرعة تحميل عالية.
متوافق مع محركات البحث (SEO).

المعاينة

معاينة حيه اختبار التجاوب مع الشاشات قالب التنظيف

روابط التحميل

تحميل الإصدار الانجليزي تحميل الإصدار العربي

صور

2. متطلبات التركيب

حساب على Blogger مع مدونة جاهزة (بلوجر مجاني).
متصفح حديث (Chrome / Firefox / Edge / Safari).
لا يلزم أي معرفة برمجية.

3. خطوات تركيب القالب

الخطوة 1: الدخول إلى لوحة تحكم بلوجر

1. افتح موقع: blogger.com
2. سجّل الدخول بحسابك
3. اختر المدونة التي تريد تركيب القالب عليها
4. من القائمة الجانبية اختر: "المظهر" (Theme)

الخطوة 2: الدخول إلى وضع تعديل HTML

1. في صفحة "المظهر" اضغط على السهم الصغير بجانب زر "تخصيص"
2. اختر "تعديل HTML" (Edit HTML)
3. ستُفتح لك صفحة تحتوي على كود القالب الحالي

الخطوة 3: استبدال كود القالب

1. اضغط داخل منطقة الكود (Ctrl+A) لتحديد الكل
2. احذف الكود القديم بالكامل
3. الصق كود قالب Blfym CV V1 كاملاً
4. اضغط زر "حفظ" في أعلى الصفحة

الخطوة 4: التحقق من نجاح التركيب

1. افتح صفحة المدونة في تبويب جديد
2. يجب أن تظهر شاشة تحميل ثم الصفحة الرئيسية بالتصميم الجديد
3. إذا ظهرت الصفحة بدون تنسيق:
   - تأكد من نسخ كود XML كاملاً
   - تأكد من عدم وجود أخطاء أثناء اللصق

الخطوة 5: تفعيل الأدوات من التخطيط

1. اذهب إلى: المظهر ← التخطيط (Layout)
2. ستجد عدة أقسام جاهزة (مخفية عن الزوار):
   - بيانات المبرمج
   - الإحصائيات
   - المهارات
   - المشاريع
   - الإنجازات
   - الخدمات
   - كيف أعمل
   - وسائل الاتصال
   - روابط الفوتر
3. اضغط على أيقونة القلم بجانب أي أداة لتعديلها

4. شرح لوحة التخطيط بالتفصيل

جميع الأقسام في التخطيط مخفية عن الزوار — تُستخدم فقط لقراءة البيانات وبناء الواجهة ديناميكياً. لا تقلق إذا لم تظهر في معاينة الموقع.

4.1 قسم بيانات المبرمج

هذا القسم يتحكم في البطاقة الرئيسية (Hero) وفي الشريط العلوي. يحتوي على أداة HTML واحدة.

الصيغة العامة:
الاسم|اللقب|رابط الصورة|الحالة|النبذة|العناوين المتغيرة

مثال جاهز:
أحمد محمود|BLFYM|https://example.com/avatar.jpg|أعمل على مشاريع جديدة|مبرمج ويب مصري شغوف ببناء تجارب رقمية مبتكرة.|مطور مواقع وتطبيقات,مطور أدوات JavaScript,مطور قوالب بلوجر,صانع أدوات رقمية

شرح الحقول

الاسم: يظهر في الـ Hero كعنوان رئيسي بخط كبير.
اللقب: يظهر في شعار الصفحة العلوي وفي شارة الصورة.
رابط الصورة: رابط مباشر لصورة شخصية (يُفضل 400×400 بكسل).
الحالة: نص قصير يظهر في شارة "متاح" بجانب الاسم مثل: "أعمل على مشاريع جديدة".
النبذة: فقرة تعريفية تظهر أسفل الاسم مباشرة.
العناوين المتغيرة: مفصولة بفاصلة , — تتبدل تلقائياً بأنيميشن الكتابة والحذف.

4.2 قسم الإحصائيات

يظهر كشبكة من 4 بطاقات في الصف. يحتوي على أداة قائمة روابط (LinkList). كل رابط يمثل إحصائية.

الصيغة:
الاسم // الأيقونة // الرقم

مثال:
مشروع منشور // bi-box-seam-fill // 7
قوالب مواقع // bi-layers-fill // 2
تطبيقات // bi-phone-fill // 3
سنوات خبرة // bi-calendar-check-fill // 8

شرح الحقول

الحقل الأول: نص الوصف (يظهر أسفل الرقم).
الحقل الثاني: اسم أيقونة Bootstrap Icons (بدون بادئة bi-).
الحقل الثالث: الرقم الذي سيعد تصاعدياً عند ظهور البطاقة.
حقل الرابط (URL): لا يُستخدم — اتركه #.

4.3 قسم المهارات

يظهر كشبكة من دوائر SVG متحركة مع لوحة تفاصيل جانبية. يحتوي على أداة قائمة روابط — كل رابط يمثل مهارة واحدة، وكل مهارة لها لونها الخاص (Hex) مستقل عن غيرها، مما يسمح بإضافة أي مهارة جديدة من التخطيط مباشرة دون ارتباط بمهارات محددة مسبقاً.

الصيغة:
اسم المهارة // النسبة // اللون Hex // التقييم // الوصف // المميزات

مثال:
HTML/CSS // 98 // f3f3f3 // متقدم // بناء واجهات دقيقة ومتجاوبة مع جميع الشاشات. // HTML5 دلالي, Flexbox & Grid, تصميم متجاوب

JavaScript // 95 // 0891b2 // متقدم // تطوير تفاعلات وأدوات ويب متقدمة. // DOM API, Fetch & Promises, أدوات تفاعلية

Blogger // 95 // 2563eb // متقدم // تطوير قوالب بلوجر مخصصة واحترافية. // قوالب XML, Widgets مخصصة, تحسين SEO

شرح الحقول

اسم المهارة: يظهر أسفل الدائرة (مثل: HTML/CSS).
النسبة: رقم من 0 إلى 100 — يُعرض بشكل دائرة متحركة.
اللون (Hex): كود لون مكوّن من 6 خانات بدون علامة # (مثل f3f3f3 / 2563eb / e34f26) — يُحدد لون حلقة الدائرة المتحركة. كل مهارة بلونها المستقل، فلا يوجد ارتباط بلون ثابت أو مهارة معينة.

🎨 مولد أكواد الألوان

التقييم: نص قصير يظهر أسفل الاسم (جيد / جيد جداً / متقدم).
الوصف: فقرة قصيرة تظهر عند الضغط على المهارة.
المميزات: مفصولة بفواصل , — تظهر كنقاط عند الضغط.
حقل الرابط (URL): معرّف فريد للمهارة بالإنجليزية (مثل html / js / blogger) — يُستخدم لربط المهارة بالمشاريع.

ملاحظات مهمة

الفاصل بين الحقول هو // (شرطتان مائلتان) — يجب الالتزام به بالترتيب.
إذا كان الحقل الأخير (المميزات) يحتوي على أكثر من عنصر، تُفصل العناصر بفاصلة ,.
ترتيب الحقول ثابت: الاسم → النسبة → اللون → التقييم → الوصف → المميزات.
يمكن إضافة أي عدد من المهارات من التخطيط مباشرة — لا يوجد حد أقصى أو ربط بمهارات معينة.
لو لم يُحدَّد اللون، يُستخدم اللون الافتراضي للموقع.

4.4 قسم المشاريع

هذا القسم يستخدم أدوات HTML متعددة — كل أداة تمثل مشروعاً واحداً. لإضافة مشروع جديد، اضغط "إضافة أداة" واختر "HTML/JavaScript".

الصيغة الكاملة (12 حقلاً مفصولة بعلامة |):

الاسم|التصنيف|السنة|الأيقونة|الحالة|نص الحالة|الوصف|الوصف الطويل|التقنيات|المهارات|المميزات|الرابط

مثال كامل:
blfym Dalil UI v2.0|template|2026|bi-layer-forward|active|نشط|قالب بلوجر متكامل لتصميم الأدلة والمواقع|قالب مطوّر من الصفر بتصميم عصري ومتجاوب يوفر مكونات جاهزة|Blogger,HTML,CSS,JavaScript,SEO|html,js,blogger,uiux|تصميم متجاوب,توافق تام مع السيو,سرعة تحميل عالية,مكونات جاهزة|#

شرح الحقول بالتفصيل

الاسم: عنوان المشروع (يظهر بحجم كبير على البطاقة).
التصنيف: إحدى القيم التالية:
- template — قوالب
- app — تطبيقات
- tool — أدوات
- blog — مدونات
السنة: نص حر (مثل 2024 / 2025 / 2026).
الأيقونة: اسم أيقونة Bootstrap Icons (مثل bi-layer-forward).
الحالة: إحدى القيم:
- active — نشط (لون أخضر)
- dev — قيد التطوير (لون برتقالي)
- paused — متوقف (لون رمادي)
نص الحالة: نص حر يظهر في الشارة (مثل "نشط" / "قيد التطوير").
الوصف: جملة قصيرة تظهر على البطاقة.
الوصف الطويل: فقرة كاملة تظهر في المودال عند الضغط على "التفاصيل".
التقنيات: مفصولة بفواصل , — تظهر كـ Chips ملونة.
المهارات: مفاتيح المهارات (نفس حقل الرابط في قسم المهارات) — تُستخدم لفلترة المشاريع عند الضغط على مهارة.
المميزات: مفصولة بفواصل — تظهر كنقاط علامة صح في المودال.
الرابط: رابط المشروع — عند الضغط على زر "زيارة".

لإضافة مشروع جديد

1. في التخطيط، اذهب إلى قسم "المشاريع"
2. اضغط "إضافة أداة" (Add a Gadget)
3. اختر: HTML/JavaScript
4. اكتب المحتوى بالصيغة أعلاه
5. اضغط حفظ

4.5 قسم الإنجازات

يظهر كشجرة زمنية تفاعلية. يحتوي على أداة قائمة روابط واحدة.

لكل رابط:
اسم الرابط (النص) = اسم الإنجاز
الرابط (URL)      = السنة

مثال:
النص: أداة BLFYM JavaScript Obfuscator لتشفير اكواد الجافاسكربت
الرابط: 2026

النص: قالب blfym Dalil UI v2.0
الرابط: 2026

النص: بداية رحلتى في تعلم لغات البرمجة
الرابط: 2016

ملاحظات مهمة

يتم تجميع الإنجازات تلقائياً في شكل شجرة.
فلتر السنوات يُولّد تلقائياً من البيانات (لا تحتاج إعداده).
الإنجازات تتبدل بالتناوب يمين/يسار المحور المركزي.
يمكنك إضافة عدد غير محدود من الإنجازات.
إذا أردت أن تظهر عدة إنجازات في نفس السنة، أضف روابط متعددة بنفس السنة.

4.6 قسم الخدمات

يظهر كشبكة من بطاقات الخدمات. يحتوي على أداة قائمة روابط.

الصيغة:
اسم الخدمة // الأيقونة // الوصف

مثال:
تطوير قوالب بلوجر // bi-pencil-square // تصميم قوالب مخصصة ومتجاوبة مع جميع الشاشات.
تطوير واجهات المواقع // bi-code-slash // بناء واجهات HTML/CSS/JavaScript حديثة.
تطوير تطبيقات // bi-phone // إنشاء تطبيقات أندرويد وأدوات ويب تفاعلية.
تطوير أدوات الويب // bi-tools // إنشاء أدوات تفاعلية تخدم أصحاب المواقع.
دمج خدمات الذكاء الاصطناعي // bi-robot // ربط المواقع بخدمات AI.
تحسين الأداء // bi-speedometer2 // تسريع المواقع وتحسين تجربة المستخدم.

شرح الحقول

اسم الخدمة: يظهر كعنوان في أعلى البطاقة.
الأيقونة: اسم أيقونة Bootstrap Icons (بدون بادئة).
الوصف: جملة قصيرة توضح الخدمة.
حقل الرابط (URL): غير مستخدم حالياً — اتركه #.

4.7 قسم كيف أعمل (طريقة العمل)

يظهر كبطاقات مرقمة (01، 02، 03…). يحتوي على أداة قائمة روابط.

الصيغة:
اسم الخطوة // الأيقونة // الوصف

مثال:
تحليل الفكرة // bi-lightbulb-fill // فهم المطلوب وتحديد الوظائف الأساسية والجمهور المستهدف.
تصميم الواجهة // bi-palette-fill // إنشاء واجهة واضحة ومتجاوبة مع مختلف الشاشات.
التطوير والاختبار // bi-git // تنفيذ الوظائف والتحقق منها على المتصفحات.
التحسين والتحديث // bi-rocket-takeoff-fill // إصلاح الأخطاء وتحسين الأداء.

الأرقام (01، 02، 03…) تُولّد تلقائياً — لا تكتبها.
لا يوجد حد أقصى لعدد الخطوات.
الترتيب يتبع ترتيب الروابط في الأداة.

4.8 قسم وسائل الاتصال

يظهر كشبكة أيقونات اجتماعية بألوان مخصصة عند Hover. يحتوي على أداة قائمة روابط.

اسم الرابط (يجب أن يكون مفتاحاً معروفاً) ← الرابط الكامل

أمثلة:
facebook    ← https://facebook.com/username
twitter     ← https://twitter.com/username
github      ← https://github.com/username
linkedin    ← https://linkedin.com/in/username
whatsapp    ← https://wa.me/201234567890
telegram    ← https://t.me/username
youtube     ← https://youtube.com/@username
blog        ← https://example.blogspot.com

المفاتيح المدعومة

facebook   → أيقونة فيسبوك + لون #1877f2
twitter    → أيقونة تويتر + لون #000
github     → أيقونة جيت هاب + لون #333
linkedin   → أيقونة لينكدإن + لون #0a66c2
whatsapp   → أيقونة واتساب + لون #25d366
telegram   → أيقونة تليجرام + لون #0088cc
youtube    → أيقونة يوتيوب + لون #ff0000
blog       → أيقونة RSS + لون أزرق القالب

مهم: اكتب الاسم بحروف إنجليزية صغيرة تماماً كما هو موضح أعلاه حتى يتم ربط الأيقونة الصحيحة.

4.9 قسم روابط سريعة (الفوتر)

العمود الثاني في الفوتر. يحتوي على أداة قائمة روابط.

اسم الرابط  ←  الرابط

مثال:
المشاريع    ← #projects
المهارات    ← #skills
الخدمات     ← #services
تواصل       ← #contact

يمكن استخدام روابط داخلية (تبدأ بـ #) أو خارجية.
يُفضل استخدام روابط الأقسام للتنقل السريع.

4.10 قسم تواصل (الفوتر)

العمود الثالث في الفوتر. يحتوي على أداة قائمة روابط.

اسم الرابط  ←  الرابط

مثال:
واتساب              ← https://wa.me/201234567890
جيت هاب             ← https://github.com/username
المدونة             ← https://example.blogspot.com
البريد الإلكتروني   ← mailto:you@example.com

4.11 قسم نبذة الفوتر

العمود الأول في الفوتر مع الشعار. يحتوي على أداة HTML واحدة.

الصيغة:
اللقب|سطر أول // سطر ثاني

مثال:
BLFYM|أحمد محمود — مطور مواقع وتطبيقات وأدوات رقمية. // أحوّل الأفكار إلى واقع رقمي يتخطى حدود المألوف.

اللقب: يظهر بجانب أيقونة البرق في أعلى الفوتر.
الأسطر: مفصولة بـ // — كل سطر يظهر كفقرة مستقلة.

5. شرح واجهة الموقع

5.1 شاشة التحميل (Splash Screen)

تظهر عند فتح الصفحة لأول مرة، تحتوي على شعار BLFYM ودائرة تحميل دوّارة ونص "جارٍ التحميل...". تختفي تلقائياً بعد اكتمال تحميل جميع الموارد (بحد أدنى 800ms، وبحد أقصى 3 ثوانٍ كحماية).

5.2 الشريط العلوي (Top Nav)

على اليسار: شعار القالب (اللقب من بيانات المبرمج).
في الوسط: روابط التنقل بين الأقسام (المشاريع، المهارات، الإنجازات، الخدمات، طريقة العمل، تواصل).
على اليمين: زر تبديل الوضع الليلي/النهاري + زر المشاركة.
الشريط لاصق (Sticky) في أعلى الصفحة عند التمرير.
خلفيته شبه شفافة مع تأثير Blur.

5.3 قسم Hero (البطاقة الرئيسية)

صورة دائرية بإطار متدرج أزرق-سماوي مع حركة عائمة.
شارة اللقب أسفل الصورة بتدرج لوني.
الاسم بحجم كبير.
نص متغير (Typewriter Effect) يعرض العناوين بالتناوب مع مؤشر وامض.
شارة الحالة مع نقطة خضراء نابضة.
النبذة التعريفية بخلفية رمادية فاتحة وحد جانبي أزرق.
زرّان: "استكشف مشاريعي" (متدرج) و "تواصل معي" (مفرّغ).

5.4 قسم الإحصائيات

شبكة من 4 بطاقات في الصف (2×2 على الجوال).
كل بطاقة تحتوي على أيقونة ملونة + رقم متحرك + وصف.
الأرقام تُعد تصاعدياً عند ظهورها في الشاشة.
عند Hover ترتفع البطاقة قليلاً مع ظل أقوى.

5.5 قسم المهارات

تخطيط من عمودين: يسار (بطاقات المهارات) + يمين (لوحة التفاصيل).
كل مهارة دائرة SVG متحركة بنسبة مئوية + اسم + تقييم.
كل دائرة لها لون مختلف (أزرق، سماوي، بنفسجي، أخضر، برتقالي، وردي).
عند الضغط على مهارة، يتم عرض في اللوحة اليمنى:
- اسم المهارة والوصف.
- قائمة المميزات كنقاط.
- زر "عرض المشاريع المرتبطة".
الضغط على "عرض المشاريع المرتبطة" يُفلتر المشاريع تلقائياً ويمرر لها.

5.6 قسم المشاريع

شريط أدوات يحتوي على:
- حقل بحث فوري (يبحث في الاسم، الوصف، والتقنيات).
- أزرار فلترة (الكل، قوالب، تطبيقات، أدوات، مدونات).
شبكة من بطاقات المشاريع (تتكيف تلقائياً مع حجم الشاشة).
كل بطاقة تحتوي على:
- رأس بتدرج لوني مع أيقونة المشروع.
- شارة الحالة في أعلى اليمين (نشط / قيد التطوير / متوقف).
- الاسم والوصف والتقنيات.
- زرّان: "التفاصيل" و "زيارة".
يعرض 3 مشاريع في البداية، وزر "عرض المزيد" يضيف 3 في كل ضغطة.
عند الضغط على بطاقة أو زر "التفاصيل" → يظهر مودال بالتفاصيل الكاملة.

5.7 قسم الإنجازات (شجرة الإنجازات)

فلتر سنوات تلقائي في أعلى الشجرة (الكل + السنوات المتوفرة).
شجرة زمنية بمحور مركزي عمودي بتدرج لوني.
دوائر زرقاء تمثل السنوات في منتصف الشجرة.
بطاقات الإنجازات تتناوب يمين/يسار المحور.
تظهر تدريجياً عند التمرير (Animated Reveal).
عند اختيار سنة → تختفي الإنجازات الأخرى بأنيميشن سلس.

5.8 قسم الخدمات

شبكة تلقائية (Auto-fill) من بطاقات الخدمات.
كل بطاقة تحتوي على أيقونة بخلفية متدرجة + اسم + وصف.
تأثير Hover: البطاقة ترتفع + خلفية شفافة تنتشر من الزاوية.

5.9 قسم طريقة العمل

شبكة من بطاقات مرقمة (01، 02، 03…).
كل خطوة تحتوي على رقم كبير باهت في الزاوية + أيقونة + اسم + وصف.
تأثير Hover: البطاقة ترتفع + الحد يتلون بالسماوي.

5.10 قسم التواصل

بطاقة بخلفية متدرجة خفيفة (أزرق + سماوي).
عنوان "هل لديك فكرة مشروع؟".
نص فرعي تحفيزي.
زرّان: "تواصل عبر واتساب" (متدرج) و "أرسل بريداً" (مفرّغ).
شبكة أيقونات التواصل الاجتماعي بألوان مخصصة عند Hover.

5.11 الفوتر

ثلاثة أعمدة:
- الأول (الأوسع): نبذة المبرمج مع الشعار.
- الثاني: روابط سريعة.
- الثالث: وسائل التواصل.
يتحول إلى عمود واحد على الشاشات الصغيرة.
يحتوي على سطر حقوق المصمم في الأسفل.

5.12 الأزرار العائمة

تظهر فقط بعد التمرير لأسفل (أكثر من 260px).
زر المشاركة (سماوي): يفتح مودال المشاركة.
زر العودة للأعلى (أزرق): يمرر الصفحة بسلاسة للأعلى.

5.13 مودال المشاركة

عنوان "شارك الملف الشخصي".
أزرار مشاركة: فيسبوك، تويتر، واتساب، تليجرام، لينكدإن.
زر المشاركة الأصلية للجهاز (على الجوالات المدعومة عبر Web Share API).
حقل رابط قابل للنسخ مع زر "نسخ" يتحول إلى "تم النسخ" عند الضغط.
يمكن إغلاقه بـ: زر X، أو الضغط خارج المودال، أو زر Escape.

5.14 مودال المشروع

رأس بتدرج لوني وأيقونة كبيرة للمشروع.
اسم المشروع بخط كبير.
شرائح التقنيات الملونة.
الوصف الطويل.
قائمة المميزات كنقاط علامة صح.
زر "زيارة المشروع" + زر مشاركة المشروع.

5.15 الوضع الليلي/النهاري

زر في الشريط العلوي يبدّل بين الوضعين.
يُحفظ التفضيل في المتصفح (localStorage).
يتبع تفضيل النظام تلقائياً في أول زيارة.
جميع الألوان تتغير بسلاسة عند التبديل.

6. الأيقونات المدعومة

القالب يعتمد على مكتبة Bootstrap Icons — أكثر من 2000 أيقونة جاهزة. يمكنك استعراض جميع الأيقونات من الموقع الرسمي: icons.getbootstrap.com

أيقونات مقترحة للمشاريع

bi-layer-forward     ← قالب
bi-graph-up-arrow    ← أداة تحليل
bi-people-fill       ← تطبيق اجتماعي
bi-server            ← سيرفر / استضافة
bi-journal-richtext  ← مدونة
bi-phone-fill        ← تطبيق جوال
bi-code-slash        ← مشروع برمجي
bi-box               ← مشروع عام
bi-rocket-takeoff    ← مشروع جديد
bi-stars             ← مشروع مميز

أيقونات مقترحة للخدمات

bi-pencil-square     ← تطوير / تصميم
bi-code-slash        ← برمجة
bi-phone             ← تطبيقات
bi-tools             ← أدوات
bi-robot             ← ذكاء اصطناعي
bi-speedometer2      ← أداء
bi-shield-check      ← حماية
bi-palette-fill      ← تصميم
bi-cloud-upload      ← استضافة
bi-database          ← بيانات

أيقونات مقترحة للإحصائيات

bi-box-seam-fill        ← مشاريع
bi-layers-fill          ← قوالب
bi-phone-fill           ← تطبيقات
bi-calendar-check-fill  ← سنوات خبرة
bi-people-fill          ← عملاء
bi-star-fill            ← تقييم
bi-award-fill           ← جوائز
bi-heart-fill           ← إعجابات

7. نظام الحماية

يحتوي القالب على نظام حماية مدمج لحقوق المصمم blfym. هذا النظام يعمل تلقائياً ولا يحتاج أي إعداد منك.

كيف يعمل النظام

يراقب عنصر الحقوق في أسفل الصفحة بشكل مستمر.
يتحقق دورياً من:
- عدم إخفاء العنصر (display / visibility / opacity).
- عدم تغيير نص "blfym".
- عدم تغيير الرابط إلى رابط مختلف.
- عدم إخفاء أي عنصر أب (Parent Element).
- عدم نقل العنصر خارج الشاشة.
- عدم تصغير حجمه إلى أقل من 5 بكسل.
في حال اكتشاف أي تلاعب → إعادة توجيه فورية إلى صفحة تحذير.
يتم إعادة حقن التنسيقات كل 3 ثوانٍ.
يتم التحقق من صحة الرابط والنص كل ثانيتين.

ملاحظات مهمة

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

8. الأسئلة الشائعة

هل يمكنني إضافة أكثر من 6 مهارات؟

نعم، أضف عدداً غير محدود. الشبكة تتكيف تلقائياً مع العدد.

هل يمكنني إضافة أكثر من 7 مشاريع؟

نعم، أضف أدوات HTML جديدة في قسم المشاريع. سيتم عرض 3 في البداية وزر "عرض المزيد" يعرض الباقي.

كيف أضيف تصنيفاً جديداً للمشاريع؟

تصنيفات المشاريع (template / app / tool / blog) محددة مسبقاً في القالب. إذا احتجت تصنيفاً جديداً، يمكن للمطور المختص إضافته من كود XML.

لماذا لا تظهر الأدوات في الموقع؟

الأدوات في التخطيط مخفية بشكل مقصود عن الزوار. وظيفتها الوحيدة تخزين البيانات التي يقرؤها القالب لبناء الواجهة ديناميكياً. هذا يجعل القالب أسرع وأنظف.

ماذا يحدث إذا لم يعمل الجافاسكربت في المتصفح؟

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

كيف أغيّر الألوان؟

الألوان الرئيسية معرّفة داخل كود القالب في متغيرات CSS. يمكن للمطور المختص تعديلها بسهولة من كود XML.

كيف أغيّر شعار BLFYM؟

الشعار يظهر من حقل "اللقب" في قسم بيانات المبرمج. غيّره هناك وسيتحدث تلقائياً في الشريط العلوي، شارة الصورة، والفوتر.

هل القالب متوافق مع السيو (SEO)؟

نعم. القالب يستخدم عناوين ديناميكية لكل صفحة، ويستدعي جميع وسوم الميتا الخاصة ببلوجر، ويحتوي على بنية HTML دلالية (Semantic HTML).

هل يمكنني تعديل التصميم؟

نعم، لكن يتطلب ذلك معرفة بأساسيات CSS/HTML. جميع التنسيقات موجودة في القالب ويمكن تعديلها بحرية.

هل القالب يدعم اللغة الإنجليزية؟

القالب مصمم بالدرجة الأولى للغة العربية (RTL). يمكن استخدامه بالإنجليزية، لكن ستحتاج لتعديل اتجاه الصفحة من كود XML.

كيف أضيف صورة مصغرة للمشروع؟

الإصدار الحالي من القالب يستخدم أيقونة بدلاً من صورة مصغرة (لتحسين السرعة). إذا أردت إضافة صور مصغرة، تحتاج لتعديل كود القالب.

هل يمكنني استخدام القالب لعدة مدونات؟

نعم، لكن كل مدونة تحتاج نسخة مستقلة. يُفضل تخصيص كل نسخة ببياناتها الخاصة.

9. نصائح للاستخدام الأمثل

استخدم صوراً شخصية بمقاس 400×400 بكسل على الأقل، بخلفية موحدة.
اجعل الوصف الطويل للمشاريع بين 100-200 كلمة لتفاصيل كافية دون إطالة.
أضف بين 3 و 8 مميزات لكل مشروع.
استخدم النسب المئوية بصدق — 80% فأكثر للمهارات المتقدمة.
حدّث شجرة الإنجازات سنوياً لتواكب تطورك.
لا تضع روابط فارغة (#) في وسائل الاتصال الحقيقية.
جرب الموقع على الجوال قبل النشر النهائي.
احتفظ بنسخة احتياطية من كود القالب قبل أي تعديل.
اكتب نصوصاً عربية واضحة بدون رموز غريبة.
استخدم كلمات مفتاحية في الوصف الطويل لتحسين السيو.
رتب المشاريع من الأحدث إلى الأقدم.
أضف رابطاً حقيقياً لكل مشروع (رابط المعاينة أو GitHub).
لا تضع أكثر من 12 مهارة — قد تصبح الشبكة مزدحمة.
حدّث صورة الملف الشخصي بانتظام.
اكتب نبذة شخصية بصيغة المتكلم ("أعمل على..." بدلاً من "يعمل على...").

10. استكشاف الأخطاء وإصلاحها

المشكلة: الأدوات لا تظهر في التخطيط

الحل: تأكد من أن قالب XML مركّب بشكل صحيح (كامل بدون حذف). إذا استمرت المشكلة، أعد تركيب القالب.

المشكلة: النصوص لا تظهر بالشكل الصحيح

الحل: تأكد من استخدام الفواصل الصحيحة:

الفواصل | بين حقول المشاريع وبيانات المبرمج.
الفاصل // بين الحقول الفرعية (الإحصائيات، المهارات، الخدمات).
الفاصلة , بين عناصر القوائم (التقنيات، المميزات، العناوين).

لا تضع مسافات زائدة حول الفواصل — مسافة واحدة كافية.

المشكلة: الأيقونات لا تظهر

الحل: تأكد من أن اسم الأيقونة موجود في مكتبة Bootstrap Icons، وأنك كتبته بالشكل الصحيح.

في حقل الأيقونة: اكتب bi-code-slash أو code-slash — كلاهما يعمل.
في حقل تقييم المهارة: لا تستخدم أيقونة.
تحقق من الرابط: icons.getbootstrap.com

المشكلة: الصورة الشخصية لا تظهر

الحل: تأكد من أن:

الرابط مباشر (ينتهي بـ .jpg / .png / .webp).
الرابط قابل للوصول من الإنترنت (افتحه في تبويب جديد للتأكد).
الرابط لا يحتوي على مسافات أو رموز غريبة.

المشكلة: القالب بطيء في التحميل

الحل:

استخدم صور شخصية بحجم صغير (أقل من 200 كيلوبايت).
لا تضع أكثر من 30 مشروعاً — قسمها لصفحات أو احذف القديم.
تجنب الأيقونات الكبيرة جداً.

المشكلة: زر "عرض المزيد" لا يعمل

الحل: تأكد من أن لديك أكثر من 3 مشاريع. إذا كان لديك 3 أو أقل، سيختفي الزر تلقائياً.

المشكلة: شجرة الإنجازات لا تظهر

الحل: تأكد من:

وجود إنجاز واحد على الأقل في القسم.
وجود سنة صحيحة في حقل الرابط (أرقام فقط).

المشكلة: الوضع الليلي لا يعمل

الحل: امسح ذاكرة التخزين المؤقت للمتصفح، ثم أعد تحميل الصفحة. قد يكون التفضيل القديم محفوظاً في المتصفح.

المشكلة: ظهور صفحة تحذير عند فتح الموقع

الحل: هذا يعني أن كود الحقوق قد تم التلاعب به. تأكد من:

عدم تعديل كود القالب.
عدم إضافة أي كود يخفي عنصر الحقوق.
إعادة تركيب القالب الأصلي.

المشكلة: النصوص العربية تظهر مشوهة

الحل: تأكد من أن ترميز الصفحة UTF-8 (وهو افتراضي في القالب). إذا استمرت المشكلة، جرب خطاً عربياً آخر.

11. هيكل الملفات النهائي

📁 قالب Blfym CV V1
└── 📄 blfym-cv-v1.xml      ← ملف القالب الوحيد

📁 بعد التركيب في بلوجر
├── 📁 التخطيط
│   ├── 🔧 بيانات المبرمج
│   ├── 🔧 الإحصائيات
│   ├── 🔧 المهارات
│   ├── 🔧 المشاريع (أدوات HTML متعددة)
│   ├── 🔧 الإنجازات
│   ├── 🔧 الخدمات
│   ├── 🔧 كيف أعمل
│   ├── 🔧 وسائل الاتصال
│   ├── 🔧 روابط سريعة (فوتر)
│   ├── 🔧 تواصل (فوتر)
│   └── 🔧 نبذة الفوتر
└── 📁 المظهر
    └── تعديل HTML (كود القالب)

12. الخاتمة

قالب Blfym CV V1 هو أداة قوية لإنشاء موقع سيرة ذاتية احترافي على بلوجر بدون كتابة سطر كود واحد. كل ما تحتاجه هو:

تركيب ملف XML مرة واحدة.
تعبئة الحقول من التخطيط.
نشر الموقع والاستمتاع.

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

شارك القالب مع أصدقائك المطورين — فالمعرفة تزداد بالمشاركة.